checkbox column style in grid and in edit mode (inline)

[Carlos]

Hi,

How I can set style for a checkbox column in list and edit mode. When I click in checkbox, checkbox style change to native style:

This is my code:

col.Field("informe").Width("300").Template("<input class='checkboxstyle' type='checkbox' {{if informe}} checked='checked' {{/if}} >").EditTemplate(et => { et.Create("create").Read("read").Write("write"); }).EditType(EditingType.BooleanEdit).DisplayAsCheckbox(true).Type("boolean").Add();

function templateRefresh(args) {
        $(args.cell).find(".checkboxstyle").ejCheckBox({
            size: 'Medium',
            showRoundedCorner: true
        });
    }
    function create() {
        return $("<input class='checkboxstyle'/>");
    }
    function write(args) {
        args.element.ejCheckBox({
            checked: args.rowdata["informe"],
            size: 'Medium',
            showRoundedCorner: true
        });
    }
    function read(args) {
        return args.ejCheckBox("isChecked");
    }

thank you.

[Padmavathy Kamalanathan]

Hi Carlos,

Thanks for contacting Syncfusion Support.

QUERY: When i click in checkbox, the checkbox style change to native style

You have used both the column template and edit template of grid for the "checkbox"  column. If you need to edit the checkbox column in double click, you need not to use the edit template and column template of grid. Simply by using the EditType as "BooleanEdit", the checkbox column will work fine.

Please check the below code snippet,

  

@(Html.EJ().Grid<object>("Grid1").Datasource((IEnumerable<object>)ViewBag.data).AllowPaging() 

                   .EditSettings(edit => { edit.AllowAdding().AllowDeleting() 

                    .AllowEditing().EditMode(EditMode.Normal); }) 

                   .Columns(col => 

                   { 

                       col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add(); 

                       col.Field("BooleanColumn").HeaderText("Checkbox") 

                       .EditType(EditingType.BooleanEdit).Add(); 

  

                   })) 

If you need to edit the checkbox column in single click and update the value to the data source, we suggest you to check the below Knowledge Base help documentation,

https://www.syncfusion.com/kb/9212/how-to-update-checkbox-column-on-single-click 

Using the above method, you can achieve single click edit for the checkbox column.

Kindly get back to us for further assistance.

Regards,

Padmavathy Kamalanathan

[Carlos]

Sorry, but what I want is to define the style of the checkbox both in list mode and in edit mode. The style I use is this:

and I want apply this style to my checkbox column. ejCheckBox({
            checked: args.rowdata["informe"],
            size: 'Medium',
            showRoundedCorner: true Thank you.

[Padmavathy Kamalanathan]

Hi Carlos, 

  

Sorry for the inconvenience caused 

  

QUERY:  change style of the checkbox 

  

We have achieved your requirement by following the below steps, 

 

1. Rendering ej Checkbox in the TemplateRefresh event of grid for showing the checkbox with your style customization in normal mode (size and rounded corner) 
2. Rendering ej Checkbox in the write event of Edit Template of grid for showing the checkbox with your style customization in edit mode 
   
3. Changed color of the tick mark of checkbox(as shown in your screenshot) using CSS as shown in the below code,

 

 

  

  

@(Html.EJ().Grid<object>("Grid1").Datasource((IEnumerable<object>)ViewBag.data) 

          .AllowPaging().ClientSideEvents(eve => { eve.TemplateRefresh("templateRefresh"); }) 

     .Columns(col => 

        { 

        col.Field("OrderID").HeaderText("Employee ID").IsPrimaryKey(true).Width(90).Add(); 

        col.Field("BooleanColumn").HeaderText("First Name").Template("#columnTemplate") 

            .EditTemplate(et => { et.Create("create").Read("read").Write("write");  

             }).EditType(EditingType.BooleanEdit).Width(90).Add(); 

    }) 

    ) 

  

<script type="text/x-jsrender" id="columnTemplate"> 

   

    <input type="checkbox" id="Verified" name="Verified" class="checkboxstyle" style="width:30px" /> 

   

</script> 

<script> 

    function templateRefresh(args) { 

     // rendering ej Checkbox in templateRefresh event 

        $(args.cell).find(".checkboxstyle").ejCheckBox({ 

            size: 'Medium', 

            showRoundedCorner: true, 

            checked: args.rowData["BooleanColumn"] //"BooleanColumn" is boolean column's field name 

        }); 

    } 

    function create() { 

        return $("<input class='checkboxstyle'/>"); 

    } 

    function write(args) { 

     // rendering ej Checkbox for edit template 

        args.element.ejCheckBox({ 

            size: 'Medium', 

            showRoundedCorner: true, 

            checked: args.rowdata["BooleanColumn"] //"BooleanColumn" is boolean column's field name 

        }); 

    } 

    function read(args) { 

        return args.ejCheckBox("isChecked"); 

    } 

</script> 

<style> 

 // applying CSS for the checkbox 

.e-chkbox-wrap .e-chk-image.e-checkmark { 

        color: red; 

    } 

</style> 

  

Kindly get back to us for further assistance. 

  

Regards, 

Padmavathy Kamalanathan 

[Carlos]

Thank you Padmavathy:

My grid is in EditMode.Batch. When checkbox lost focus then show this:

Is there something more to do? Thank you very much. Carlos.

[Padmavathy Kamalanathan]

Hi Carlos,

Thanks for your update.

QUERY:  Checkbox style changes in Batch edit mode

  

We are able to reproduce the issue in the "Batch edit mode". While using checkbox in the batch edit mode and rendering the ejCheckbox with style customization in templateRefresh event, ej Checkbox changes to normal checkbox when it enter into edit mode.  So we have modified the solution as follows, 

  

1. Set visibility of actual checkbox column to false and rendered checkbox column using column template(without setting field to it) and TemplateRefresh event. 
2. In the TemplateRefresh  event, we defined the "change" event of checkbox.
3. Updated the actual boolean column using the "setCellValue" method in the checkbox's change event.

In this way, the checkbox remains as ej Checkbox with your style customization and batch editing also will work fine.

Please check the below code snippet,

@(Html.EJ().Grid<object>("Grid").Datasource((IEnumerable<object>)ViewBag.data) 

       .AllowPaging().EditSettings(edit => { edit.AllowAdding() 

          .AllowDeleting().AllowEditing().EditMode(EditMode.Batch); }) 

          .ClientSideEvents(eve => { eve.TemplateRefresh("templateRefresh"); }) 

     .Columns(col => 

     { 

         col.Field("OrderID").HeaderText("Employee ID").IsPrimaryKey(true).Add(); 

         col.Field("BooleanColumn").HeaderText("First Name").Visible(false).Add(); 

         col.HeaderText("Checkbox") 

             .Template("#columnTemplate") 

             .EditType(EditingType.BooleanEdit).Width(90).Add(); 

     }) 

    ) 

  

<script type="text/x-jsrender" id="columnTemplate"> 

   

    <input type="checkbox" id="Verified" name="Verified" class="checkboxstyle" style="width:30px" /> 

   

</script> 

<script> 

    function templateRefresh(args) { 

        var grid = $('#Grid').data("ejGrid"); 

        $(args.cell).find(".checkboxstyle").ejCheckBox({ 

            size: 'Medium', 

            showRoundedCorner: true, 

            checked: args.rowData["BooleanColumn"], 

            //"BooleanColumn" is boolean column's field name 

           change: function (args) { // checkbox's change event 

               var target = args.event.target.closest('tr'); 

               var targetCell = args.event.target.closest('td'); 

                var index = target.rowIndex; // for getting row index 

                var val = args.isChecked; // value of checkbox 

                grid.setCellValue(index, "BooleanColumn", val); 

                // updating BooleanColumn column 

                targetCell.classList.add('e-updatedtd', 'e-icon', 'e-gupdatenotify'); 

                // added class name to edited checkbox column for notifying that  

                the particular checkbox is being updated
 

            } 

        }); 

    } 

</script> 

<style> 

     .e-chkbox-wrap .e-chk-image.e-checkmark { 

        color: red; 

    } 

</style> 

Please check the below screenshot,

Please check the below help documentations,

https://help.syncfusion.com/api/js/ejcheckbox#events:change

https://help.syncfusion.com/api/js/ejgrid#methods:setcellvalue

Kindly get back to us for further assistance.

Regards,

Padmavathy Kamalanathan

[Carlos]

Thank you Padmavathy:

This solution works just fine, but now it doesn´t update the checkbox style when i add a row. What i can do?.

Regards.

Carlos

[Padmavathy Kamalanathan]

Hi Carlos,

Thanks for your update.

QUERY: Update style while adding new record

In order to maintain the customization of checkbox during adding new record, we suggest you to follow the below mentioned steps,

1. Render the ejCheckBox in the "BatchAdd" event with the style customization so that the style will be updated during adding new record.
2. Update the newly added checkbox value to the "BooleanColumn" field value (of the batch changes- args.batchChanges.added) in the "BeforeBatchSave" event of grid. [Since we render checkbox in template and we need to update this value to the "BooleanColumn", we perform this step].

Please check the below code snippet,

@(Html.EJ().Grid<object>("Grid").Datasource((IEnumerable<object>)ViewBag.data) 

                ----------- 

.ClientSideEvents(eve => {  

      eve.TemplateRefresh("templateRefresh").BatchAdd("batch").BeforeBatchSave("save"); }) 

     .Columns(col => 

     { 

         col.Field("OrderID").HeaderText("Employee ID").IsPrimaryKey(true).Width(90).Add(); 

         col.Field("CustomerID").HeaderText("Employee ID").Width(90).Add(); 

         col.Field("BooleanColumn").HeaderText("First Name").Visible(false).Width(90).Add(); 

         col.HeaderText("Checkbox").Template("#columnTemplate") 

             .EditType(EditingType.BooleanEdit).Width(90).Add(); 

     }) 

    ) 

 

 

<script> 

    

     //BatchAdd event
 

    function batch(args) { 

       //render ej Checkbox with style customization  

        args.row.find(".checkboxstyle").ejCheckBox({ 

            size: 'Medium', 

            showRoundedCorner: true 

        }); 

    } 

    //BeforeBatchSave event
 

 

    function save(args) { 

        var addedRows = document.getElementsByClassName("e-insertedrow"); 

        if (addedRows.length) { //checking if new rows are being added 

            for (var i = 0; i < addedRows.length; i++) { 

                var checkBoxElement = document.getElementsByClassName("e-insertedrow")[i] 

                                     .querySelector(".checkboxstyle");  //accessing checkbox element 

                var checkboxInstance = $(checkBoxElement).ejCheckBox('instance');  //checkbox instance 

                var checkboxValue = checkboxInstance.model.checked;  //collecting checkbox value 

                args.batchChanges.added[i].BooleanColumn = checkboxValue;  

                 //setting the checkbox value to the "BooleanColumn" in batchChanges 

            } 

        } 

  

    } 

 

    ---------

</script> 

 

Please check the output screenshot,

Please check the below help documentations,

https://help.syncfusion.com/api/js/ejgrid#events:batchadd

https://help.syncfusion.com/api/js/ejgrid#events:beforebatchsave

Kindly get back to us for further assistance.

Regards,

Padmavathy Kamalanathan