URGENT : ViewModel not getting updated for grid column having template

7 posts, 0 answers
  1. Shiva
    Shiva avatar
    61 posts
    Member since:
    Oct 2010

    Posted 17 Apr 2012 Link to this post

    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




  2. Shiva
    Shiva avatar
    61 posts
    Member since:
    Oct 2010

    Posted 18 Apr 2012 Link to this post

    Any updates guys??
  3. Kendo UI is VS 2017 Ready
  4. Jerry T.
    Jerry T. avatar
    118 posts
    Member since:
    Jul 2012

    Posted 21 Jun 2012 Link to this post

    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?
  5. AkAlan
    AkAlan avatar
    121 posts
    Member since:
    Jun 2009

    Posted 23 Feb 2014 Link to this post

    I'm having the exact same issue. Have you found a solution? Seems like this shouldn't be that hard. 
  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 26 Feb 2014 Link to this post

    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:

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Artur
    Artur avatar
    11 posts
    Member since:
    Dec 2014

    Posted 19 Jul 2015 in reply to Alexander Valchev Link to this post

    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

     

  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 23 Jul 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready