Set RadGrid column as readonly in javascript

[Prathibarani]

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

[Marin Bratanov]

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:

            //link: https://docs.telerik.com/devtools/aspnet-ajax/general-information/get-client-side-reference

            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