GridClientSelectColumn - Set iCheck plugin to Checkbox of Grid

[Tasos Karanicolas]

Hi Team

The last column of my grid is a GridClientSelectColumn. I am trying to set this amazing iCheck jquery plugin to all checkboxes of the grid

How can i do this ? How can i access the checkboxes of the grid ?

I have already tried these options but without success....any idea ?

1. $('.RadGrid input').iCheck();
2. $('div.RadGrid input[type="checkbox"]').iCheck();
3. $('input[type="checkbox"]').iCheck();  
4. $('input').iCheck({
                  checkboxClass: 'icheckbox_square',
                  increaseArea: '20%' // optional
              });
                    
             

<telerik:GridClientSelectColumn UniqueName="shop" HeaderText="Buy" >
         <HeaderStyle HorizontalAlign="Center" />
          <ItemStyle HorizontalAlign="Center"  />
  </telerik:GridClientSelectColumn>

 

[Tasos Karanicolas]

anyone?

[Konstantin Dikov]

Hello Tasos,

I have tested your approaches on my end, and an array with all inputs is returned correctly on my end. 

For your convenience, following is the simple scenario that I have tested on my end:

<asp:ScriptManager ID="RadScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
    </Scripts>
</asp:ScriptManager>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function pageLoad() {
            var inputs = $telerik.$('.RadGrid input');
            var checkBoxes = $telerik.$('div.RadGrid input[type="checkbox"]');
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" Width="500px">
    <MasterTableView CommandItemDisplay="Top">
        <Columns>
            <telerik:GridClientSelectColumn></telerik:GridClientSelectColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings Selecting-AllowRowSelect="true"></ClientSettings>
</telerik:RadGrid>

On a side note, please ensure that you do not have a RadFormDecorator on the page, because it modified the rendering of the inputs.


Regards,
Konstantin Dikov
Telerik