[Solved] TreeView Clientside functionality (Q1)

[AMS]

Hi i am trying to get the value of the clicked treeview node as a parameter and then append the child nodes underneath it by making a client side call. but i get only the item.text() property but not the item.value() property.

Any suggestions????






<script type="text/javascript">
        function onSelect(e) {
            debugger;
            var tv = $("#TreeView").data("tTreeView");




            var item = $(e.item);



//$console.log('OnSelect :: ' + item.text());

//its not giving me the item.value() here.....

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

function onPass(data, status)
{

   //what will be code here to append json as a child to the selected node?


}


function onDataBinding(e) {
    var treeview = $('#TreeView').data('tTreeView');

    var jsonObject = [
                { Value: "1", Text: "Product 1", Expanded: true,
                    Items: [
                      { Value: "4", Text: "Product 4", Expanded: true,
                          Items: [
                            { Value: "6", Text: "Product 6" },
                            { Value: "7", Text: "Product 7" }
                        ]
                      },
                      { Value: "5", Text: "Product 5" }
                  ]
                },
                { Value: "2", Text: "Product 2 (unavailable)", Enabled: false },
                { Value: "3", Text: "Product 3" }
            ];

    treeview.bindTo(jsonObject);
}



</script>

<p>
    <%  Html.Telerik().TreeView()
        .Name("TreeView")
        .ClientEvents(events => events
            .OnDataBinding("onDataBinding")
            .OnSelect("onSelect")
        )
            .Render();

    %>
</p>

[AMS]

Hi
According to your recent reply to my earlier post (On March 6), i have also used the following lines of code in my above mentioned code.

            var txt = tv.getItemText(item);
            var val = tv.getItemValue(item);

But according to the json described above, i am supposed to get the value of '6' whenever i click on 'Product 6' (if i am not mistaken), but i am not getting this value.

Please resolve this issue and also let me know how to append items (on client side) under 'Product 6', if i click on that.

Regards

[Alex Gyoshev]

Hi Abbid ,

I'm sorry for the breaking change, and thank you for noting it - your Telerik points have been updated.

I'm attaching the patched version of telerik.treeview.js. It contains the fix for the item value and an essential improvement to the DataBinding event - namely, the item that should be populated. With it, you can do the following:

    <script type="text/javascript">
        function onDataBinding(e) {
            var treeview = $('#TreeView').data('tTreeView');
            var jsonObject;

            if (e.item == treeview.element) {
                // initial load
                jsonObject = [
                    { Text: "Product 1", Expanded: true,
                        Items: [
                          { Text: "Product 4", Expanded: true,
                              Items: [
                                { Text: "Product 6", Value: 6 },
                                { Text: "Product 7" }
                            ]
                          },
                          { Text: "LoadOnDemand Abyss", LoadOnDemand: true, Value: "abyss" }
                      ]
                    },
                    { Text: "Product 2 (unavailable)", Enabled: false },
                    { Text: "Product 3" }
                ];

                treeview.bindTo(jsonObject);
            } else {
                // expanding e.item
                jsonObject = [{ Text: "Abyss Node", LoadOnDemand: true, Value: "abyss" }];
               
                treeview.dataBind(e.item, jsonObject);
            }
        }
    </script>

Greetings,
Alex Gyoshev
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 Alex

I don't see any attached file in your reply. Please send it if you forgot

Regards
Abbid

[Alex Gyoshev]

Hi Abbid,

Here it is, sorry.

Kind regards,
Alex Gyoshev
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 Alex
Thanks for the code and the update file. I am getting a confusion while testing your code. Please let me know where i am wrong.
In this code,

Case 1:
when i click on Product 6, it shows me the txt as "Product 6" and val as 6 (i.e. by using tv.getItemValue(item) ) , and gives the val1 as "Product 1" (i found this technique from in response to my post on http://www.telerik.com/community/forums/aspnet-mvc/general/getting-the-value-of-node-in-treeview.aspx ).

Case 2:
But when i click on any other product like "Product 7",
txt = "Product 7"
val is undefined,
val1 = "Product 1"
(means the result is different from the above one)

Case 3:
Now if i click on "LoadOnDemand Abyss", it shows
txt = "LoadOnDemand Abyss"
val = "Abyss"
val1 = "Product 1"


tv.getItemValue(item) is showing different behaviors in different cases. Could you please help me out in this issue?

This is a fully functional code. You can try it out and can produce the same.

<script type="text/javascript">

  function onDataBinding(e) {
      var treeview = $('#StdTree').data('tTreeView');
            var jsonObject;

            if (e.item == treeview.element) {
                // initial load
                jsonObject = [
                    { Text: "Product 1", Expanded: true,
                        Items: [
                          { Text: "Product 4", Expanded: true,
                              Items: [
                                { Text: "Product 6", Value: 6 },
                                { Text: "Product 7" }
                            ]
                          },
                          { Text: "LoadOnDemand Abyss", LoadOnDemand: true, Value: "abyss" }
                      ]
                    },
                    { Text: "Product 2 (unavailable)", Enabled: false },
                    { Text: "Product 3" }
                ];

                treeview.bindTo(jsonObject);
            } else {
                // expanding e.item
                jsonObject = [{ Text: "Abyss Node", LoadOnDemand: true, Value: "abyss" }];

                treeview.dataBind(e.item, jsonObject);
            }
        }


 function onSelect(e) {
            var tv = $("#StdTree").data("tTreeView");
            var item = $(e.item);

            var txt = tv.getItemText(item);
            var val1 = tv.getItemValue(item);
            var val = $(e.item).closest('.t-item').find(':input[name*="Value"]').val();
            debugger;



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

<!--Treeview -->
  <% Html.Telerik().TreeView()
              .Name("StdTree")
              .ClientEvents(events => events
                        .OnDataBinding("onDataBinding")
                        .OnSelect("onSelect")
                )
              .Render();

    %>

[Alex Gyoshev]

Hi Abbid ,

Indeed, I missed to patch the getItemValue function - it should be like this:

        getItemValue: function($item) {
            return $item.closest('.t-item').find(':input[name="itemValue"]').eq(0).val() || this.getItemText();
        }

I've attached the latest treeview file.

Regards,
Alex Gyoshev
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 Alex
Thanks for the patch. Could you please answer the following?

1. how to change the look and feel of the treeview on client side (like i want to replace the default arrows with my own images).
2. how to check that if a node is already populate with items (do not load them again)

I am attaching my sample code, please rectify me

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%@ Import Namespace="XploreVer2.Web.Helpers" %>
<%@ Import Namespace="XploreVer2.Web.Models.DataObjects" %>

<script type="text/javascript">

    var curNode;

    function onDataBinding(e) {
        var treeview = $('#StdTree').data('tTreeView');
        var jsonObject;


        var item = $(e.item);
        //curNode = item;
        curNode = e.item;

        var txt = treeview.getItemText(item);
        var val = treeview.getItemValue(item);

        if (txt != "" && val != "") {
            onSelect(e);
        }
        else {
            $.ajax({
            url: '/Resource/TreeViewPopulation',
                data:  ({ SubjectID: $("#Subject").val() }),
                contentType: 'application/json; charset=utf-8',
                type: 'GET',
                dataType: 'json',
                error: function(xhr, status) {
                    debugger;
                    alert(status);
                },
                data: {
                    q: 'TEST-Subject'
                },
                success: function(result) {
                    alert("result");
                    treeview.dataBind(e.item, result);

                }
            });



        }



    }



        function onSelect(e) {



            var tv = $("#StdTree").data("tTreeView");

            //var itemVal = tv.getItemText();
            //var itm = $(tv.element);
            //var txt = e.item.textContent;
            //treeArg = e;


            var item = $(e.item);

            var txt = tv.getItemText(item);
            var val = tv.getItemValue(item);


            $.post('/Resource/StandardResources', { SubjectID: $("#Subject").val(), lodStandardId: val }, function(data) {
    onPass(data, status);
});
}
function onPass(data, status)
{

    var treeview = $("#StdTree").data("tTreeView");

    treeview.dataBind(curNode, data);
    treeview.expand(curNode);


}


</script>

<p>
    <% 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
                        .OnDataBinding("onDataBinding")
                        .OnSelect("onSelect")
                )
           /*   .DataBinding(dataBinding =>
                  {
                      dataBinding.Ajax().Enabled(true)
                      .Select("StandardResources", "Resource", new {dfg=jq })


                  })*/
              .Render();

    %>
</p>

<!--Controller Code -->
public ActionResult TreeViewPopulation()
        {



            ViewData["listType"] = "standards";

            IQueryable<GetStandardBySubjectResult> standardsbySubject = new StandardRepository().GetStandardTreeBySubjectId(StandardSubjecKey.ENGLISH_LANGUAGE_ARTS).AsQueryable();
            IQueryable<GetStandardBySubjectResult> gradeCourseStandards = standardsbySubject.Where(std => std.Parent_ID == new Guid(StandardSubjecKey.ENGLISH_LANGUAGE_ARTS));
            string firstStdID = gradeCourseStandards.First().Standard_ID.Value.ToString();


            var elaStandards = (from std in standardsbySubject
                                where std.Parent_ID == new Guid(firstStdID)
                                select new TreeViewItemModel
                                {
                                    Text = std.Standard_Description,
                                    Value = std.Standard_ID.Value.ToString(),
                                    LoadOnDemand = standardsbySubject.Where(st => st.Parent_ID == std.Standard_ID).Count() > 0 ? true : false,
                                    ImageUrl = standardsbySubject.Where(st => st.Parent_ID == std.Standard_ID).Count() > 0 ? "~/Content/Images/index.png" : "~/Content/Images/note.png"
                                }
                                );
            return Json(elaStandards);


        }

   [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult StandardResources(FormCollection formData, int? pID)
        {
            if (formData["ssId"] != null)
            {
                }
            }
//code comes here after posting data
            else if (formData["lodStandardId"] != null)
            {
                //Load on Demand standards
                Guid parentId = new Guid(formData["lodStandardId"].ToString());
string currentSubjectId = formData["SubjectID"].ToString(); //for new treeview

                StandardRepository elaTempResult = new StandardRepository();
                IQueryable<GetStandardBySubjectResult> StandardsbySubject = elaTempResult.GetStandardTreeBySubjectId(currentSubjectId).AsQueryable();

                var elaStandards = (from std in StandardsbySubject
                                    where std.Parent_ID == parentId
                                    select new TreeViewItemModel
                                    {
                                        Text = std.Standard_Description,
                                        Value = std.Standard_ID.Value.ToString(),
                                        LoadOnDemand = StandardsbySubject.Where(st => st.Parent_ID == std.Standard_ID).Count() > 0 ? true : false,
                                        ImageUrl = StandardsbySubject.Where(st => st.Parent_ID == std.Standard_ID).Count() > 0 ? "~/Content/Images/index.png" : "~/Content/Images/note.png"
                                    }
                                    );
                return Json(elaStandards);
                //return new JsonResult{Data = elaStandards};
            }
            else if (!String.IsNullOrEmpty(formData["txtSearchKeyword"]))
            {
            }
            else if (!String.IsNullOrEmpty(formData["hfStandardId"]))
            {
            }
            else
            {
        }

[Alex Gyoshev]

Hi Abbid ,

1. You can change the images with the following CSS rules:
   
   .t-treeview .t-plus, .t-treeview .t-plus-disabled { background: transparent url("plus.png"); }
   .t-treeview .t-minus, .t-treeview .t-minus-disabled { background: transparent url("minus.png"); }
   
   
2. Given the following code:
   
   var item = $(e.item);
   
   You can check whether the item has child nodes in the following way:
   
   if (item.closest(".t-item").find(".t-group").children().length == 0) {
        // item does not have child nodes
   }

Regards,
Alex Gyoshev
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 Alex
Thanks for your reply. One more thing i want to ask you.

1. If i use the .BindTo method to bind the treeview from server during the first time when it loads, and then later i want to use the client-side events, the only issue which i found is that when i use the getItemByText(item) and getItemByValue(item) methods, both of them return the same value (i.e. Text value of the selected node). Could you please help me in this regard?

Just read the code in my earlier post in which i have commented the .BindTo method. I am here for any further query regarding code.

[Alex Gyoshev]

Hello Abbid ,

This is a bug with the TreeView rendering which didn't allow the initial server-side binding to get along with the client-side binding afterwards. The issue can be fixed by changing the LoadOnDemand conditions in TreeViewHtmlBuilder.cs from
    ((Component.Ajax.Enabled || Component.WebService.Enabled) && item.LoadOnDemand)
to
    item.LoadOnDemand

(most probably on lines 66 and 123)

When you change that, the binding should work as expected (i.e. the value should differ from the element's text)

Regards,
Alex Gyoshev
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.