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

Set RadGrid column as readonly in javascript

1 Answer 406 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Prathibarani
Top achievements
Rank 1
Prathibarani asked on 20 Jun 2018, 06:54 PM

Hi,

I have GridTemplate column with RadioButtonList and Telerik GridCheckBox column along with regular GridBoundColumns in RadGrid. In my javascript depending upon condition, I need to make GridTemplate column with RadioButtonList and Telerik GridCheckBox column as readonly and toggle it to be editable depending on condition.

I am not finding any code to make those 2 columns as readonly.

Please suggest.

 

Thank You

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 22 Jun 2018, 04:22 PM
Hello Prathibarani,

Grid columns can be made read only on the server-side only as this changes how they render - they don't go into edit mode to render editable controls.

Nevertheless, since our controls provide rich client-side API you can disable them on the client. For example, you can traverse the DOM to get their objects that you want to disable (e.g., in the current grid row, or in the entire grid), and use their set_enabled() and get_enabled() methods.

Here is a basic example that shows a simple DOM traversal and using the API of the controls:

<asp:Button Text="toggle enabled state" ID="btn1" OnClientClick="toggle(); return false;" runat="server" />

<div class=
"container">
    <telerik:RadRadioButtonList runat="server" ID="rrbl1">
        <Items>
            <telerik:ButtonListItem Text="first" />
            <telerik:ButtonListItem Text="second" />
        </Items>
    </telerik:RadRadioButtonList>
    <telerik:RadCheckBox runat="server" ID="rcb1" Text="checkbox"></telerik:RadCheckBox>
</div>
 
<script>
    function toggle() {
        //this begins with the simple container in the markup above, tweak as necessary
        //for example, add specific CssClass to those controls you want to toggle on the client
        //so you can distinguis them from other instances on the page
        $telerik.$(".container").find(".RadRadioButtonList, .RadCheckBox").each(function (index, elem) {
            //read more about getting a control reference on the client-side in the following article:
            if (elem && elem.control && elem.control.set_enabled) {
                elem.control.set_enabled(!elem.control.get_enabled());
            }
        });
    }
</script>

I must also note that POST requests can be tampered with, so even if the controls are disabled, a POST query can still contain values for them, so best practices dictate that either the editable controls do not exist on the client, or there is strong corresponding validation on the server.


Regards,
Marin Bratanov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Prathibarani
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or