Treeview with checkboxes on the second popup

[Boris]

Configuration :

Main page with grid, editable.Mode(GridEditMode.PopUp) 

This Popup page also have grid with PopUp mode, last Popup page have Treeview with property .Checkboxes(true) 

This popup windows newer appear. 

To fix the situation have to delete .Checkboxes property  from TreeView . As workaround delete Checkboxes  and use TemplateId with scripted template and .ToClientTemplate for treeview. 

But this situation definitely Kendo ui bug, and have to be fixed

 

[Alex Gyoshev]

Hello Boris,

Please provide a isolated runnable example that reproduces the problem.

Regards,
Alex Gyoshev
Telerik

[Boris]

 

public ActionResult _Read([DataSourceRequest] DataSourceRequest request)
{
    List<Product> MyProduct = GetProductsList();
    return Json(MyProduct.ToDataSourceResult(request));
}
 public ActionResult _Update([DataSourceRequest] DataSourceRequest request, Product product)
{
    //Manually add an model error in order to simulate validation error
    ModelState.AddModelError("Name", "My server error");
    return Json(ModelState.ToDataSourceResult());
}
public ActionResult _ReadDetail([DataSourceRequest] DataSourceRequest request)
{
    List<SecondProduct> MyProduct = GetSecondProductsList();
    return Json(MyProduct.ToDataSourceResult(request));
}
public ActionResult _UpdateDetail([DataSourceRequest] DataSourceRequest request, Product product)
{
    //Manually add an model error in order to simulate validation error
    ModelState.AddModelError("Name", "My server error");
    return Json(ModelState.ToDataSourceResult());
}
private List<Product> GetProductsList()
{
        List<Product> MyProd = new List<Product>();
        for (int i = 1; i < 10; i++)
        {
          Product p = new Product();
            p.Id = i;
            p.Name = "Product #" + i.ToString();
            MyProd.Add(p);
        }
        return MyProd;
}
private List<SecondProduct> GetSecondProductsList()
{
    List<SecondProduct> MyProd = new List<SecondProduct>();
    for (int i = 1; i < 10; i++)
    {
        SecondProduct p = new SecondProduct();
        p.Id = i;
        p.Name = "Product #" + i.ToString();
        MyProd.Add(p);
    }
    return MyProd;
}

public JsonResult GetAOL(int? id)
{
    List<TreeViewItemModel> MyAOL = GetAreaLaw();
    return Json(MyAOL, JsonRequestBehavior.AllowGet);
}

private List<TreeViewItemModel> GetAreaLaw()
{
        List<TreeViewItemModel> TVList = new List<TreeViewItemModel>();
        TreeViewItemModel AL = new TreeViewItemModel();
        AL.Id = "1";
        AL.Text = "ROOT-1";
        AL.HasChildren = true;
        AL.Expanded = true;
        TreeViewItemModel SubAL = new TreeViewItemModel();
        SubAL.Id = "3";
        SubAL.Text = "Sub-1-1";
        AL.Items.Add(SubAL);
        TVList.Add(AL);

        AL = new TreeViewItemModel();
        AL.Id = "2";
        AL.Text = "ROOT-2";
        AL.HasChildren = true;
        AL.Expanded = true;
        SubAL = new TreeViewItemModel();
        SubAL.Id = "4";
        SubAL.Text = "Sub-2-1";
        SubAL.Checked = true;
        AL.Items.Add(SubAL);

        SubAL = new TreeViewItemModel();
        SubAL.Id = "5";
        SubAL.Text = "Sub-2-2";
        AL.Items.Add(SubAL);

        TVList.Add(AL);

        return TVList;
}

 

Model:

public class Product
    {
        public int Id { get; set; }
        [Required]
        public string Name { get; set; }
    }

    public class SecondProduct
    {
        public int Id { get; set; }
        [Required]
        public string Name { get; set; }
    }

 

 Index.cshtml :

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-18 col-md-12">
         @(Html.Kendo()
            .Grid<EditingWithServerValidation.Models.Product>()
            .Name("Grid")
            .Columns(columns =>
                {
                    columns.Bound(p => p.Id);
                    columns.Bound(p => p.Name);
                    columns.Command(command => command.Edit()).Width(100);
                })
           .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("DetailsGrid"))
           .DataSource(dataSource => dataSource
               .Ajax()
               .Batch(false)
               .ServerOperation(false)
               .Model(model => model.Id(p => p.Id))
               .Read("_Read", "Home")
               .Update("_Update", "Home")
           )
        )
      </div>
    </div>
</div>

<script>
    function onDataBound(e) {
        $("#refModelTreeView").data("kendoTreeView").expand(".k-item")
    }
</script>

 

EditorTemplates

DetailsGrid.cshtml :

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-18 col-md-12">
         @(Html.Kendo()
            .Grid<EditingWithServerValidation.Models.SecondProduct>()
            .Name("SecondGrid")
            .Columns(columns =>
                {
                    columns.Bound(sp => sp.Id);
                    columns.Bound(sp => sp.Name);
                    columns.Command(command => command.Edit()).Width(100);
                })
           .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("DetailsTV"))
           .DataSource(dataSource => dataSource
               .Ajax()
               .Model(model => model.Id(sp => sp.Id))
               .Read("_ReadDetail", "Home")
               .Update("_UpdateDetail", "Home")
           )
        )
      </div>
    </div>
</div>

DetailsTV.cshtml :

@(Html.Kendo().TreeView()
       .Name("refModelTreeView")
       .DataTextField("Text")
       .Checkboxes(checkboxes => checkboxes

                   .CheckChildren(true)
               )
       .Events(events => events
                           .DataBound("onDataBound")
       )
       .DataSource(datasource => datasource
           .Model(m=> m
                           .Id("Id")
                           .HasChildren("HasChildren")
                           .Children("Items")
            )
           .Read(read => read
                        .Action("GetAOL", "Home")
            )
       )
    )

​

 

 

 

 

[Alex Gyoshev]

Hello Boris,

Thank you for providing the code, we have reproduced the issue and are currently working on a fix.

Regards,
Alex Gyoshev
Telerik

[Alex Gyoshev]

Hello Boris,

The error is caused by the escaping of the default checkbox template. Since the framework cannot determine internally the amount of nesting, it can only handle one level of template nesting. To resolve this problem, use the following checkbox template:

    .Template("<input type='checkbox' name='\\#= treeview.checkboxes.name \\#' \\#= item.checked ? 'checked' : '' \\# value='\\#= item.id \\#' />")

This will escape the evaluation of the default template correctly.

Regards,
Alex Gyoshev
Telerik