2014-05-19 58 views
1

我在使我的kendo TreeView正确绑定到HierarchicalDataSource时遇到了一些麻烦。目前,我的页面被设置在用户能够做出几个选择的位置,然后单击一个按钮来根据它们的选择来绑定TreeView。将Kendo Treeview绑定到分层数据源(远程数据)

按钮单击处理程序是这样的:

$("#btnAdd").click(function() { 
     var treeData = new kendo.data.HierarchicalDataSource({ 
      transport: { 
       read: { 
        url: "/myURL/", 
        data: { "id": JSON.stringify(multiselect.value()) }, //this is the value from the first selection. 
        datatype: "jsonp", 
        type: "POST" 
       } 
      }, 
      schema: { 
       model: { 
        id: "HBClassID", 
        children: { 
         schema: { 
          data: "ActiveStudents", 
          model: { 
           id: "ComboID" 
          } 
         } 
        } 
       } 
      } 
     }); 

     $("#tvAjaxClass").kendoTreeView({ 
      dataSource: treeData, 
      dataTextField: ["HBFullName", "Student.StudentFullName"], 
      checkboxes: { 
       template: "<input type='checkbox' name='StudentClassID' value='#= item.id #' />", 
       checkChildren: true 
      } 
     }); 
    }); 

Ajax调用返回的数据,看起来像这样:

  [{ 
       "HBClassID": 23400, "HBClassDesc": "Johnson Tutoring Group", "CourseNumber": "", "Section": "", "Period": "", "HBFullName": "Johnson Tutoring Group", 
       "ActiveStudents": 
        [ 
         { "HBClassID": 23400, "StudentID": 21890, "Student": { "UserId": 21890, "UserName": "DFaast", "UserFirstName": "Doyle", "UserLastName": "Faast", "StudentFullName": "Doyle Faast" }, "ComboID": "23400:21890" } 
        ] 
      }] 

当我打这个功能,AJAX调用时,该数据是返回,顶级绑定罚款。一切似乎都起作用,除非我展开父节点时从不会有任何子节点。怪异的一部分对我来说,如果我删除HierarchicalDataSource运输部与此类似本地数据替换:

$("#btnAdd").click(function() { 
     var treeData = new kendo.data.HierarchicalDataSource({ 
      data: [{ 
       "HBClassID": 23400, "HBClassDesc": "Johnson Tutoring Group", "CourseNumber": "", "Section": "", "Period": "", "HBFullName": "Johnson Tutoring Group", 
       "ActiveStudents": 
        [ 
     { "HBClassID": 23400, "StudentID": 21890, "Student": { "UserId": 21890, "UserName": "DFaast", "UserFirstName": "Doyle", "UserLastName": "Faast", "StudentFullName": "Doyle Faast" }, "ComboID": "23400:21890" } 
        ] 
      }], 
      schema: { 
       model: { 
        id: "HBClassID", 
        children: { 
         schema: { 
          data: "ActiveStudents", 
          model: { 
           id: "ComboID" 
          } 
         } 
        } 
       } 
      } 
     }); 

     $("#tvAjaxClass").kendoTreeView({ 
      dataSource: treeData, 
      dataTextField: ["HBFullName", "Student.StudentFullName"], 
      checkboxes: { 
       template: "<input type='checkbox' name='StudentClassID' value='#= item.id #' />", 
       checkChildren: true 
      } 
     }); 
    }); 

然后TreeView的结合正是我想要的方式。我能够扩展HBClass并查看其中的所有ActiveStudents。

对绑定到远程数据和本地数据有什么不同吗?

回答

1

我更新了我的点击事件,看起来像这样,它适用于我的情况,但我不知道这是否是正确的方式来做到这一点。

$("#btnAdd").click(function() { 
     var treeData = new kendo.data.HierarchicalDataSource({ 
      transport: { 
       read: { 
        url: "/RightPath/Assignment/BindTreeView/", 
        data: { "id": JSON.stringify(multiselect.value()) }, 
        datatype: "json", 
        type: "POST" 
       } 
      }, 
      schema: { 
       model: { 
        id: "ComboID", 
        children: "ActiveStudents" 
       } 
      } 
     }); 

     $("#tvAjaxClass").kendoTreeView({ 
      dataSource: treeData, 
      dataTextField: ["HBFullName", "Student.StudentFullName"], 
      dataValueField: ["HBClassID", "ComboID"], 
      checkboxes: { 
       template: "<input type='checkbox' name='StudentClassID' value='#= item.id #' />", 
       checkChildren: true 
      } 
     }); 
    });