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

[Solved] GridClientSelectColumn - Set iCheck plugin to Checkbox of Grid

2 Answers 117 Views

Grid

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

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 ?

$('.RadGrid input').iCheck();
$('div.RadGrid input[type="checkbox"]').iCheck();
$('input[type="checkbox"]').iCheck();
$('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

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.