"Checked" rows vs. "Selected" rows

[Brian]

I have some experience with Kendo Grids, and I know that the standard implementation of the checkbox feature will select any row that is checked; however, my current project necessitates that there be a distinction between "Selected" rows and "Checked" rows.

I have a Splitter, with contents as follows:

    Top pane: contains a set of Kendo Controls (TextBoxes, DropDownLists, NumericTextBoxes, etc.)
    Bottom pane: contains a Kendo Grid
            GridSelectionMode = Single
            GridSelectionType = Row
            First column = checkboxes (excluding the "select all" checkbox)

Each row on the grid represents an order for a spare part. When a row is selected (not "checked" but simply "selected" by clicking on the row itself), the controls in the Top Pane have their values set according to the values of the columns in the selected row. Then, if the value of a control is changed by the user, the corresponding grid cell of the selected row is updated accordingly (the update occurs on the "onblur" event of the control). The user may go through multiple rows, one at a time, changing grid cell values as needed. Because of this behavior, GridSelectionMode must be set to "Single".

The final step is for the user to "submit" any orders that need to be submitted. At this point, the user will use the checkboxes in the first column to "check" all rows to be submitted (the user will almost always be submitting multiple rows, but rarely or never will the user be submitting all rows). Once all desired rows have been checked, the user will click a "Submit" button, which needs to get all "checked" rows, then send these to the server via an ajax call, at which point the database is updated. I can get all of this to work easily with a single "selected" row, but I really need to be able to submit multiple "checked" rows that are not also "selected".

Since GridSelectionMode must be "Single", the action of checking a checkbox cannot also cause the corresponding row to be "selected", which I know is the default behavior of the checkbox selection in the Grid control. Since the "select" behavior seems to be built into the k-checkbox class, my best idea at the moment is to use non-kendo checkboxes in the first column, which I have done; however, I haven't been able to figure out how to get all "checked" rows (which needs to happen on the "Submit" button's "click" event).

I can provide some sample code if needed, but I'm hoping the provided info will be enough to go on. I'm open to any creative ideas, but I'm hoping the solution will be more simple than I'm making it.

Any assistance would be greatly appreciated!

[Preslav]

Hi Brian,

You are correct, the desired functionality could not be achieved with the out of the box checkbox column. Generally speaking, this column is designed to work only for selection purposes. I believe that you are on the right track, using a column template with regular checkboxes.

To get the "checked" rows, use a jQuery selector. After that, for each checkbox, get the closest "tr" element, and use the dataItem method to get the relevant record. Push the data items in an array, and use this array as the project requires.

• https://api.jquery.com/find/
• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/dataitem
  

For example, check my testing Dojo:

• https://dojo.telerik.com/omIzaBOR

I hope this helps.


Regards,
Preslav
Progress Telerik

[Brian]

I figured it out.

Here's the checkbox column in the grid:

column.Bound(c => c.Checked).Width(40).Filterable(false)
    .ClientTemplate("<input id='GridCheckbox' type='checkbox' value='false' name='checkBox' onchange='Checkbox_Change(this)'/>");

And here's the JS function that handles the "onchange" event (triggered when the checkbox is clicked):

function Checkbox_Change(cb) {
console.log("checkbox_Change");
var cbValue = cb.checked;
cb.value = cbValue;
var thisRow = newSpareRequestsGrid.data("kendoGrid").dataItem(cb.closest("tr"));
thisRow.Checked = cbValue;
}

[Preslav]

Hi Brian,

I am glad to hear that the issue is now resolved.

Adding one more field to the records and using it for the checkbox column is another possible solution. Thank you for sharing it with the community.


Regards,
Preslav
Progress Telerik