Bind Select Column to Model Field

[Matt]

We're using the select column described here: https://demos.telerik.com/aspnet-mvc/grid/checkbox-selection 

Is there a way (preferably in the MVC Grid) to bind that column to a boolean field on the grid row model, so that when the box is checked the field is set to true and when unchecked set to false?

[Tsvetomir]

Hi Matt,

While binding the Select column to a field in the Model is possible, I am afraid that I do not have the big picture insight in order to fully understand the scenario you are willing to achieve. Have you considered implementing a new boolean column (bound to a field) and creating a ClientTemplate to show a checkbox? A plausible approach of how to achieve this has been demonstrated in the following article:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Templates/grid-with-checkbox-column

By default, the Select column is not bound to a field. However, it is possible to introduce a field in the model and update it manually:

1. In the DataBound event handler of the grid, access all data items of the grid which has the field set to true. Based on the uid of the data item, target the row which corresponds to that uid and select it via the select() method.

2. In the change event of the checkbox, access the data item and update the data source manually. 

A possible approach has been demonstrated in the article below:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Selection/grid-selection-to-model-field

If this is not the scenario you are aiming for, elaborate in further details on the current and expected behavior. Moreover, let me know in case you need additional assistance with implementing any of the approaches above. 


Kind regards,
Tsvetomir
Progress Telerik

[Matt]

Hey Tsvetomir, 

We've written code in the past that, as you mentioned, creates a checkbox client template for each row and in the column header and then added a javascript function for handling the select all option. 

In our scenario, each of our data items has something like an IsActive boolean field. We'd like users to be able to toggle this field per row or for all rows with a checkbox. we were hoping that there would be something like the following, mainly for convenience.

Html.Kendo().Grid(ModelFields).Columns(column => {column.Select(model => model.IsActive)})  

The big thing we were wanting to avoid was having to write code for each grid that did this outside the actual grid column definition, and if possible have intellisense validate the field selection (we use razor grid definitions).

 

[Tsvetomir]

Hi Matt,

Initially, the Select column is not bound to any model field. It also cannot be bound to a field using the conventional approach, as you have suggested. However, there is a way to simulate the binding. An example of how to achieve this:

1. Subscribe to the DataBound event of the grid:

.Events(ev=>ev.DataBound("onDataBound"))

2. On initial load, select all rows which have the specified field set to true. Attach the "change" event to all of the checkboxes and execute upon in the state, update the model:

function onDataBound(e){
    var grid = $("#grid").getKendoGrid();

    var dataOnCurrentPage = grid.dataSource.view();
    dataOnCurrentPage.forEach(function (model) {
        if (model.Discontinued == true) {
            var uid = model.uid;
            var row = $("#grid tbody tr[data-uid=" + uid + "]")
            grid.select(row)
        }
    });

    $("input.k-checkbox").on("change", function (e) {
        var dt = grid.dataItem(this.closest("tr"));

        if (dt.Discontinued != this.checked) {
            dt.set("Discontinued", this.checked);
            dt.dirty = true;
        }

        grid.dataSource.sync();
    });
}

More descriptive information can be found in my previous response. Let me know if you encounter any issues.


Best regards,
Tsvetomir
Progress Telerik