Grid CheckBox Selection (Select All)

[stevenmahonyParticipant]

Hi,

Is there an event fired when you select the Checkbox in the column header?

<script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var url = "../sampledata/orders.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:OrderID',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // create jqxgrid.
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                height: 450,
                source: dataAdapter,
                theme: theme,
                sortable: true,
                filterable: true,
                ready: function()
                {
                    // called when the Grid is loaded. Call methods or set properties here.         
                },
                selectionmode: 'checkbox',
                altrows: true,
                columns: [
                  { text: 'Ship Name', datafield: 'ShipName', width: 250 },
                  { text: 'Shipped Date', datafield: 'ShippedDate', width: 100, cellsformat: 'yyyy-MM-dd' },
                  { text: 'Freight', datafield: 'Freight', width: 80, cellsformat: 'F2', cellsalign: 'right' },
                  { text: 'Ship City', datafield: 'ShipCity', width: 100 },
                  { text: 'Ship Country', datafield: 'ShipCountry' },
                  { text: 'Ship Address', datafield: 'ShipAddress', width: 350 }
               ]
            });
        });
    </script>

Thanks Steven

[Peter StoevKeymaster]

Hi Steven,

There’s currently no such event. However, you can do the following as a workaround:

// create jqxgrid.
$("#jqxgrid").jqxGrid(
{
    width: 670,
    height: 450,
    source: dataAdapter,
    sortable: true,
    filterable: true,
    ready: function()
    {
        // called when the Grid is loaded. Call methods or set properties here.      
        $("#jqxgrid").find('.jqx-grid-column-header .jqx-checkbox-default').parent().on('change', function (event) {
            var state = event.args.checked;
        });
    },
    selectionmode: 'checkbox',
    altrows: true,
    columns: [
        { text: 'Ship Name', datafield: 'ShipName', width: 250 },
        { text: 'Shipped Date', datafield: 'ShippedDate', width: 100, cellsformat: 'yyyy-MM-dd' },
        { text: 'Freight', datafield: 'Freight', width: 80, cellsformat: 'F2', cellsalign: 'right' },
        { text: 'Ship City', datafield: 'ShipCity', width: 100 },
        { text: 'Ship Country', datafield: 'ShipCountry' },
        { text: 'Ship Address', datafield: 'ShipAddress', width: 350 }
    ]
});

Best Regards,
Peter Stoev

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

[stevenmahonyParticipant]

Thanks for the suggestion. I have put something similar in place and it works fine but I have chnaged how i render the grid and I keep losing the on change event of the check-box (See code below)

I init the grid on page load (with no data)

$("#jqxgrid").jqxGrid(
                   {
                        width: '100%',                        
                        theme: 'fresh',
                        height: 600,                        
                        altrows: true,
                        enablehover: true,
                        localization: getLocalization(),
                        selectionmode: 'checkbox',
                        sortable: true,
                        filterable: true,
                        showfilterrow: true,
                        ready: function()
                            {   
                                $('#jqxgrid').jqxGrid('hidecolumn', 'TransId');  
                                $("#jqxgrid").find('.jqx-grid-column-header .jqx-checkbox-default').parent().on('change', function (event) {                                                                                                                                                             
                                    if (state === true) {                                                                        
                                        $('#totalSelectedAmount span').html('Total Amount Selected : ' + aggregates.sum);
                                        var selectedRows = $("#jqxgrid").jqxGrid('getselectedrowindexes'); 
                                        for (var rowid in selectedRows) {
                                            transIds.push($("#jqxgrid").jqxGrid('getrowdata', selectedRows[rowid]).TransId);                            
                                        }                                
                                    } else {                                    
                                        $('#totalSelectedAmount span').html('');
                                        transIds = [];
                                    }
                                    console.log(transIds);
                                });                                                                                                                                          
                            },                    
                        columns: [
                          { text: '', datafield: 'TransId'},
                          { text: 'Origin', datafield: 'DistributorName', width: '15%', align: 'left', cellsalign: 'left' },
                          { text: 'Booking Reference', datafield: 'BookingRef', width: '10%', align: 'center', cellsalign: 'center' },
                          { text: 'Tour Date', datafield: 'TourDate', width: '10%', align: 'center', cellsalign: 'center',filtertype: 'date',columntype: 'datetimeinput',cellsformat: 'd'},
                          { text: 'Product Title', datafield: 'ProductTitle', width: '35%' },
                          { text: 'Client Name', datafield: 'ClientName', width: '15%' },
                          //{ text: 'Pax', datafield: 'Pax', width: 60, align: 'center', cellsalign: 'center' },
                          { text: 'Amount', datafield: 'Amount', width: '10%' , cellsformat: 'c2', align: 'right', cellsalign: 'right'}
                        ],
                    });

At this point the grid is empty and the user must select some search criteria. The user then clicks the Search button and this even gets fired.

$('#jqxSearch').click(function () {
                    $('#jqxgrid').jqxGrid('clear');
                    var Source =
	                {
	                    datatype: "json",
	                    datafields: [
                              { name: 'TransId', type: 'int' }
                            , { name: 'DistributorName', type: 'string' }
                            , { name: 'BookingRef', type: 'string' }
                            , { name: 'TourDate', type: 'date' }
                            , { name: 'ProductTitle', type: 'string' }
                            , { name: 'ClientName', type: 'string' }
                            //, { name: 'Pax', type: 'int' }
                            , { name: 'Amount', type: 'decimal' }
		                ],
	                    url: "generate_invoices.aspx/GetInvoiceTransactions"	                    
	                };
	                var dataAdapter = new $.jqx.dataAdapter(Source, {
                         contentType: 'application/json; charset=utf-8'
                    });
                    
                    $("#jqxgrid").jqxGrid({source: dataAdapter });
                                               
                });

Once the grid is populated I lose the on change event of the checkbox. Any suggestions, I tried putting the on change event in the grid binding complete and while the event was recognized I have a getselectedrowindexes call in the event but the rows are not selected before the on change event is fired.

Regards
Steven

[Peter StoevKeymaster]

Hi Steven,

Instead of using the “ready” callback function, you may use the “bindingcomplete” event if you perform data changes on the same Grid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[stevenmahonyParticipant]

Hi, I have updated my code with this but the event no longer fires

$('#jqxgrid').on('bindingcomplete', function (event) {
                    $("#jqxgrid").find('.jqx-grid-column-header .jqx-checkbox-default').parent().on('change', function (event) {                                                                                                                                                                                     
                        if (state === true) {                                                                        
                            $('#totalSelectedAmount span').html('Total Amount Selected : ' + aggregates.sum);
                            var selectedRows = $("#jqxgrid").jqxGrid('getselectedrowindexes'); 
                            for (var rowid in selectedRows) {
                                transIds.push($("#jqxgrid").jqxGrid('getrowdata', selectedRows[rowid]).TransId);                            
                            }                                
                        } else {                                    
                            $('#totalSelectedAmount span').html('');
                            transIds = [];
                        }
                        console.log(transIds);
                    });
                });

Thanks.

[Peter StoevKeymaster]

Hi Steven,

Did you bind prior the Grid’s initialization ? Otherwise, the event is possible to have been already raised before you actually bind to it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[stevenmahonyParticipant]

Hi,

The grid is initialized when the page is loaded. When the user selects the Search button I clear the grid, post a jquery ajax requestusing the source setting and sets the grid source to the dataAdepter (see below). So the grid is not initialise again, just the data refreshed. Is this the right process? Should I be detroying the grid and re-initializing it?

$('#jqxgrid').jqxGrid('clear');
                    var Source =
	                {
	                    datatype: "json",
	                    datafields: [
                              { name: 'TransId', type: 'int' }
                            , { name: 'DistributorName', type: 'string' }
                            , { name: 'BookingRef', type: 'string' }
                            , { name: 'TourDate', type: 'date' }
                            , { name: 'ProductTitle', type: 'string' }
                            , { name: 'ClientName', type: 'string' }
                            //, { name: 'Pax', type: 'int' }
                            , { name: 'Amount', type: 'decimal' }
		                ],
	                    url: "generate_invoices.aspx/GetInvoiceTransactions"	                    
	                };
	                var dataAdapter = new $.jqx.dataAdapter(Source, {
                         contentType: 'application/json; charset=utf-8'
                    });
                    
                    $("#jqxgrid").jqxGrid({source: dataAdapter });

[Peter StoevKeymaster]

Hi Steven,

I have actually asked where you bind to the “bindingcomplete” event – before or after the Grid’s initialization.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[stevenmahonyParticipant]

Sorry, read your question again. When the grid i initialised for the first time I do not bind it. I just create an empty grid with columns.

Steven

[stevenmahonyParticipant]

Here is the complete javascript

        var page = (function ($) {
            var addEventListeners = function () {
                               
                $('#jqxgrid').on('rowselect', function (event) 
                {
                    var args = event.args; 
                    var row = args.rowindex;
                    var data = $('#jqxgrid').jqxGrid('getrowdata', row);
                    
                    totalAmountSelected = totalAmountSelected + data.Amount;
                    $('#totalSelectedAmount span').html('Total Amount Selected : ' + totalAmountSelected);
                    transIds.push(data.TransId);
                    console.log(transIds);
                });
                $('#jqxgrid').on('rowunselect', function (event) 
                {
                    var args = event.args;
                    var row = args.rowindex;
                    var data = $('#jqxgrid').jqxGrid('getrowdata', row);
                    
                    totalAmountSelected = totalAmountSelected - data.Amount;
                    $('#totalSelectedAmount span').html('Total Amount Selected : ' + totalAmountSelected);                    
                    transIds.splice(transIds.indexOf(data.TransId),1);
                    console.log(transIds);
                });
                
                $('#jqxgrid').on('bindingcomplete', function (event) {
                    $("#jqxgrid").find('.jqx-grid-column-header .jqx-checkbox-default').parent().on('change', function (event) {                                                                                                                                                                                     
                        if (state === true) {                                                                        
                            $('#totalSelectedAmount span').html('Total Amount Selected : ' + aggregates.sum);
                            var selectedRows = $("#jqxgrid").jqxGrid('getselectedrowindexes'); 
                            for (var rowid in selectedRows) {
                                transIds.push($("#jqxgrid").jqxGrid('getrowdata', selectedRows[rowid]).TransId);                            
                            }                                
                        } else {                                    
                            $('#totalSelectedAmount span').html('');
                            transIds = [];
                        }
                        console.log(transIds);
                    });
                });
               
                $('#jqxSearch').click(function () {
                    $('#jqxgrid').jqxGrid('clear');
                    var Source =
	                {
	                    datatype: "json",
	                    datafields: [
                              { name: 'TransId', type: 'int' }
                            , { name: 'DistributorName', type: 'string' }
                            , { name: 'BookingRef', type: 'string' }
                            , { name: 'TourDate', type: 'date' }
                            , { name: 'ProductTitle', type: 'string' }
                            , { name: 'ClientName', type: 'string' }
                            //, { name: 'Pax', type: 'int' }
                            , { name: 'Amount', type: 'decimal' }
		                ],
	                    url: "generate_invoices.aspx/GetInvoiceTransactions"	                    
	                };
	                var dataAdapter = new $.jqx.dataAdapter(Source, {
                         contentType: 'application/json; charset=utf-8'
                    });
                    
                    $("#jqxgrid").jqxGrid({source: dataAdapter });
                                               
                });
            };
            return {
                init: function () {
                    addEventListeners();
                    $("#jqxSelectSalesMonth").jqxDropDownList({
                        displayMember: "SalesMonthStr",
                        valueMember: "SalesMonth",
                        selectedIndex: -1,
                        width: '100%',
                        height: '35',
                        theme: theme,
                        placeHolder: '-- Select a Sales Month --'
                    });
                    $("#jqxDistributors").jqxDropDownList({
                        displayMember: "DistributorName",
                        valueMember: "DistributorId",
                        selectedIndex: -1,
                        width: '100%',
                        height: '35',
                        theme: theme,
                        placeHolder: '-- Select a Distributor --'
                    });
                    $("#jqxCheckBox").jqxCheckBox({ width: 200, height: 25, theme: theme, disabled: false });
                    $("#jqxSearch").jqxButton({ theme: theme });
                    $("#infoCreditNotes").jqxTooltip({
                        content: '<span style="float:left;"><b>Credit Notes</b></span> <br><ol id="myList">'
                                    + '     <li>Can be used on its own to return all unprocessed Credit Notes in the system.</li>'
                                    + '     <li>Can be used with Sales Month and Distributor filters to filter Credit Notes.</li>'
                                    + '</ol>',
                        position: 'mouse',
                        name: 'infoCreditNotesTooltip',
                        theme: 'metrodark',
                        autoHideDelay: 10000
                    });
                    var getLocalization = function () {
                        var localizationobj = {};
                        localizationobj.currencysymbol = "€";
                        localizationobj.currencysymbolposition = "before";
                        localizationobj.decimalseparator = ".";
                        localizationobj.thousandsseparator = ",";
                        var patterns = {
                            d: "dd/MM/yyyy",
                            D: "dddd, d. MMMM yyyy",
                            t: "HH:mm",
                            T: "HH:mm:ss",
                            f: "dddd, d. MMMM yyyy HH:mm",
                            F: "dddd, d. MMMM yyyy HH:mm:ss",
                            M: "dd MMMM",
                            Y: "MMMM yyyy"
                        }
                        localizationobj.patterns = patterns;
                        return localizationobj;
                    }
                    $("#jqxgrid").jqxGrid(
                    {
                        width: '100%',                        
                        theme: 'fresh',
                        height: 600,                        
                        altrows: true,
                        enablehover: true,
                        localization: getLocalization(),
                        selectionmode: 'checkbox',
                        sortable: true,
                        filterable: true,
                        showfilterrow: true,
                        ready: function()
                            {   
                                $('#jqxgrid').jqxGrid('hidecolumn', 'TransId');                                                                                                                                                                            
                            },                    
                        columns: [
                          { text: '', datafield: 'TransId'},
                          { text: 'Origin', datafield: 'DistributorName', width: '15%', align: 'left', cellsalign: 'left' },
                          { text: 'Booking Reference', datafield: 'BookingRef', width: '10%', align: 'center', cellsalign: 'center' },
                          { text: 'Tour Date', datafield: 'TourDate', width: '10%', align: 'center', cellsalign: 'center',filtertype: 'date',columntype: 'datetimeinput',cellsformat: 'd'},
                          { text: 'Product Title', datafield: 'ProductTitle', width: '35%' },
                          { text: 'Client Name', datafield: 'ClientName', width: '15%' },
                          //{ text: 'Pax', datafield: 'Pax', width: 60, align: 'center', cellsalign: 'center' },
                          { text: 'Amount', datafield: 'Amount', width: '10%' , cellsformat: 'c2', align: 'right', cellsalign: 'right'}
                        ],
                    });
                    
                }
            }
        } ($));
        $(document).ready(function () {
            page.init();
            GetSalesMonthList();
            GetDistributorList();
        });

[Peter StoevKeymaster]

Hi Steven,

I am afraid that the workaround that I suggested will not work for dynamic grid refreshes like in your scenario. The workaround will work only after the Grid is rendered because it takes into account that the Header Checkbox is added and rendered, but in the provided code you perform multiple dynamic re-renders and it is not clear exactly when the header checkbox will be rendered.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[stevenmahonyParticipant]

Thanks Peter,

Could you suggest another workaround as I would like to keep the grid (not destroy it) or is the only way to get this functioning to destroy the grid and re-create.

Thanks for your help.

Steveb

[Author]

Posts