GridCheckbox column disabled, but not greyed out

[Carl]

I ran into an issue where I needed the Checkbox column of my radgrid to look like it was enabled (because it was hard to see the disabled checkboxes), but not act like it was enabled.

The reason I'm posting this here is because I couldn't find any easy solution on the internet or forum searches.

The first thing I did was not use a GridCheckboxColumn, I used a GridTemplateColumn with a checkbox template.

I then put onclick="return false;" in the checkbox attributes so that it doesn't do anything - effectively disabling the checkbox.

Here's the code in case it can help someone else:

<telerik:GridTemplateColumn DataField="MyDataField" DataType="System.Boolean" FilterControlAltText="Filter MyDataField column" HeaderText="My Data Field" SortExpression="MyDataField" UniqueName="MyDataField" CurrentFilterFunction="Contains" AutoPostBackOnFilter="true">
         <ItemTemplate>
             <asp:CheckBox ID="MyDataField" Checked='<%# Eval("MyDataField") %>' runat="server"  onclick="return false;"  />
         </ItemTemplate>
</telerik:GridTemplateColumn>

 

 

 

 

[Attila Antal]

Hello Carl,

Thank you for sharing this example with the Community. 

Just in case somebody might be looking for an alternative approach, here are two more examples:

1. Disable Pointer events using CSS

Assign a CSS class selector to the CheckBox

<telerik:GridTemplateColumn DataField="MyDataField" DataType="System.Boolean" FilterControlAltText="Filter MyDataField column" HeaderText="My Data Field" SortExpression="MyDataField" UniqueName="MyDataField" CurrentFilterFunction="Contains" AutoPostBackOnFilter="true">
    <ItemTemplate>
        <asp:CheckBox ID="MyDataField" Checked='<%# Eval("MyDataField") %>' CssClass="mycheckbox" runat="server" />
    </ItemTemplate>
</telerik:GridTemplateColumn>

 

Write the CSS rule that will disable the Pointer events for that input. 

.mycheckbox input {
    pointer-events: none;
}

 

2. Cancel the click event using jQuery

Using the same CSS class as the selector, we can target the input directly and cancel the click event with the following jQuery code:

$(document).on('click', '.mycheckbox input', function (e) {
    e.preventDefault();
})

 

Regards,
Attila Antal
Progress Telerik