This is a migrated thread and some comments may be shown as answers.

Treeview doesn't reload data

1 Answer 154 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Timur Abdurafeev
Top achievements
Rank 1
Timur Abdurafeev asked on 21 Jul 2013, 07:28 PM
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);
    }
}

1 Answer, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 23 Jul 2013, 08:19 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TreeView
Asked by
Timur Abdurafeev
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Share this question
or