Retrieve the selection of treewiew control with checkboxes

2 posts, 0 answers
  1. Leoni
    Leoni avatar
    10 posts
    Member since:
    Jul 2012

    Posted 28 Nov 2018 Link to this post

    I'm trying to use the Telerik MVC TreeView control with checkboxes in a form. This form is use to create and modify my view Model to recover the user informations (in particular categories selection). 
    The treeview control shows two levels. 
    In case of creation, the treeview control must expand all levels.
    In case of modify, the treeview control must shows the checkboxes populate in database.

    How retrieve the selection of treewiew control in my view model ? I would like to retrieve the selection of treeview control in controller.

    Do you have a sample code to explain that ? The demo of treewiew control doesn't explain this binding type of remote data. My treeview control is not make on demand.

    My form looks like this :

    @model DigitalVM

     

    @using (Html.BeginForm("saveCampaign", "Digital", FormMethod.Post))
                {
                    @Html.AntiForgeryToken()
                    <!-- Champs cachés -->
                    @Html.HiddenFor(model => Model.ID)
                    <div class="row 1">
                        <div class="form-group col-xs-12 col-md-6 Libelle">
                            @Html.LabelFor(model => model.Libelle)
                            <div>
                                @(Html.Kendo().TextBoxFor(model => model.Libelle)
                                                            .HtmlAttributes(new { style = "width:100%" })
                                )
                                @Html.ValidationMessageFor(model => model.Libelle, "", new { @class = "text-danger" })
                            </div>
                        </div<!-- Libelle -->
                        <label>Categories</label>
                        <div class="form-group col-xs-12 col-md-6 Diffusion">
                            @(
                                Html.Kendo().TreeView()
                                    .Name("Categories")
                                    .Checkboxes(checkboxes => checkboxes
                                        //.Name("IsChecked")
                                        .CheckChildren(true)
                                    )
                                    .BindTo(Model.ModelTree, mappings =>
                                    {
                                        mappings.For<ModelTree>(binding => binding.ItemDataBound((item, modelItem) =>
                                        {
                                            item.Id = modelItem.id;
                                            item.Text = modelItem.Name;
                                            item.Expanded = modelItem.Expanded;
                                            item.Checked = modelItem.Checked;
                                        })
                                        .Children(category => category.Children));
                                    })
                                    .Events(ev => ev.Check("onCheck"))
                            )
                        </div>
                    </div> <!-- row 1 -->
                    <div style="padding-top: 2em;">
                        <h4>Status</h4>
                        <p id="result">No nodes checked.</p>
                    </div>
                    <div><span class="icon icon-lock"> @PortailMR.Resources.Shared.Shared.RequiredFields</span></div>
                    <div>@Html.ValidationMessage("CustomError", new { @class = "text-danger" })</div>
                    <div class="form-group gbuttons">
                        <div class="k-edit-buttons text-right">
                            @*<input type="submit" value="@PortailMR.Resources.Shared.Shared.Buy.ToUpper()" title="Buy" class="icon icon-shopping-basket k-button" />*@
                            @(Html.Kendo().Button()
                                .Name("Commander")
                                .Content("Liste insertion")
                                .Icon("icon icon-next2")
                                .HtmlAttributes(new { @type = "submit", @onClick = "abortEvtUnload(true)" }))
                            @Html.ActionLink(" " + @PortailMR.Resources.Shared.Shared.Cancel, "Index", "Digital", null, new { @class = "k-button k-button-icontext k-grid-cancel", @onClick = "abortEvtUnload(true)" })
                        </div>
                    </div> <!-- gbuttons -->
                }

    My Controller looks like this :

    [Authorize]
            [ValidateAntiForgeryToken]
            [HttpPost]
            //public ActionResult SendCommand(CommandeVM currentOffre) // OK
            public ActionResult saveCampaign(DigitalVM model)
            {
                try
                {
                    if (ModelState.IsValid)
                    {
                        writeLog(MethodBase.GetCurrentMethod(), "Start", "Info");
     
                        // SAVE Model in DATABASE
                        //var connectManager = ConnectManagers.FirstOrDefault(mng => mng.Product == model.Version);
     
                        return View("index");
                    }
                    return View("_TreeView", model);
                }
                catch (BusinessException bex)
                {
                    SetModelError(MethodBase.GetCurrentMethod(), bex);
                    return View("ErrorBusiness", "_Layout3", new HandleErrorInfo(bex, "Offre", "Index"));
                }

    My View model looks like this :

    public class ModelTree
    {
        public string id { get; set; }
        public string Name { get; set; }
        public bool Checked { get; set; }
        public bool Expanded { get; set; }
        public IList<ModelTree> Children { get; set; }
        public ModelTree Parent { get; set; }
    }
    public class DigitalVM
    {
        public int ID { get; set; }
         
        public String Libelle { get; set; }
     
        public IEnumerable<ModelTree> ModelTree { get; set; }
    }

    Best regards,

    Steph.

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1055 posts

    Posted 30 Nov 2018 Link to this post

    Hello Leoni,

    I believe we have a dedicated widget, which will cover the described scenario - the DropDownTree. Unlike the TreeView, the DropDownTree acts as an input form element and supports value binding. That would allow you to populate the selected items upon form load and send them with the form upon submit.

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top