Applying iCheck on checkboxes when grid is fully loaded

[Calissi]

I need to apply a special function on each newly created rows with a datasource field as boolean.

I have to call this:

function applyiCheck(e) {

        $('.rowCheckbox').iCheck({

            checkboxClass: 'icheckbox_minimal',

            radioClass: 'iradio_minimal',

            increaseArea: '20%' // optional

        });

}

on that column:

...

col.Field("IsNew").HeaderText("New").Template(true).TemplateID("#IsNewTemplate").TextAlign(TextAlign.Center).Width(75).Add();

...

when the grid has finished drawing to apply style to the checkbox input.

As a test, I have added:

...

})

        .ClientSideEvents(evt => evt.RowSelected("applyiCheck"))

And the javascript is working.

I've tried ActionBegin with no luck...

Any ideas ?

[Calissi]

Another thing, When I add a '?' at the header text, it causes an error in javascript:

...
col.Field("IsNew").HeaderText("Is It New ?").Template(true).TemplateID("#IsNewTemplate").TextAlign(TextAlign.Center).Width(75).Add();
...

Error:

Uncaught Error: Syntax error, unrecognized expression: #FlatGridId It New ?6_Template

[Madhu Sudhanan P]

Hi Calissi,

Thanks for using Syncfusion products.

Query #1: “I need to apply a special function on each newly created rows with a datasource field as boolean.”

We can use the templateRefresh client side event to render the custom controls inside grid cells. The templateRefresh event will be triggered every time the template cell is accessed. Please refer the below code snippet.

[Template]

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

    <input type="checkbox" class="rowCheckbox" {{if IsNew }} checked {{/if}}/>

</script>

<div class="row">

[Grid code]

@(Html.EJ().Grid<Orders>("Grid")

      .Datasource((IEnumerable<Orders>)ViewBag.griddata)

      .AllowPaging()

      .PageSettings(page=>page.PageSize(3))

      .Columns(col => {

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

        col.Field("IsNew").HeaderText("Is it New").Template(true).TemplateID("#IsNewTemplate").Add();   

    })

    .ClientSideEvents(evt=>evt.TemplateRefresh("renderICheck"))

)

</div>

[templateRefresh event]

<script type="text/javascript">

    function renderICheck(args) {

              $('.rowCheckbox', args.cell).iCheck({

                checkboxClass: 'icheckbox_minimal',

                radioClass: 'iradio_minimal',

                increaseArea: '20%' // optional

            });       

    }

</script>

For your convenience we have also created a simple sample with the above code snippets and the same can be downloaded from the below location.

Sample Location: http://www.syncfusion.com/downloads/support/directtrac/143066/ze/UsingICheck1766284271

And also please refer the below links for using column template feature in grid.

http://docs.syncfusion.com/aspnetmvc/grid/columns#template

http://helpjs.syncfusion.com/js/api/ejgrid#events:templaterefresh

Query #2: “Another thing, When I add a '?' at the header text, it causes an error in javascript”

We have analyzed the reported issue and considered this requirement “Script error when using question mark presents in headerText of template column” as bug and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Please let us know if you have any queries.

Regards,
Madhu Sudhanan. P

[Calissi]

Thanks, you are amazingly fast !

I don't see this event... I suppose that the ClientSide event is in on new Syncfusion version ?

[Madhu Sudhanan P]

Hi Calissi,

Thanks for your update.

The templateRefresh event is added in our Essential Studio Volume 1, 2015 Service pack 1 release. And hence to use the templateRefresh event, we suggest you to upgrade to our latest Essential Studio v13.2.0.34.

Please follow the below steps to upgrade to 13.2.0.34.

1.             Download and install the Essential Studio v13.2.0.34 from the below link.

        http://www.syncfusion.com/forums/119866/essential-studio-2015-volume-2-service-pack-release-v13-2-0-34-available-for-download

  

  2.      Replace the Syncfusion DLLs, scripts, and CSS in your project from the following location.

            Scripts and CSS: C:\Program Files (x86)\Syncfusion\Essential Studio\XX.X.X.XX\JavaScript\assets

            DLLs: C:\Program Files (x86)\Syncfusion\Essential Studio\ XX.X.X.XX \Assemblies

Here XX.X.X.XX denotes the product version(13.2.0.34).
If you are not willing to upgrade then we can use the queryCellInfo event to achieve the requirement.

@(Html.EJ().Grid<Orders>("Grid")

. . . .

    .ClientSideEvents(evt => evt.QueryCellInfo("renderICheck"))
)

function renderICheck(args) {

        if (args.column.field == "IsNew") { //To skip other cells

            $('.rowCheckbox', args.cell).iCheck({

                checkboxClass: 'icheckbox_minimal',

                radioClass: 'iradio_minimal',

                increaseArea: '20%’           

         });

        }
    }

The queryCellInfo event will be triggered when every time a cell is accessed and hence to check the template cell, we used the field name of the column(args.column.field == “IsNew”).

Please let us know if you have any queries.

Regards,
Madhu Sudhanan. P