Set RadGrid column as readonly in javascript

2 posts, 0 answers
  1. Prathibarani
    Prathibarani avatar
    55 posts
    Member since:
    Mar 2013

    Posted 20 Jun 2018 Link to this post

    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

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4661 posts

    Posted 22 Jun 2018 Link to this post

    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.
Back to Top