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

GridCheckbox column disabled, but not greyed out

1 Answer 18 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Carl
Top achievements
Rank 1
Carl asked on 21 Apr 2021, 04:33 PM

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>

 

 

 

 

1 Answer, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 26 Apr 2021, 09:45 AM

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

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Tags
Grid
Asked by
Carl
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Share this question
or