CODEWITHSUNDEEP
javascriptc#jquerykendo-uikendo-treeview
GMB
GMB

Reputation: 337

How to check the checkbox in kendo treeview using the values passed from the controller?

The code below generates the nodes for kendo treeview from the controller

var datasource = new kendo.data.HierarchicalDataSource({
  transport: {
    read: function(options) {
      var id = options.data.ModuleId;
      $.ajax({
        url: '/MapModuleTask/LoadTreeView',
        dataType: "json",
        data: {
          id: id
        },
        success: function(result) {
          options.success(result);
        },
        error: function(result) {
          options.error(result);
        }
      });
    }
  },
  schema: {
    model: {
      id: "ModuleId",
      hasChildren: "hasChildren"
    }
  }
});

I want to populate/check these check boxes using the ID's I get from my controller

this is my controller action method

public int?[] LoadModulesByFranchisorId(string FranchisorId)
    {
        int?[] modules;
        var modulesList = (from a in db.MapModuleFranchisors where a.FranchsiorId == FranchisorId && a.ModuleFlag == 1 select a.ModuleId).AsEnumerable().ToArray();
        modules = modulesList;
        return modules;
    }

The Ids' I get from the action method above are Ids' of the check-box Thank you in advance... :)

Upvotes: 0

Views: 1052

Answers (1)

GMB
GMB

Reputation: 337

Controller Action method should be something like this(i.e returning a Json response).

 public JsonResult getModulesByFranchisorID(string FranchisorId)
    {
        var FranchisorModules = (from a in db.MapModuleFranchisors
                                 where a.FranchsiorId == FranchisorId && a.ModuleFlag == 1
                                 select new
                                 {
                                     a.ModuleId,
                                 }).AsEnumerable();
        return Json(FranchisorModules, JsonRequestBehavior.AllowGet);
    }

I called for the following method inside the ajax 'success' statement. This checked the check boxes from the values returned from the controller.

function checkNodes() {
  treeView = $("#treeview").data("kendoTreeView");
  var tpNodes = treeView.dataSource.view();
  var FranchisorId = '@Model.FranchisorId';

  $.ajax({
    type: "POST",
    url: "/MapModuleTask/getModulesByFranchisorID",
    data: {
      FranchisorId: FranchisorId
    },
    success: function(data) {
      var dataLength = data.length;
      console.log(dataLength);
      console.log(tpNodes);
      for (var i = 0; i < dataLength; i++) {

        for (j = 0; j < tpNodes.length; j++) {
          debugger;
          if (tpNodes[j].ModuleId == data[i].ModuleId) {
            debugger;
            var selectitem = treeView.findByUid(tpNodes[j].uid);
            selectitem.addClass('k-state-selected');
            treeView.select().find(".k-checkbox input").attr("checked", "true");

          }
        }
      }
    }
  });
}
There might be better or more efficient way, this was working for me. Feel free to correct me. Thank you.

Upvotes: 1

Related Questions