MVC Treeview with checkboxes on Custom Edit Popup from Grid

9 posts, 0 answers
  1. Boris
    Boris avatar
    8 posts
    Member since:
    May 2015

    Posted 04 Jun 2015 Link to this post

    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. 

     

     

     

     

     

     

     

     

     

  2. Boris
    Boris avatar
    8 posts
    Member since:
    May 2015

    Posted 04 Jun 2015 in reply to Boris Link to this post

    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.  
  3. Kendo UI is VS 2017 Ready
  4. Boris
    Boris avatar
    8 posts
    Member since:
    May 2015

    Posted 04 Jun 2015 Link to this post

    Kendo version: 2015.1.429
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 08 Jun 2015 Link to this post

    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!
     
  6. Boris
    Boris avatar
    8 posts
    Member since:
    May 2015

    Posted 08 Jun 2015 in reply to Boyan Dimitrov Link to this post

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

     

  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 10 Jun 2015 Link to this post

    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!
     
  8. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 12 Jun 2015 Link to this post

    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!
     
  9. Boris
    Boris avatar
    8 posts
    Member since:
    May 2015

    Posted 19 Jun 2015 in reply to Boyan Dimitrov Link to this post

    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. 

     

  10. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 23 Jun 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready