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

Retrieve the selection of treewiew control with checkboxes

1 Answer 215 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Leoni
Top achievements
Rank 1
Leoni asked on 28 Nov 2018, 11:04 AM

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.

1 Answer, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 30 Nov 2018, 09:10 AM
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.
Tags
TreeView
Asked by
Leoni
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Share this question
or