This is a migrated thread and some comments may be shown as answers.

GridClientSelectColumn - Set iCheck plugin to Checkbox of Grid

2 Answers 20 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tasos Karanicolas
Top achievements
Rank 1
Tasos Karanicolas asked on 21 Aug 2014, 09:28 AM
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>

 

2 Answers, 1 is accepted

Sort by
0
Tasos Karanicolas
Top achievements
Rank 1
answered on 22 Aug 2014, 08:27 AM
anyone?
0
Konstantin Dikov
Telerik team
answered on 23 Aug 2014, 09:34 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Tasos Karanicolas
Top achievements
Rank 1
Answers by
Tasos Karanicolas
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or