0

I have used KoGrid in my web page and I had opted for multiple row selection. as a result of which a checkbox column as first has been added in my grid. but when I select the KoGrid by clicking on the row the check box is marked but when I clicked on the checkbox the row got selected but checkbox is empty.

My KoGrid configuration code is as follows:

gridOptions = {
            data: "Some Data",
            columnDefs: [
                { field: 'TransactionId', displayName: 'Transaction ID' },
                { field: 'InvoiceNumber', displayName: 'Invoice Number' },
                { field: 'ContactName', displayName: 'Contact Name' },
                { field: 'Carrier', displayName: 'Carrier' },
                { field: 'InvoiceDate', displayName: 'Invoice Date' },
                { field: 'Amount', displayName: 'Amount' },
                { field: 'PaymentStatus', displayName: 'Payment Status' },
                { field: 'IsPastDue', displayName: 'Is Past Due', cellTemplate: '<label class="gridCheckBox"><input type="checkbox" data-bind="checked: $data.getProperty($parent)"></label></div>' },
                { field: 'DaysPastDue', displayName: 'Days Past Due' }
            ]
        };

Not able to find what exactly is the problem.

Please help. Thanks

Animesh
  • 323
  • 3
  • 19

1 Answers1

1

Have to add

return true; 

from the method added in the event afterSelectionChange, if there is any event capture method added otherwise add the following in your grid configuration.

afterSelectionChange: function(){ return true; }

If we don’t add the above code the afterSelectionChange will return undefined which why the checkboxes remain un-checked even after the selection selection of row by checkbox click.

so my Final is look as follows:

gridOptions = {
        data: "Some Data",
        columnDefs: [
            { field: 'TransactionId', displayName: 'Transaction ID' },
            { field: 'InvoiceNumber', displayName: 'Invoice Number' },
            { field: 'ContactName', displayName: 'Contact Name' },
            { field: 'Carrier', displayName: 'Carrier' },
            { field: 'InvoiceDate', displayName: 'Invoice Date' },
            { field: 'Amount', displayName: 'Amount' },
            { field: 'PaymentStatus', displayName: 'Payment Status' },
            { field: 'IsPastDue', displayName: 'Is Past Due', cellTemplate: '<label class="gridCheckBox"><input type="checkbox" data-bind="checked: $data.getProperty($parent)"></label></div>' },
            { field: 'DaysPastDue', displayName: 'Days Past Due' }
        ],
       afterSelectionChange: function(){ return true; }
    };
Animesh
  • 323
  • 3
  • 19