jqxGrid grouping with checkbox

[sasukk177Participant]

Hello everyone, i have some problem need help .
i want have a checkbox in everyrow but rowgrouping cant have that . What should i do

[svetoslav_borislavovParticipant]

Hi,

jqxGrid supports a method called ‘groupsrenderer’. This function is called when a group is rendered.
The function accepts (text?: string, group?: number, expanded?: boolean, data?: any).
You can use it to edit the group row.
I have made an example with the checkbox for you.

Here it is:
app.component.ts:
import { Component, ViewChild } from ‘@angular/core’;
import { jqxGridComponent } from ‘jqwidgets-ng/jqxgrid’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’],
})
export class AppComponent {

@ViewChild(‘grid’, { static: false }) grid!: jqxGridComponent;

data = [
{ id: 1, someProp: ‘someValue’, name: ‘Hydrogen’ },
{ id: 2, someProp: ‘someValue’, name: ‘Helium’ },
{ id: 3, someProp: ‘someValue’, name: ‘Potassium’ },
{ id: 4, someProp: ‘anyValue’, name: ‘Pluto’ },
{ id: 5, someProp: ‘anyValue’, name: ‘Calcium’ },
{ id: 6, someProp: ‘anyValue’, name: ‘Magnesium’ },
{ id: 7, someProp: ‘anyValue’, name: ‘Superlik’ },
{ id: 1, someProp: ‘someValue’, name: ‘Hydrogen’ },
{ id: 2, someProp: ‘someValue’, name: ‘Helium’ },
{ id: 3, someProp: ‘somseValue’, name: ‘Potassium’ },
{ id: 4, someProp: ‘anyValuwe’, name: ‘Pluto’ },
{ id: 5, someProp: ‘anyValude’, name: ‘Calcium’ },
{ id: 6, someProp: ‘anyVaalue’, name: ‘Magnesium’ },
{ id: 7, someProp: ‘anyValue’, name: ‘Superlik’ },
{ id: 1, someProp: ‘someVdalue’, name: ‘Hydrogen’ },
{ id: 2, someProp: ‘someVaalue’, name: ‘Helium’ },
{ id: 3, someProp: ‘someVaslue’, name: ‘Potassium’ },
{ id: 4, someProp: ‘anyValue’, name: ‘Pluto’ },
{ id: 5, someProp: ‘anysValue’, name: ‘Calcium’ },
{ id: 6, someProp: ‘anyValue’, name: ‘Magnesium’ },
{ id: 7, someProp: ‘anyValue’, name: ‘Superlik’ },

];

dataSource = new jqx.dataAdapter({
localData: this.data,
dataFields: [
{ name: ‘id’, type: ‘number’ },
{ name: ‘someProp’, type: ‘string’ },
{ name: ‘name’, type: ‘string’ },
]
});

columns = [
{ text: ‘Id’, datafield: ‘id’ },
{ text: ‘Name’, datafield: ‘name’ },
{ text: ‘SomeProp’, datafield: ‘someProp’ },
];

groupsData: any = {};

constructor() {

const basicWindow = window as any;
basicWindow.onCheckBoxClick = this.onCheckBoxClick.bind(this);

}

groupsRenderer = (text?: string, group?: number, expanded?: boolean, data?: any): any => {

const template = document.querySelector(“.group-template”);
const myTemplate = template?.cloneNode(true) as HTMLElement;
myTemplate.style.display = ‘flex’;

const templateText = myTemplate.querySelector(‘.group-text’);
templateText!.textContent = text!;

const templateCheckbox = myTemplate.querySelector(‘.group-checkbox’) as HTMLElement;

this.groupsData[group!] = data;

templateCheckbox.setAttribute(‘onclick’, window.onCheckBoxClick(event));
templateCheckbox.setAttribute(‘group-name’, ${group});

return myTemplate.outerHTML;
}

onCheckBoxClick(event: any) {

const group = event.target.getAttribute(‘group-name’) as string;

const groupData = this.groupsData[group];

console.log(groupData);

}
}

app.component.html:
<jqxGrid #grid [source]=”dataSource” [height]=”200″ [columns]=”columns” [groups]=”[‘someProp’]” [groupable]=”true”
[groupsrenderer]=”groupsRenderer”>
</jqxGrid>
<div class=”group-template” style=”height: 100%; display: none; align-items: center; justify-content: space-between;”>
<p class=”group-text”>Template</p>
<input class=”group-checkbox” type=”checkbox” style=’height: 16px; width: 16px; margin-right: 25px;’>
</div>

app.module.ts:
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;

import { jqxGridModule } from ‘jqwidgets-ng/jqxgrid’;

import { AppComponent } from ‘./app.component’;

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
jqxGridModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[Navya1980Participant]

Hello everyone, i have some problem need help .
i want have a checkbox in everyrow but rowgrouping cant have that . What should i do

[svetoslav_borislavovParticipant]

Hi,

You can look at the example that I gave. It should work in your situation too.
If you have any additional questions, do not hesitate to contact us!

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts