Binding checkboxes in treeview with checkboxes that uses remote datasource

Question

Let me layout a situation here. I have a situation where I need to show several check boxes on a form that are hierarchical by nature in terms that some of them belong to one category and other belong to a second and so on. My first idea was to use KendoUI treeview with check boxes. I have several questions in relations to this:

1. obviously there will be a situation where on a form load some check boxes need to be checked because they are coming like that from data source. When I define new kendo.data.HierarchicalDataSource there is a property that lets me specify what property in the data source defines hierarchy, 'ParentID', and another that notifies if particular item has any children items 'hasChildren'. I cannot see if there is a property called 'checked' or something that would allow proper binding with the data source in the same fashion. Does one exist and how do I set that up?
2. Provided that the answer to the first question is NO, what I did so far is manually check individual check boxes in treeview's dataBound event like this:

    $(e.node).find(":checkbox[isselected='true']").prop("checked", true);

What this does is go through the check boxes in the node and checks if they have an attribute called 'isselected' (which I fill by using a check box template) and if that one is set to true then check that check box. This works as it should but the problem happens when I want to post the checked boxes back to the server. The check boxes selected through above code are not reflected in the treeview's datasource. Now I have to figure out on how to do that. I was wandering if there was a more elegant solution to this instead of the approach I am using: manually check the check boxes -> fire event on every check box to update its 'isselected' attribute or treeview datasource -> on posting values get all of the checked values.

Thanks for any help.

Answer 1

Hi by default the treeview uses a property called checked.

So in your viewmodel

public class MenuItemViewModel
{   
   public bool @checked { get; set; }
}

Then when you fill up your viewmodel from your database makes sure it returns the correct state.

If you dont like to add checked to your viewmodel

Then you can map it on the datasource

   dataSource: new kendo.data.HierarchicalDataSource({
          data: kendo.observableHierarchy([]),,
          schema: {
            model: {
              fields: {
                checked: {from: "WHATEVERYOUWANT", type: "boolean"}
              }
            }
          }
        }),
        dataTextField: "Name",
        checkboxes: true

C# viewmodel

  public class MenuItemViewModel
    {   
       public bool WHATEVERYOUWANT { get; set; }
    }

Answer 2

While waiting for somebody with a smart solution for this, let me add what I have found out in order to get this working so I could help people who bump up against the same problems.

Please look at the following KendoUI forum post and answer by Atanas from KendoUI team in which he explains how to get to the data source item and mark particular item in there with proper property. This was useful in order to manually update the data source after the user changes choices at particular check boxes.

Also take a look at the following KendoUI forum post for explanation on how to properly structure your check box template so it could properly POST back.

With these two tips I was able to get the IDs of checked check boxes POSTed back to the controller. The total JavaScript code on view side that does this is now around 80 lines of code including model definition. While this is not too much it is still way too much if there is a smarter way somebody can recommend.