Issue with CheckBox in Grid - Batch mode

10 posts, 0 answers
  1. Shreesh
    Shreesh avatar
    33 posts
    Member since:
    Aug 2011

    Posted 10 Nov 2014 Link to this post

    Hello,

    I am invoking a popup (which is a partial view) from a link  in a main grid. I have a popup with checkbox column and other column which is non editable. The popup window (with Grid) opens correctly and if I keep "Edit" button then I am able to select a checkbox and when I say "update" then I get correct value of checkbox in the controller "update" function. Line by line editing without Batch (without SaveChanges) works correctly and I get CheckBox value as true.

    However it is not working in Batch mode. I have set inline mode but no help. The Save button click doesnot invoke my update function. What is missing?

    Following is code to invoke a popup from link on  main grid.
    -----------------------------------------------------------
     columns.Template(@<text> </text>)
                                  .ClientTemplate("<a href='" + Url.Action("ShowPopup", "Events") + "/#= EventId #'" + ">Customers</a>");
    --------------------------------------------------------------
    Following is code for PopUp:  

    -------------------------------------------------------------------------
    @using SampleAppModelsAndServices.Areas.AreaOne.Models

       @(Html.Kendo().Window()
        .Name("Window1")
        .Title("Customers")
        .Content(@<text>  
           @(Html.Kendo().Grid<CustomerModel>()
            .Name("GridPopup")
            .Columns(columns =>
            {
                //columns.Bound(p => p.CustomerId);

                columns.Bound(p => p.CheckSelect).Title("Select").Width("10%").HtmlAttributes(new { @style = "font-size:x-small" }).ClientTemplate("<input type='checkbox' #= CheckSelect ? Checked='Checked' : ''# > </input>");
                columns.Bound(p => p.CustomerName).Title("Customer Name").Width("20%");
               
                //columns.Command(c =>
                //{
                //    c.Edit().Text(" ");

                //}).Title("Commands").Width("20%");


            })

                            .ToolBar(tools =>
                                    {

                                        tools.Save();
                                    })
                                .Editable(editable => editable.Mode(GridEditMode.InCell))

            //  .Sortable()
                   //  .Pageable()
                   // .Filterable()
              
              .DataSource(dataSource => dataSource
                      .Ajax()
                      .Batch(true)
                      .ServerOperation(false)
                      .Model(model =>
                      {
                          model.Id(m => m.CustomerId);
                          model.Field(m => m.CheckSelect).Editable(true);
                          model.Field(m => m.CustomerName).Editable(false);
                         // model.Equals(m => m.SelectCheck);
                      })


                  
                  // .Read(read => read.Action("GetCustomers", "Events", new { area = "AreaOne" , @id = Model.ContextId }))
                  .Read(read => read.Action("GetCustomers", "Events", new { area = "AreaOne"}))
                  // .Update(update => update.Action("Update", "Customers", new { area = "Sales" }))
                    //.Update(update => update.Action("UpdateCustomers", "Events", new { area = "AreaOne" , @id = Model.ContextId }))
                    .Update(update => update.Action("UpdateCustomers", "Events", new { area = "AreaOne"}))

                               ))
        
        
        
        </text>)

        .Resizable()
        .Draggable()
       // .Width(600)
        .Actions(actions => actions.Minimize().Maximize().Close())
                //.Events(ev => ev.Close("Window1_onClose"))
       // .Visible(true)

        )
  2. Shreesh
    Shreesh avatar
    33 posts
    Member since:
    Aug 2011

    Posted 11 Nov 2014 in reply to Shreesh Link to this post

    Hello,

    I have corrected the problem with my controller method. I get the multiple selection values. However, there is a catch that, to select a checkbox, I first need to click somewhere near the box  for each row, the box slightly shifts and then I "tick" it. I have to do this extra click for each row and then when I say Save changes, I get List.

    Why this extra click required? How can I put directly the in editing mode...?
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 12 Nov 2014 Link to this post

    Hello Shreesh,

    Two clicks are requried because in order to put the cell into edit mode you need to click once, and to change the state of the checkbox inside the editor template you need another click.

    This is why we created the following code library as a work-around:

    http://www.telerik.com/support/code-library/checkbox-column-and-incell-editing

    Kind Regards,
    Petur Subev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Shreesh
    Shreesh avatar
    33 posts
    Member since:
    Aug 2011

    Posted 24 Nov 2014 in reply to Petur Subev Link to this post

    Hello Petur,
    The solution provided by you does not work for a grid within a Window Popup.
    Please let me know how to nest as I have to have a window popup... I get following error:
    /************************/
    Parser Error


    Description: An error occurred during the parsing of
    a resource required to service this request. Please review the
    following specific parse error details and modify your source file
    appropriately.



    Parser Error Message: Inline markup blocks (@<p>Content</p>) cannot be nested.  Only one level of inline markup is allowed.


    Source Error:






    Line 14: // columns.Bound(p => p.CheckSelect).Title("Select").Width("10%").HtmlAttributes(new { @style = "font-size:x-small" }).ClientTemplate("<input type='checkbox' #= CheckSelect ? Checked='Checked' : ''# > </input>");
    Line 15: columns.Bound(p => p.CustomerName).Title("Customer Name").Width("20%");
    Line 16: columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' #= CheckSelect ? checked='checked':'' # class='chkbx' />").HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>").Width("15%");
    Line 17:
    Line 18:

    /*****************************/
    The code that I have is given below:

    @using SampleAppModelsAndServices.Areas.AreaOne.Models

       @(Html.Kendo().Window()
        .Name("Window1")
        .Title("Customers")
        .Content(@<text>
           @(Html.Kendo().Grid<CustomerModel>()
            .Name("GridPopup")
            .Columns(columns =>
            {
                columns.Bound(p => p.CustomerId);

               // columns.Bound(p => p.CheckSelect).Title("Select").Width("10%").HtmlAttributes(new { @style = "font-size:x-small" }).ClientTemplate("<input type='checkbox' #= CheckSelect ? Checked='Checked' : ''# > </input>");
                columns.Bound(p => p.CustomerName).Title("Customer Name").Width("20%");
                columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' #= CheckSelect ? checked='checked':'' # class='chkbx' />").HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>").Width("15%");


                //columns.Bound(p => p.CustomerName).Title("Name2").Width("20%");
                //columns.Command(c =>
                //{
                //    c.Edit().Text(" ");

                //}).Title("Commands").Width("20%");


            })

                                            .ToolBar(tools =>
                                            {

                                                tools.Save();
                                            })
                                                .Editable(editable => editable.Mode(GridEditMode.InCell))


                    //  .Sortable()
                   //  .Pageable()
                   // .Filterable()
                  

                      .DataSource(dataSource => dataSource
                              .Ajax()
                              .Batch(true)
                            //  .ServerOperation(false)
                              .Model(model =>
                              {
                                  model.Id(m => m.CustomerId);
                                  //model.Field(m => m.CheckSelect).Editable(true);
                                  // model.Field(m => m.CustomerName).Editable(false);

                              })



                          // .Read(read => read.Action("GetCustomers", "Events", new { area = "AreaOne" , @id = Model.ContextId }))
                          .Read(read => read.Action("GetCustomers", "Events", new { area = "AreaOne" }))
                          // .Update(update => update.Action("Update", "Customers", new { area = "Sales" }))
                          //.Update(update => update.Action("UpdateCustomers", "Events", new { area = "AreaOne" , @id = Model.ContextId }))
                                    .Update(update => update.Action("UpdateCustomers", "Events", new { area = "AreaOne" }))

                                       ))
        
        
        
        </text>)

        .Resizable()
        .Draggable()
       // .Width(600)
        .Actions(actions => actions.Minimize().Maximize().Close())
                //.Events(ev => ev.Close("Window1_onClose"))
       // .Visible(true)

       )


        <script type="text/javascript">
            $(function () {
                $('#GridPopup').on('click', '.chkbx', function () {
                    var checked = $(this).is(':checked');
                    var grid = $('#GridPopup').data().kendoGrid;
                    var dataItem = grid.dataItem($(this).closest('tr'));
                    dataItem.set('CheckSelect', checked);
                })
            })

            function checkAll(ele) {
                var state = $(ele).is(':checked');
                var grid = $('#GridPopup').data().kendoGrid;
                $.each(grid.dataSource.view(), function () {
                    if (this['CheckSelect'] != state)
                        this.dirty = true;
                    this['CheckSelect'] = state;
                });
                grid.refresh();
            }

    </script>




  6. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 26 Nov 2014 Link to this post

    Hello Shreesh,

    You should change the following:

    columns.Template(@<text></text>)

    with the following:

    columns.Template(i => { })

    This should resolve the error in question.

    Regards,
    Rosen
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Terry
    Terry avatar
    31 posts
    Member since:
    Jun 2016

    Posted 12 Sep in reply to Rosen Link to this post

    I'm struggling with this as well.  I'm finding I have to click near the box, and then click the checkbox.  Like Shreesh reported.  So I looked at the code library work-around that Petur provided.  That is great that is designed to give select all functionality.  But, it isn't working for me.  And it still doesn't address how to just select one row, without selecting all.

    Here's how I have the column defined:

    columns.Bound(c => c.Selection).ClientTemplate("<input type='checkbox' #= Selection ? checked='checked' :'' # />").Title("Select").HeaderTemplate("<input type='checkbox' id='masterCheckBox' class='k-link myHeaderTemplate 'onclick='checkAll(this)'/>");

    And here is my function.  Once I couldn't get it to work by using the function in the example.  Then I changed it.  For another issue I had, I was shown to go through the data and the grid separately. 

    Since I have alerts in the function, I can see it set the dirty flag on the rows.  But then the dirty flag goes away.  Can you explain this? 

    And what is causing the masterCheckBox in the header template to disappear?  I must not understand how the Header Templates work.  I don't see why it is getting unchecked.

    Finally, for just selecting 1 row, is there a way to not select twice?

    function checkAll(ele) {
        var state = $(ele).is(':checked');
        alert("state = " + state);
     
        var grid = $("#grid").data("kendoGrid");
        var items = grid.dataSource.data();
        for (var i = 0; i < items.length; i++) {
                items[i].set("Selection", state);
        }
     
        //For some reason - the dirty flag doesn't get set when I combine it with the data above
        var rows = grid.items();
        alert("rows length " + rows.length)
        for (var i = 0; i < rows.length; i++) {
                alert("html - row " + i);
                $(rows[i].cells[0]).addClass("k-dirty-cell");
                $(rows[i].cells[0]).append("<span class='k-dirty'></span>");
        }
    }

  8. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 13 Sep Link to this post

    Hello Terry,

    I'm not able to re-create the behavior you have described applying the code snippets to the code-library project. Could you please provide a small runnable sample which to demonstrate the problems you are facing.

    Regards,
    Rosen
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Terry
    Terry avatar
    31 posts
    Member since:
    Jun 2016

    Posted 13 Sep in reply to Rosen Link to this post

    Rosen - I see what was different with mine from the example.  I had a bound column.  The example has a column template along with the client and header templates.  I changed mine to be like the example.  So the select all functionality is working great. 

    The single selection sort of works.  But I'm hoping you can help me improve it.  The single selection only sets the checkbox.  It doesn't set the dirty flag.  Below is the function I copied from the example.  I added section to set the dirty flag.  Mine doesn't work.  Can you show me how to set the dirty flag? 

    $(function () {
        $('#grid').on('click', '.chkbx', function () {
            var checked = $(this).is(':checked');
            var grid = $('#grid').data().kendoGrid;
            var dataItem = grid.dataItem($(this).closest('tr'));
            dataItem.set('Selection', checked);
     
            //Trying to set the Dirty Flag - but this doesn't work
            var tr = $(this).closest("tr");
            tr.addClass("k-dirty-cell");
            tr.append("<span class='k-dirty'></span>");
        })
    })

  10. Terry
    Terry avatar
    31 posts
    Member since:
    Jun 2016

    Posted 13 Sep in reply to Terry Link to this post

    Rosen - I also see a problem with how my select all function is working.  It's setting the checkbox for all of the rows on the datasource.  So it's setting rows that aren't showed because of filtering.  The example is smart enough to only look at the rows that are shown. 

    Below is the code I have for setting the dirty flag on the select all function.  If there is not a way to set the dirty flag on only the rows that are shown.  Then I will do this just like the example.  So in that case, I don't need to set the dirty flag on the single selection.  I really like the dirty flag showing the user what's changed.  But in this case, the only field that can be changed in the grid is the selection field.  So we don't necessarily need the dirty flag.  So unless you know how to only set the dirty flag for rows that are shown, then I'll do the select all and single selection just like the example.  Thanks for all of your help.

    Here's how I'm setting the dirty flag on the Select All functionality.

    //Set the dirty flag
    var rows = grid.items();
    for (var i = 0; i < rows.length; i++) {
            $(rows[i].cells[0]).addClass("k-dirty-cell");
            $(rows[i].cells[0]).append("<span class='k-dirty'></span>");
    }

  11. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 14 Sep Link to this post

    Hi Terry,

    Setting the dirty flag when clicking a single checkbox will require handling the Grid's dataBound event. This is needed in order to make sure the grid is done re-rendering after the change of the field, before trying to get the row element. Something similar to the following (again using the code-library as a base):

            $('#persons').on('click', '.chkbx', function () {
                var checked = $(this).is(':checked');
                var grid = $('#persons').data().kendoGrid;
                var dataItem = grid.dataItem($(this).closest('tr'));

                grid.one("dataBound", function () {                
                    this.items().filter("[data-uid=" + dataItem.uid + "]")
                        .children()
                        .last()
                        .addClass("k-dirty-cell")
                        .prepend("<span class='k-dirty'></span>");
                });

                dataItem.set('IsAdmin', checked);

            });

    Regarding your other question. In order to get only the current view of the data, you should use the DataSource view method instead of DataSource data.

    Regards,
    Rosen
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready