Issue with CheckBox in Grid - Batch mode

[Shreesh]

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)

    )

[Shreesh]

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...?

[Petur Subev]

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

 

 

[Shreesh]

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>

[Rosen]

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

 

 

[Terry]

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>");
    }
}

[Rosen]

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

[Terry]

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>");
    })
})

[Terry]

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>");
}

[Rosen]

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