jQuery UI Widgets Forums Angular jqxGrid grouping with checkbox

Tagged: 

This topic contains 3 replies, has 3 voices, and was last updated by  svetoslav_borislavov 3 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • jqxGrid grouping with checkbox #122217

    sasukk177
    Participant

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

    jqxGrid grouping with checkbox #122219

    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/

    jqxGrid grouping with checkbox #122414

    Navya1980
    Participant

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

    jqxGrid grouping with checkbox #122418

    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/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.