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

MVC Treeview with checkboxes on Custom Edit Popup from Grid

14 Answers 369 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Boris
Top achievements
Rank 1
Boris asked on 05 Jun 2015, 12:21 AM

I have Index.shtml with Grid control:

 
@(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("Details"))
   .DataSource(dataSource => dataSource
       .Ajax()
       .Batch(false)
       .ServerOperation(false)
       .Model(model => model.Id(p => p.Id))
       .Read("_Read", "Home")
       .Update("_Update", "Home")     
   )
)
 

 Controller have _Read method

public ActionResult _Read([DataSourceRequest] DataSourceRequest request)
{
      List<Product> MyProduct = GetProductsList();
      return Json(MyProduct.ToDataSourceResult(request));
}
public ActionResult Index([DataSourceRequest] DataSourceRequest request)
{
     ViewBag.AreaOfLaw = GetAreaLaw();
     return View();
}
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<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";
    AL.Items.Add(SubAL);
 
    SubAL = new TreeViewItemModel();
    SubAL.Id = "5";
    SubAL.Text = "Sub-2-2";
    AL.Items.Add(SubAL);
 
    TVList.Add(AL);
    return TVList;
}
And Model describe Product:

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

Details.shtml Custom PopUP template as simple as possible (I remove from this template all other markup except treeview )

<div id="tv" style="overflow:scroll; height:200px;">   
@(Html.Kendo().TreeView()
.Name("treeview")
.Checkboxes(true)
.BindTo((IEnumerable<TreeViewItemModel>)ViewBag.AreaOfLaw)           
)  
</div>
 

When I run it - I got the grid , Edit click Open Popup with Treeview , but Checkboxes behavior is weird - click on any one checkbox Select All or Clead All checkboxes on the screen

When I move Treeview from Popup template on Index.shtml page it's working as expected. Please advise. 

 

 

 

 

 

 

 

 

 

14 Answers, 1 is accepted

Sort by
0
Boris
Top achievements
Rank 1
answered on 05 Jun 2015, 12:36 AM
Just to be clear - I need Grid popup for Edit info from grid row.  In real project I have inputs controls for edit grid row info, and also I have TabStrip to show/edit additional info like Treeview with checkboxes in my example. When it's mess with checkboxes behavior I delete all markup from Details.cshtml to be sure nothing affect the Treeview control.  
0
Boris
Top achievements
Rank 1
answered on 05 Jun 2015, 02:10 AM
Kendo version: 2015.1.429
0
Boyan Dimitrov
Telerik team
answered on 08 Jun 2015, 12:47 PM

Hello Boris,

I am not complete sure what problem you are facing. As far as I understand the check boxes are rendered correctly, but I am not sure what is happening when a check box is checked. 

Could you please clarify what is the current behavior when a check box is checked and what is the desired behavior? 

Regards,
Boyan Dimitrov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Boris
Top achievements
Rank 1
answered on 08 Jun 2015, 11:51 PM

Initially  you have all checkboxes unchecked, when you click on one checkbox (any one) - all checkboxes together became checked.

 

0
Boyan Dimitrov
Telerik team
answered on 10 Jun 2015, 03:37 PM

Hello Boris,

I replicated the described behavior, but I would need a bit more time to investigate it. As soon as I have any updates I will post them in the thread. 

Regards,
Boyan Dimitrov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Boyan Dimitrov
Telerik team
answered on 12 Jun 2015, 01:44 PM

Hello Boris,

The reason why when a single check box is checked all check boxes of the TreeView widget are being checked is that they are bound to same field of the model (two way binding). Once a check box is checked it automatically changes the filed value to true. Since it is two way binding the rest of the check box elements change their state to checked as well. 

In order to avoid this behavior please use the following configuration code for the TreeView widget:

  @(Html.Kendo().TreeView()
.Name("treeview")
        .Checkboxes(cb => cb.Template("<input name='checkedNodes' type='checkbox' data-skip='true'> "))
.BindTo((IEnumerable<TreeViewItemModel>)ViewBag.AreaOfLaw)
    )

Regards,
Boyan Dimitrov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Boris
Top achievements
Rank 1
answered on 20 Jun 2015, 12:09 AM

Thank you, with template it's working 

still don't understand, why TreeViewItemModel with property .Checked = true didn't make checkbox checked automatically, and I have to write template code, passing this property to html checkbox. 

 

0
Boyan Dimitrov
Telerik team
answered on 23 Jun 2015, 02:50 PM

Hello Boris,

 

In the popup template the check box elements will be bound to a model field. Using the template with the data-skip will avoid this as explained in my last response.

 

Regards,
Boyan Dimitrov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Alex
Top achievements
Rank 1
answered on 31 Mar 2021, 08:11 PM

Hello,

I am having the same issue when using TreeView() inside of the Grid Popup template.

The selection of checkbox is not working properly and is behaving same way as described above.

Using your suggestion to add custom template resolves the issue with the checkbox selection.

But, for some reason the markup that is generated by the same mvc html helper is a little bit off and breaks the list.

Not sure if this is got to do with the newer version of Kendo UI.

 

We are using: 2020.1.406

 

Here is the test code I am using to generate the TreeView (Shortened for readability):

@(Html.Kendo().TreeView()
.Name("StatusNotificationsTreeView")
.HtmlAttributes(new { @class="disable-select-style"})
.Checkboxes(cb => cb.CheckChildren(true))
.CheckboxTemplate("<input data-skip='true' class='k-checkbox' type='checkbox' name='checkedNodes'></input>")
.Items( treeview =>
    {
        treeview.Add().Text("Initiated")
            .SpriteCssClasses("fad fa-folder-open text-primary")
            .Expanded(true)
            .Items(root =>
            {
                root.Add().Text("Test").Id("test1");
            });
    }
)
 
 
)

 

Here is what the markup looks like:

<div class="disable-select-style k-widget k-treeview" id="StatusNotificationsTreeView" data-role="treeview" tabindex="0" role="tree" aria-activedescendant="StatusNotificationsTreeView_tv_active">
    <ul class="k-group k-treeview-lines">
        <li role="treeitem" class="k-item k-first k-last" data-uid="c4166e3c-c8c8-428a-97f1-2f5131a04a71" aria-checked="false" aria-selected="false" aria-expanded="true" data-expanded="true" id="StatusNotificationsTreeView_tv_active">
            <div class="k-top k-bot">
                <span class="k-icon k-i-collapse">
                    <span class="k-checkbox-wrapper" role="presentation">
                        <input data-skip="true" class="k-checkbox" type="checkbox" name="checkedNodes">
                    </span>
                    <span class="k-in">
                        <span class="k-sprite fad fa-folder-open text-primary">Initiated</span>
                    </span>
                </span><span class="k-in"></span>
            </div>
            <ul class="k-group" role="group" style="display: block;">
                <li role="treeitem" class="k-item k-last" data-uid="01e8a5a2-b51b-4cf5-8ad8-121d43ffa786" aria-checked="false" aria-selected="false" aria-expanded="false" data-expanded="false">
                    <div class="k-bot"><span class="k-checkbox-wrapper" role="presentation">
                            <input data-skip="true" class="k-checkbox" type="checkbox" name="checkedNodes">
                        </span>
                        <span class="k-in">Test</span>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>

 

Comparing to the same code snippet but without the checkbox template, it seems that the issue is that now the span with the class k-i-collapse wraps multiple lines of code and the input for checkbox as well but also other ones and breaks the look and feel.

Here are the troubled lines:

<div class="k-top k-bot">
                <span class="k-icon k-i-collapse">
                    <span class="k-checkbox-wrapper" role="presentation">
                        <input data-skip="true" class="k-checkbox" type="checkbox" name="checkedNodes">
                    </span>
                    <span class="k-in">
                        <span class="k-sprite fad fa-folder-open text-primary">Initiated</span>
                    </span>
                </span>
                <span class="k-in"></span>
            </div>
 
 

 

Here is full markup without the checkbox template usage:

<div class="k-widget k-treeview k-reset disable-select-style" id="StatusNotificationsTreeView" data-role="treeview" tabindex="0" role="tree" aria-activedescendant="StatusNotificationsTreeView_tv_active">
    <ul class="k-group">
        <li class="k-item k-first k-last" data-expanded="true" data-id="Initiated" role="treeitem" data-uid="fb0605c4-a0e5-4a6e-8c8e-38549e916a9b" aria-selected="false" aria-checked="false" id="StatusNotificationsTreeView_tv_active">
            <div class="k-top k-bot">
                <span class="k-icon k-i-collapse"></span>
                <span class="k-checkbox-wrapper">
                    <input aria-label="Initiated" class="k-checkbox" name="checkedNodes" type="checkbox" value="Initiated" id="_fb0605c4-a0e5-4a6e-8c8e-38549e916a9b" data-bind="checked:checkedNodes"><span class="k-checkbox-label checkbox-span" for="_fb0605c4-a0e5-4a6e-8c8e-38549e916a9b"></span>
                </span>
                <span class="k-in">
                    <span class="k-sprite fad fa-folder-open text-primary"></span>Initiated
                </span>
            </div>
            <ul class="k-group">
                <li class="k-item k-last" data-id="test1" role="treeitem" data-uid="235dd2b6-214e-4517-a0d5-19c97a738dee" aria-selected="false">
                    <div class="k-top k-bot">
                        <span class="k-checkbox-wrapper">
                            <input aria-label="Test" class="k-checkbox" name="checkedNodes" type="checkbox" value="test1" id="_235dd2b6-214e-4517-a0d5-19c97a738dee" data-bind="checked:checkedNodes">
                            <span class="k-checkbox-label checkbox-span" for="_235dd2b6-214e-4517-a0d5-19c97a738dee"></span>
                        </span>
                        <span class="k-in">Test</span>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>

 

 

And the troubled spot looks like this:

<div class="k-top k-bot">
                <span class="k-icon k-i-collapse"></span>
                <span class="k-checkbox-wrapper">
                    <input aria-label="Initiated" class="k-checkbox" name="checkedNodes" type="checkbox" value="Initiated" id="_fb0605c4-a0e5-4a6e-8c8e-38549e916a9b" data-bind="checked:checkedNodes"><span class="k-checkbox-label checkbox-span" for="_fb0605c4-a0e5-4a6e-8c8e-38549e916a9b"></span>
                </span>
                <span class="k-in">
                    <span class="k-sprite fad fa-folder-open text-primary"></span>Initiated
                </span>
            </div>

 

Please help because I am not sure what can be done differently to fix this issue at this point.

Thanks

Alex

 

 

 

0
Neli
Telerik team
answered on 02 Apr 2021, 04:59 PM

Hi Alex,

I have tested locally by adding a TreeView in a Grid custom popup template. However, I did not manage to replicate the described issue and the checkboxes are checked/unchecked as expected on my end.

From the provided information I am not sure if you are using the UI for ASP.NET Core or UI for ASP.NET MVC wrappers. Attached you will find the sample UI for ASP.NET Core project I used for the test. The Kendo version referenced in the project is 2020.1.406. Could you please take a look at the sample and let me know if I am missing something from your scenario? May I ask you to modify the sample project in order to replicate the behavior the way it is at your side and send it back? This way we could take a closer look and provide further assistance.

Looking forward to your reply.

Regards,
Neli
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Alex
Top achievements
Rank 1
answered on 02 Apr 2021, 08:04 PM
Hello any updates?
0
Alex
Top achievements
Rank 1
answered on 02 Apr 2021, 08:13 PM

Hi Neli, 

Thank you for your reply. We are using MVC not the core.

I am testing your code. The main difference I see is that this is a core solution, thus not sure if that will matter. Will keep you posted.

0
Alex
Top achievements
Rank 1
answered on 05 Apr 2021, 03:31 PM

Hello,

After much of troubleshooting I found that the issue was that I was using different version of jQuery. I had regular jQuery added to the solution.

After I added kendo version, it started to behave properly.

<script src="https://kendo.cdn.telerik.com/2020.1.406/js/jquery.min.js"></script>

Thank you for your assistance. 

 

0
Neli
Telerik team
answered on 06 Apr 2021, 08:45 AM

Hi Alex,

I am glad to hear that the issue is resolved. Thank you very much for sharing more details about the cause of the issue on your side. 

As it could be helpful to the other users in the Forum I will paste below the list with the jQuery versions compatible with the major Telerik UI for ASP.NET MVC releases:

https://docs.telerik.com/aspnet-mvc/getting-started/prerequisites/jquery-support

Regards,
Neli
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TreeView
Asked by
Boris
Top achievements
Rank 1
Answers by
Boris
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Alex
Top achievements
Rank 1
Neli
Telerik team
Share this question
or