[Solved] Populating Treeview through Ajax

[AMS]

Hi
I am trying to populate the treeview by making an Ajax call. I am getting the following hierarchy in the following manner:

Course 1
Course 2
Course 3
Course 4

1. the question is how can i attach my result (in JSON) to populate the treeview?
2. After clicking on each course i also want to populate the course details (like subject1, subject 2....) "on demand". How should i do it?

Thanks in advance.

<script type="text/javascript">
        function onLoad(e) {
            var item = $('.t-item:first', $(e.target));
            var treeview = e.data;

            /*-------Ajax call---------*/

            $.ajax({
                url: '/Resource/GetJSONCourses',
                contentType: 'application/json; charset=utf-8',
                type: 'GET',
                dataType: 'json',
                error: function(xhr, status) {
                    debugger;
                    alert(status);
                },
                data: {
                    q: 'TEST-Subject'
                },
                success: function(result) {
                    debugger;
                    treeview.dataBind(item, result);
                    //I AM CURRENTLY STUCK HERE
                }
            });

            /*-------Ajax call---------*/
         }
    </script>

    <p>
     <% Html.Telerik().TreeView()
              .Name("StdTree")
            .ClientEvents(events => events
                        .OnLoad("onLoad")
                )
              .Render();
            %>
    </p>

<!-- CONTROLLER CODE -->

  public ActionResult GetJSONCourses()
        {
            var Courses = from c in courses
                           select c;


            return JsonResult(Courses);
        }
        public ActionResult GetJSONCourseDetails(string courseID)
        {
            var subjects = from c in subjects
                          where c.CourseID = courseID
                          select c;


            return JsonResult(subjects);
        }

[Ilias]

Hello Abbid ,

You must bind the root node (courses here) from server side using BindTo method for now. See treeview loadondemand  example. Then you can bind the childs (subject) using your code.

Point to remember, your json object must have the "Text", "Value" and "LoadOnDemand" specified. Currently there is no support of custom object which do not have above properties. You can use TreeViewItemModel object of telerik assembly. It has the necessary supported properties.

We are developing the client binding option which will be available with our next release.

Best wishes,
Ilias Hossain
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[AMS]

Thanks Mr. Ilyas, but in case of "LoadOnDemand" example,

1. how we can get some other values? e.g. in case of using TreeViewItemModel, we can only get its Text and Value, however what should i do in case i need to send the selected value of a drop down list in addition to the Value property??? Please elaborate
2. And if i use the client side events with load on demand (in order to get values from the drop down list), is there any method or property available to give us the "selectedItem" and its value on client side?

Here is the sample code in this case

 function onSelect(e) {
            //debugger;
           
//i am using the following variations in order to get the object
            var tv = $("#StdTree").data("tTreeView");
            var itemVal = tv.getItemText();
            var itm = $(tv.element);
            var txt = e.item.textContent;   //this will return the Text only, not value

            treeArg = e;

            $.post('/Resource/GetJSONTree2', { SubjectID: $("#Subject").val(), SelectedStdID: e.item.value }, function(data) {
    onPass(data, status);
});
}
function onPass(data, status)
{

    var locTreeArg = treeArg;
    
    var treeview = $("#StdTree").data("tTreeView");
    //var item = $("li:first", treeview.element)[0];
    var item = $(" Reading", treeview.element);   //if i use this to find the item, it will give an error on treeview.expand(item) method.
    
    
    treeview.dataBind(item, data);
    treeview.expand(item)
                
    
}
// Design Code

 <% Html.Telerik().TreeView()
              .Name("StdTree")
              .BindTo((IEnumerable<GetStandardBySubjectResult>)ViewData["SelectedSTDs"], (item, GetStandardBySubjectResult) =>
              {
                  item.Text = GetStandardBySubjectResult.Standard_Description;
                  item.Value = GetStandardBySubjectResult.Standard_ID.Value.ToString();
                  item.LoadOnDemand = GetStandardBySubjectResult.ChildernCount > 0;
                  item.ImageUrl = GetStandardBySubjectResult.ChildernCount > 0 ? "~/Content/Images/index.png" : "~/Content/Images/note.png";
                  //item.Parent = GetStandardBySubjectResult.SubjectID.Value.ToString();

              })
              .ClientEvents(events => events
                        .OnSelect("onSelect")
                )
           /*   .DataBinding(dataBinding =>
                  {
                      dataBinding.Ajax().Enabled(true)
                      .Select("StandardResources", "Resource", new {dfg=jq })
                    
                     
                  })*/
              .Render(); 
Regards

[Ilias]

Hi Abbid ,

1. Currently, We do not have support to add extra param other than text and value of a TreeViewItemModel class. However, you will able to pass extra param like dropdown selected value using client side onDataBinding events from our next official release.

2. treevie.Expand(item) will be available on our next release. We do not serialize items. So you will not able to use item.Value or item.Text. You can achive this by using treeview.getItemText(item) and treeview.getItemValue(item) method.

Regards,
Ilias Hossain
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[AMS]

Hi Ilias
Please refer to my recent post regarding this issue. The issue is still there

http://www.telerik.com/community/forums/aspnet-mvc/general/getting-the-value-of-node-in-treeview.aspx (accidentally posted in General discussion section)

OR

http://www.telerik.com/community/forums/aspnet-mvc/treeview/treeview-clientside-functionality-q1.aspx

[Carson]

Ilias or Telerik,

[QUOTE:  However, you will able to pass extra param like dropdown selected value using client side onDataBinding events from our next official release.]

I also need to send an extra variable value to my controller during Ajax data binding.
Is this working yet? Where can I find an example?

Thanks

[Dimo]

Hi Carson,

Please refer to:

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-combobox-data-binding-client-side-binding.html

(see at the bottom)

Regards,
Dimo
the Telerik team