JqxGrid CellRendere button is not Grouping

[FihamParticipant]

function LoadStoreGrid() {

    var data = scWahSupplierStoreMappingViewModel.AvailableStoreRackBinItem();

    var tmpList = new Array();

    for (i in data) {
        var tmpObj = { StoreId: data[i].StoreId(), Store: data[i].Store(), StoreRackId: data[i].StoreRackId(), StoreRack: data[i].StoreRack(), StoreRackBinId: data[i].StoreRackBinId(), StoreRackBin: data[i].StoreRackBin(), ItemId: data[i].ItemId(), Item: data[i].Item() }
        tmpList.push(tmpObj);
    };

    var source =
    {
        dataType: "json",
        //async: false,
        dataFields: [

            { name: "StoreId", type: "number" },
            { name: "Store", type: "string" },
            { name: "StoreRackId", type: "number" },
            { name: "StoreRack", type: "string" },
            { name: "StoreRackBinId", type: "number" },
            { name: "StoreRackBin", type: "string" },
            { name: "ItemId", type: "number" },
            { name: "Item", type: "string" }

        ],

        id: 'StoreId,StoreRackId,StoreRackBinId',
        localData: tmpList
    };

    var dataAdapter = new $.jqx.dataAdapter(source);

    // create Tree Grid
    $("#jqxStores").jqxGrid(
    {
        width: '98%',
        source: dataAdapter,
        sortable: true,
        pageable: true,
        autorowheight: true,
        groupable: true,
        //autoheight: true,
        
        columns: [

            { text: 'StoreId', dataField: "StoreId", align: 'center' },
            { text: 'Store', dataField: "Store", align: 'center' },
            { text: 'StoreRackId', dataField: "StoreRackId", align: 'center' },
            { text: 'Rack', dataField: "StoreRack", align: 'center' },
            { text: 'StoreRackBinId', dataField: "StoreRackBinId", align: 'center' },
            { text: 'Bin', dataField: "StoreRackBin", align: 'center' },
            { text: 'ItemId', dataField: "ItemId", align: 'center' },
            { text: 'Item', dataField: "Item", align: 'center' },
            {
                text: '', cellsAlign: 'center', align: "center", columnType: 'none', editable: false, sortable: false, dataField: null, width: 100,
                cellsRenderer: function (row) {
                    var temp = $("#jqxStores").jqxGrid('getrowdata', row);
                    return "<button class='btn btn-sm btn-default grid-tool-btn tip' id='btnEdit' type='button' data-row='" + row + "' onclick = DeleteStore(" + temp.StoreId + "," + temp.StoreRackId + "," + temp.StoreRackBinId + "," + temp.ItemId + ")><i class=' icon-trash'></i></button>";
                }
            }
        ],
        groups: ['Store', 'StoreRack', 'StoreRackBin']
        //editable: true,
    });

    $("#jqxStores").jqxGrid('hidecolumn', 'StoreId');
    $("#jqxStores").jqxGrid('hidecolumn', 'StoreRackId');
    $("#jqxStores").jqxGrid('hidecolumn', 'StoreRackBinId');
    $("#jqxStores").jqxGrid('hidecolumn', 'Store');
    $("#jqxStores").jqxGrid('hidecolumn', 'StoreRack');
    $("#jqxStores").jqxGrid('hidecolumn', 'StoreRackBin');
    
    
}

Here in Columns I render a button to Delete and Setting Parameter Values. But the Grid Is Grouped the Button has Different Row assigned values. Where the Other Columns are Properly Grouped. Once I delete the Row Grid Different Row is Going to be Deleted because That row Delete Button has values before grouped. How to Solve this Problem.

[ivailoParticipant]

Hi Fiham,

Try to use code similar to this snippet about your buttons:

{
    text: 'Delete',
    sortable: false,
    columntype: 'button',
    cellsrenderer: function() {
        var buttons = $("#contenttablejqxgrid .jqx-button");
        for (i = 0; i < (buttons.length) + 1; i++) {
            $(buttons[i]).attr("class", "customId");
        }
    },
    buttonclick: function(row) {
    id = $("#jqxgrid").jqxGrid('getrowid', row);
    ...
    }
}

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts