grid observable help required please

[Gregor]

I have a kendo treeview and a kendo grid on a page working nicely - when I click on a row in the grid i can drag the row over to the treeview and drop it and this works great.

I want to be able to click on a treeview node and show the products for the selected category within the grid, need some advice.

I have a kendo grid marked as follows:-

viewModel = kendo.observable({ gridSource: productdata });

script>

                var viewModel = null;

                $(document).ready(function() {
                   var treeview;

                    $("#vertical").kendoSplitter({
                        orientation: "vertical",
                        panes: [
                            { collapsible: true, size: "50%" },
                            { collapsible: true, size: "50%" }
                        ]
                    });

                    $("#horizontal").kendoSplitter({
                        panes: [
                            { collapsible: true, size: "35%" },
                            { collapsible: true, size: "65%" }
                        ]
                    });

                    treeview = $("#treeview").kendoTreeView({
                        template: kendo.template($("#treeview-template").html()),
                        dragAndDrop: false,
                        dataSource: [@(Html.Raw(Model.Json))],
                        select: onSelect
                    }).data("kendoTreeView");
                   
                    var productdata = @(Html.Raw(Model.JsonProducts));
                   
                   viewModel = kendo.observable({
                        gridSource: productdata
                   });
                  
                   
                     $("#grid").kendoGrid({
                        dataSource: {
                            data: viewModel.gridSource,
                            pageSize: 10
                        },
                        autoBind:true,
                        selectable: "multiple, row",
                        groupable: false,
                        scrollable: true,
                        sortable: true,
                        pageable: false,
                        drop: droptargetOnDrop,
                        columns: [
                            {
                                field: "id",
                                width: 50,
                                title: "Id"
                            },
                            {
                                field: "categoryid",
                                width: 250,
                                title: "Category Id"
                            }, {
                                field: "productname",
                                width: 250,
                                title: "Product Name"
                            }
                        ]
                    });

                    $("#grid").kendoDraggable({
                        filter: "tr",
                        hint: function() {
                            var g = $("#grid").data("kendoGrid");
                            return g.select().clone();
                        }
                    });

                    $("#treeview").kendoDropTarget({
                        dragAndDrop: true,
                        drop: droptargetOnDrop
                    });
                });

                    function onSelect(e) {
                        var url = "/home/UpdateListingByCategory";
                        var selectedCatId = $(e.node.children[0]).find("input").val();

                        $.ajax({
                            type: "POST",
                            url: url,
                            data: { categoryId: selectedCatId },
                            success: function(data) {
                                viewModel.gridSource = JSON.parse(data);
                                alert(viewModel.gridSource);
                            },
                            error: function() {
                                alert("error");
                            }
                        });
                    }
                   
                    function droptargetOnDrop(e) {
                    var ss = e.srcElement.parentElement.children[1];
                    var url = "/home/update";

                    var list = new Array();

                    for (var i=0; i < e.draggable.hint.length; i++) {
                        var id = e.draggable.hint[i].firstChild.innerHTML;
                        list.push(id);  
                    }

                    $.ajax({
                        type: "POST",
                        url: url,
                        data: { categoryId: $(ss).val(), productIds: list.join() },
                        success: function(data) {
                            viewModel.gridSource = JSON.parse(data);
                        },
                        error: function() {
                            alert("error");
                        }
                    });
                       
                    kendo.bind($("#grid"), viewModel);
                }
            </script>

 

 

 

 

[Danny]

I might be late on this, but I was able to complete the part your missing, and need the part you've completed. So thanks!

Here's how I did it.

//Declare id to pass to grid
var itemKey = "@(new Guid())";

//On select set itemKey and tell grid to read datasource
function onSelect(e) {
    itemKey = $("#treeview").data("kendoTreeView").dataItem($(e.node)).ItemKey;
    $("#Grid").data("kendoGrid").dataSource.read();
}

//Similar but by declaring dataSource
$("#Grid").kendoGrid({
  dataSource: {
      type: "jsonp",
      serverPaging: true,
      serverSorting: true,
      pageSize: 100,
      transport: { read: function(options) {
          //Set the Url
          var gridUrl = "<URL to Grids subitems>" + itemKey;
          $.ajax( {
              url: gridUrl,
              data: options.data,
              success: function(result) {
                  options.success(result);
                  // Add a callback
                  // GridLoaded(); //w00t
              }
          });
      }},
      schema: {
          total: "TotalCount",
          data: "SubItemList"
      }},
  pageable: true,
  scrollable: false,
  sortable:
      {
          mode: "single",
          allowUnsort: false
      },
  selectable: "row",
  columns:
      [
          { field: "Name", title: "Name" },
          { field: "Bar", title: "Bar" },
          { field: "Foo", title: "Foo" }
          { field: "Yung", title: "Yung", sortable: false }
      ]
});