Treeview doesn't reload data

[Timur Abdurafeev]

Hello, I have a problem with reload data in the treeview

there are 2 controls 

DropDownList (with roles)
Treeview (with some hierarchy)

When DropDownList.Onchange event fired the Treeview should be filled with another data (for another role). Event was successfully fired, and  Model was passed to the View. But Treeview not reloaded. 


VIEW 

@using (Html.BeginForm("Security", "Security", FormMethod.Post))

{

    <label for="roles" class="field-label">Securities by Role:</label>

    @(Html.Kendo().DropDownList()

            .Name("roles")

            .DataTextField("RoleName")

            .DataValueField("ID")

            .Events(e => e.Change("rolesChange"))

            .DataSource(ds => ds.Read("GetRoles", "Security"))

     )

    <a href="#" id="saveButton" class="k-button k-button-icontext"><span class="k-icon k-update"></span>Save</a>

 

    <div class="treeview-back">

 

        @(Html.Kendo().TreeView()

              .Name("treeview")

              .DataTextField("Text")

              .AutoBind(false)

              .Checkboxes(checkboxes => checkboxes.CheckChildren(true))

              .Items(tv =>

                  {

                      var list = Model.ToList();

                      foreach (var client in list)

                      {

                          tv.Add().Text(client.Name)

                              .Id("cvm" + client.ID)

                              .Items(root =>

                              {

                                  foreach (var campaign in client.Campaigns)

                                  {

                                      root.Add()

                                          .Text(campaign.CampaignName)

                                          .Id(campaign.ID.ToString())

                                          .Checked(campaign.IsSelected);

                                  }

                              });

                      }

                  }))

    </div>   

}
<script>

    var treeview = $("#treeview").data("kendoTreeView");

    function rolesChange(e) {
        var treeview = $("#treeview").data("kendoTreeView");
        var value = this.value();
        if (value) {
            var url = '@Url.Action("Security", "Security")' + "?roleId=" + value;
            $.ajax({
                url: url,
                type: 'POST',
            });
        }
    }


</script>



Controller

public class SecurityController : BaseGridCrudController<SecurityDataMapper, SecurityViewModel>
{
    public ActionResult Security(int roleId = 0)
    {
        return View(GetTreeViewData(roleId == 0 ? (int?)null : roleId));
    }

    protected override string ClassName
    {
        get { return "SecurityController"; }
    }


    public List<ClientViewModel> GetTreeViewData(int? id)
    {
        int? roleId = id;
        if (!roleId.HasValue)
        {
            var roleViewModels = RoleDataMapper.Instance.List().OrderBy(r => r.RoleName);
            RoleViewModel roleViewModel = roleViewModels.First();
            roleId = roleViewModel.ID;
        }

        return _dataMapper.LoadByRoleId(roleId.Value);
    }


    public ActionResult GetRoles()
    {
        var roles = RoleDataMapper.Instance.List().OrderBy(r => r.RoleName);
        return Json(roles, JsonRequestBehavior.AllowGet);
    }
}

[Daniel]

Hello,

Since the treeview is bound on the server you should submit the form so that the treeview is rebound in order to show the new data:

@(Html.Kendo().DropDownList()
        .Name("roleId")
        .DataTextField("RoleName")
        .DataValueField("ID")
        .Events(e => e.Change("rolesChange"))
        .DataSource(ds => ds.Read("GetRoles", "Security"))
 )

function rolesChange(e) {
    this.element.closest("form").submit();
}

An alternative when the treeview is bound on the server would be to use the treeview in a partial view and replace the treeview or its container HTML(after destroying the existing treeview) in the Ajax request success callback. Regards,
Daniel
Telerik