Hi,
I am using Paramquery grid with Angular 8 application. I am unable to call the functions present in the component from the buttons present in the data row and unable to use variables present in that component from the post render present in the colModel.
Please help me put with this.
Below is the code snippet.
*Component.ts*
______________________________________________________________________
import { Component, OnInit, ViewChild } from '@angular/core';
import { PqgridComponent } from 'src/app/pqgrid.component';
import pq from 'pqgrid';
import { Router } from '@angular/router';
import { ModalDirective } from 'ngx-bootstrap';
import { FormGroup, FormBuilder, FormControl, Validators, FormControlName } from '@angular/forms';
@Component({
selector: 'app-manage-roles',
templateUrl: './manage-roles.component.html',
styleUrls: ['./manage-roles.component.scss']
})
export class ManageRolesComponent implements OnInit {
@ViewChild('gridRoles', { static: false }) grid: PqgridComponent;
@ViewChild('addEditRoleModal', { static: false }) addEditRoleModal: ModalDirective;
gridRolesOptions: pq.gridT.options;
data = [
{ role: "Staff User", roleDescription: "Staff User", assignedUsers: "2", permissions: "4/5", status: "Active" },
{ role: "Manager", roleDescription: "Manager", assignedUsers: "1", permissions: "5/5", status: "Active" },
]
columns = [
{ title: "Role", dataType: "string", dataIndx: "role" },
{ title: "Description", dataType: "string", dataIndx: "roleDescription" },
{ title: "Assigned Users", dataType: "string", dataIndx: "assignedUsers", align: "center" },
{ title: "Permissions", dataType: "string", dataIndx: "permissions", align: "center" },
{ title: "Status", dataType: "string", dataIndx: "status", align: "center" },
{
title: "Actions", editable: false, minWidth: 165, sortable: false, align: "center",
render: function (ui) {
return "<button type='button' class='edit_btn'>Edit</button>\
<button type='button' class='delete_btn'>Delete</button>";
},
postRender: function (ui) {
var rowIndx = ui.rowIndx,
grid = this,
$cell = grid.getCell(ui);
//edit button
$cell.find(".edit_btn").button({ icons: { primary: 'ui-icon-pencil' } })
.off("click")
.on("click", function (evt) {
// console.log(grid.pdata[rowIndx]);
});
//delete button
$cell.find(".delete_btn")
.button({ icons: { primary: 'ui-icon-close' } }).off("click")
.on("click", function (evt) {
grid.deleteRow({ rowIndx: ui.rowIndx });
});
}
}
]
submitted = false;
constructor(private _router: Router, private _fb: FormBuilder) {
var self = this;
this.gridRolesOptions = {
scrollModel: { autoFit: true },
title: "Manage Roles",
columnTemplate: { render: this.tooltipRender, width: 100 },
showTop: true,
reactive: true,
locale: 'en',
height: "flex",
stripeRows: true,
numberCell: {
show: false
},
selectionModel: { type: 'none' },
filterModel: {
on: true,
mode: "AND",
header: false,
menuIcon: true //show filter row icon initially.
},
postRenderInterval: -1,
menuIcon: true, //show header menu icon initially.
menuUI: {
tabs: ['filter'] //display only filter tab.
},
toolbar: {
items: [
{
type: 'button',
icon: 'ui-icon-plus',
label: 'Reset filters',
listener: function () {
this.reset({ filter: true });
}
}
]
},
collapsible: { on: true, collapsed: false },
pageModel: { type: 'local' },
colModel: this.columns,
editable: false,
swipeModel: { on: false },
animModel: {
on: true
},
sort: function (evt, ui) {
self.onSort(evt, ui);
},
dataModel: {
data: this.data
}
}
}
roleForm: FormGroup;
ngOnInit() {
this.formInit();
}
formInit() {
this.roleForm = this._fb.group({
roleName: new FormControl(null, Validators.required),
roleStatus: new FormControl(null, Validators.required),
roleDescription: new FormControl(null)
});
}
// convenience getter for easy access to form fields
get f() { return this.roleForm.controls; }
onSubmit() {
this.submitted = true;
// stop here if form is invalid
if (this.roleForm.invalid) {
return;
}
console.log(this.roleForm.value);
this.addEditRole(0);
}
tooltipRender(ui) {
return {
//here we inject html title attribute in each cell.
attr: 'title="' + ui.formatVal + '"'
}
}
onSort(evt, ui) {
JSON.stringify(ui.sorter);
}
addEditRole(val) {
this.submitted = false;
// this.formInit()
if (val == 1) {
this.addEditRoleModal.show();
}
else
this.addEditRoleModal.hide();
}
}
*Html code*
________________________________________________________________
<div class="row">
<div class="col-xs-12">
<button mat-raised-button color="accent" class="pull-right m-b-10" (click)="addEditRole(1)">
<mat-icon>add</mat-icon> Add Role
</button>
</div>
<div class="col-xs-12">
<pqgrid #gridRoles [options]="gridRolesOptions"></pqgrid>
</div>
</div>
<!--Add edit Note modal pop up-->
<div bsModal #addEditRoleModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="dialog-sizes-name1" [config]="{backdrop: 'static'}">
<form [formGroup]="roleForm" (ngSubmit)="onSubmit()">
<bs-modal-backdrop></bs-modal-backdrop>
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<h4 id="dialog-sizes-name1" class="modal-title pull-left">Add Role</h4>
<button type="button" class="close pull-right" (click)="addEditRole(0)" aria-label="Close">
<span aria-hidden="true" class="text-white">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="form-group">
<label class="mandatory">Role Name :</label>
<input [type]="type" class="form-control" placeholder="Role Name"
formControlName="roleName"
[ngClass]="{ 'is-invalid': submitted && f.roleName.errors }">
<div *ngIf="submitted && f.roleName.errors" class="invalid-feedback">
<div *ngIf="f.roleName.errors.required">Role Name is required</div>
</div>
</div>
</div>
<!-- <app-input-feild label="Role Name" type="text" class="col-xs-12 col-sm-6">
</app-input-feild> -->
<div class="col-sm-6 col-xs-12">
<div class="form-group">
<label class="mandatory" for="Status">Status :</label>
<select name="" id="" placeholder="Select Status" class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.roleStatus.errors }"
formControlName="roleStatus">
<option value="null" selected disabled>Select</option>
<option value="1">Active</option>
<option value="2">InActive</option>
</select>
<div *ngIf="submitted && f.roleStatus.errors" class="invalid-feedback">
<div *ngIf="f.roleStatus.errors.required">Role Status is required</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<label>Role Description :</label>
<textarea rows="2" class="form-control" placeholder="Role Description"
formControlName="roleDescription"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-12">
<button mat-raised-button type="submit" class="pull-right btn-success">Save</button>
<button mat-raised-button type="button" (click)="addEditRole(0)"
class="pull-right m-r-5 btn-secondary">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
