We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Applying iCheck on checkboxes when grid is fully loaded

Thread ID:

Created:

Updated:

Platform:

Replies:

119989 Aug 20,2015 01:30 PM UTC Aug 21,2015 12:43 PM UTC ASP.NET Web Forms 4
loading
Tags: Grid
Calissi
Asked On August 20, 2015 01:30 PM UTC

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
Replied On August 20, 2015 01:33 PM UTC

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 [Syncfusion]
Replied On August 21, 2015 09:27 AM UTC

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
Replied On August 21, 2015 09:35 AM UTC

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 [Syncfusion]
Replied On August 21, 2015 12:43 PM UTC

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;