CODEWITHSUNDEEP
jquerykendo-uitreeviewkendo-asp.net-mvckendo-treeview
chamara
chamara

Reputation: 12711

Persist kendo treeview expanded state on page load

I'm using kendo treeview. I need to persist the treeview expanded state after navigating to a treeview link.

@(Html.Kendo().TreeView()
    .Name("treeview")
    .HtmlAttributes(new {@class="demo-section",@style="height:700px;" })
    .DataTextField("Name").DataUrlField("Name").DataUrlField("URL").ExpandAll(true)
    .DataSource(dataSource => dataSource
        .Read(read => read
            .Action("GetUserMenue", "UserManagement")
        )

    )

)


public ActionResult GetUserMenue(int? id)
        {
            repUser = new UserManagementRepository();

            List<UserMenue> model = repUser.getMenue(WebSecurity.GetUserId(User.Identity.Name));

            if (!id.HasValue)
            {
                var emp = from e in model
                          select new
                          {
                              id = e.PermissionID,
                              Name = e.Name,
                              URL=e.URL,
                              hasChildren = e.hasChildren
                          };

                return Json(emp, JsonRequestBehavior.AllowGet);
            }
            if (id.HasValue)
            {
                List<UserMenue> modelChild1 = repUser.getMenuLevel2(id);

                var emp = from e in modelChild1
                          select new
                          {
                              id = e.PermissionID,
                              Name = e.Name,
                              URL = e.URL

                          };

                return Json(emp, JsonRequestBehavior.AllowGet);
            }


            return Json(model, JsonRequestBehavior.AllowGet);
        }

Upvotes: 0

Views: 1670

Answers (2)

softawareblog.com
softawareblog.com

Reputation: 990

Here u go Doc

Main two functions:

function saveExpanded() {
  var treeview = $("#treeview").data("kendoTreeView");
  var expandedItemsIds = {};
  treeview.element.find(".k-item").each(function () {
    var item = treeview.dataItem(this);
    if (item.expanded) {
        expandedItemsIds[item.id] = true;
    }
  });
  Cookies.set('expanded', kendo.stringify(expandedItemsIds));
}

function setExpanded(data, expanded) {
  for (var i = 0; i < data.length; i++) {
    if (expanded[data[i].id]) {
      data[i].expanded = true;
    }
    if (data[i].items && data[i].items.length) {
      setExpanded(data[i].items, expanded);
    }
  }
}

Just make sure u have referenced this jquery plugin to use $.cookie function

Upvotes: 1

General Failure
General Failure

Reputation: 2597

In HTML5 You can use history.pushState() or history.replaceState() methods when tree items are expanding or collapsing Save tree items states in history states:

history.pushState({
    expanded: [...]
}, 'sometitle', '?expanded=' + ...);

For restore tree items states You must handle window.onpopstate event

window.onpopstate = function(event) {
    restoreTreeItemsState(event.expanded); // your function that restores tree items states
}

Сheck reason of tree items state change while handling expand event. If tree items expands from your restoreTreeItemsState function, no history changes needed

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

In old browsers You can use window.location.hash. I don't use them, but it has similar functionality and more dificult than html5 history permforming

Upvotes: 0

Related Questions