URGENT : ViewModel not getting updated for grid column having template

[Shiva]

Dear Community,

Below are the details of items I have on my page:

I have a DIV on my page:

<div id="grid" />

My code

var viewModel = kendo.observable({

            gridSource: [

                            { FirstName: "Shiva", LastName: "Wahi", City: "Delhi", Title: "Module Lead", BirthDate: "10/29/1984", Age: 27, IsMarried: "N", IsActive: true },

                            { FirstName: "Priya", LastName: "Srivastava", City: "Noida", Title: "Tech Lead", BirthDate: "08/19/1982", Age: 30, IsMarried: "Y", IsActive: false }

                        ]

        });

 

        function IsMarriedConverter(status) {

            if (status == "Y")

                return "Married";

            else

                return "Un-Married";

        }

 

        $(document).ready(function () {

            $("#grid").kendoGrid({

                dataSource: {

                    data: viewModel.gridSource,

                    schema: {

                        model: {

                            fields: {

                                FirstName: { type: "string" },

                                LastName: { type: "string" },

                                City: { type: "string" },

                                Title: { type: "string" },

                                BirthDate: { type: "date" },

                                Age: { type: "number" },

                                IsMarried: { type: "string", editable: false },

                                IsActive: { type: "boolean" }

                            }

                        }

                    },

                    pageSize: 10

                },

                width: 500,

                height: 250,

                editable: true,

                groupable: true,

                scrollable: true,

                sortable: true,

                filterable: true,

                pageable: true,

                toolbar: ["create", "save", "cancel"],

                columns: [

                                    {

                                        field: "FirstName",

                                        title: "First Name",

                                        width: 75

                                    },

                                    {

                                        field: "LastName",

                                        title: "Last Name",

                                        width: 75

                                    },

                                    {

                                        field: "City",

                                        width: 75

                                    },

                                    {

                                        field: "Title",

                                        width: 75

                                    },

                                    {

                                        field: "BirthDate",

                                        title: "Birth Date",

                                        width: 75,

                                        template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'

                                    },

                                    {

                                        field: "Age",

                                        width: 50

                                    },

                                    {

                                        field: "IsMarried",

                                        width: 50,

                                        template: '#= IsMarriedConverter(IsMarried) #' // Value converter

                                    },

                                    {

                                        field: "IsActive",

                                        width: 50,

                                        template: '<input type="checkbox" #= IsActive ? checked="checked" : "" # />' // Creating checkbox column

                                    }

                                ]

            });

             

        });

The Problem

The challenge we are facing is in IsActive column. As you can see that I'm using a template for this column to show check-box in UI instead of regular column. Whenever, I change the selection of my check-box, it just gets reflected on UI but doesn't update the viewmodel (it should have as it is an observable data source).

If I remove the template from this column then change in checkbox changes the viewmodel. I want my viewmodel to update as per changes made in UI in my scenario.

Please share your comments.

Best Regards,
Shiva

[Shiva]

Any updates guys??

[Jerry T.]

I know it's been a while on this thread but did you try adding the "id" property on your model in the schema to match the key column in your data?

[AkAlan]

I'm having the exact same issue. Have you found a solution? Seems like this shouldn't be that hard. 

[Alexander Valchev]

Hello,

The problem appears because column template provides a one way binding - e.g. the checkbox is updated according to the data in the DataSource, but the data will not change when checkbox does. The solution is to define a change event that intercepts clicks on the checkboxes and changes the underlying model.

For example:

$("#grid .k-grid-content").on("change", "input.chkbx", function(e) {
    var grid = $("#grid").data("kendoGrid"),
        dataItem = grid.dataItem($(e.target).closest("tr"));

    dataItem.set("Discontinued", this.checked);
});

Here is a working example which demonstrates the approach in action:

• http://jsbin.com/ixodeh/2/edit

Regards,
Alexander Valchev
Telerik

[Artur]

Alex,

Of all ramblings and answers that I managed to find when searching for a solutioni to this typical problem, your answer is the most to-the-merit. Thanks for that.

Still, I think this deserves some kind of configuration setting to make a checkbox column (a very common UI scenario to handle) bind both ways and change the underlying model. No problem with the above solution when there's only one grid to handle in the application, but you would not like to repeat this code all over and over again for every grid.

Would you care to suggest (perhaps in the Grid's examples section) the best practice to "subclass" this type of checkbox handling and make it generic to multiple grid instances? I think it'd save people quite some time googling around. 

Thanks,

Artur

 

[Alexander Valchev]

Hi Arthur,

To adjust the solution for multiple Grid instances you may use the following approach:

$(".k-grid .k-grid-content").on("change", "input.chkbx", function(e) {
    var grid = $(e.target).closest(".k-grid").data("kendoGrid"),
        dataItem = grid.dataItem($(e.target).closest("tr"));

    dataItem.set("Discontinued", this.checked);
});

I hope this information will help.

Regards,
Alexander Valchev
Telerik