On Edit, set fields to Read Only

5 posts, 1 answers
  1. Jamie
    Jamie avatar
    16 posts
    Member since:
    Nov 2018

    Posted 08 May 2019 Link to this post

    I have a simple grid that allows the user to add new contacts. Certain need to be pre-populated and set to read only so the user cannot change then.

     

    I've tried using <telerik:GridBoundColumn DataField="STATUS" HeaderText="Status" ReadOnly="true"/> but this hides the column when you try to add a new contact. I've tried various different way to render the column as read only including using a prerender function and attempting to set the read only status using javascript but i'm struggling to find the correct syntax for it.

     

    My full code:

     

    <telerik:RadGrid RenderMode="Lightweight" runat="server" ID="RadGridContats" AutoGenerateColumns="false" AllowPaging="true"
                            OnNeedDataSource="RadGridContats_NeedDataSource" OnUpdateCommand="RadGridContats_UpdateCommand"
                            OnInsertCommand="RadGridContats_InsertCommand" >
                            <MasterTableView DataKeyNames="ContactID" CommandItemDisplay="Top" InsertItemPageIndexAction="ShowItemOnCurrentPage">
                                <CommandItemSettings AddNewRecordText="Add Contact" />
                                <Columns>
                                    <telerik:GridEditCommandColumn />
                                    <telerik:GridBoundColumn DataField="ContactID" HeaderText="ID" ReadOnly="true" Visible="false"
                                        ForceExtractValue="Always" ConvertEmptyStringToNull="true" />
                                    <telerik:GridBoundColumn DataField="Firstname" HeaderText="First Name">
                                    <ColumnValidationSettings EnableRequiredFieldValidation="true" >
                                    <RequiredFieldValidator ForeColor="Red" ErrorMessage="  Please enter a first name"></RequiredFieldValidator>
                                    </ColumnValidationSettings></telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="Lastname" HeaderText="Last Name">
                                     <ColumnValidationSettings EnableRequiredFieldValidation="true" >
                                    <RequiredFieldValidator ForeColor="Red" ErrorMessage="  Please enter a last name"></RequiredFieldValidator>
                                    </ColumnValidationSettings></telerik:GridBoundColumn>   
                                    <telerik:GridBoundColumn DataField="Email" HeaderText="Email">
                                    <ColumnValidationSettings EnableRequiredFieldValidation="true" >
                                    <RequiredFieldValidator ForeColor="Red" ErrorMessage="  Enter a valid email address"></RequiredFieldValidator>
                                    </ColumnValidationSettings></telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="Workphone" HeaderText="Phone" />
                                    <telerik:GridBoundColumn DataField="Title" HeaderText="Title" />
                                    <telerik:GridBoundColumn DataField="Status" HeaderText="Status" ReadOnly="true"/>
                                    <%--<telerik:GridButtonColumn HeaderStyle-Width="20px" Text="&lt;img src=/_layouts/15/Styles/LeadGen/images/deactivate4.png border=0 align=absmiddle alt='Select this Item'&gt;" CommandName="Select"></telerik:GridButtonColumn>--%>
                                </Columns>
                            </MasterTableView>
                            <PagerStyle Mode="NextPrevAndNumeric" />
                        </telerik:RadGrid>

     

    Any help is greatly appreciated.

  2. Attila Antal
    Admin
    Attila Antal avatar
    437 posts

    Posted 13 May 2019 Link to this post

    Hi Jamie,

    To have different forms when editing and inserting in RadGrid, one way would be by using Template columns where you could have a specific form for Inserting and other for editing. You can then disable the control when it enters into edit mode.

    Example: 

    <telerik:GridTemplateColumn DataField="Freight" DataType="System.Decimal"
        FilterControlAltText="Filter Freight column" HeaderText="Freight"
        SortExpression="Freight" UniqueName="Freight">
        <InsertItemTemplate>
            <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Freight") %>'></asp:TextBox>
        </InsertItemTemplate>
        <EditItemTemplate>
            <asp:TextBox ID="TextBox2" runat="server" Text='<%# Eval("Freight") %>' Enabled="false"></asp:TextBox>
        </EditItemTemplate>
    </telerik:GridTemplateColumn>

    You can also try using the built-in column and disable the controls manually in the code behind:


    <telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
        FilterControlAltText="Filter Freight column" HeaderText="Freight"
        SortExpression="Freight" UniqueName="Freight">
    </telerik:GridNumericColumn>


    C# - Code behind:

    protected void RadGrid1_PreRender(object sender, EventArgs e)
    {
        foreach (GridDataItem item in RadGrid1.EditItems)
        {
            GridEditFormItem editItem = item.EditFormItem;
            RadNumericTextBox numericTextBox = editItem["Freight"].Controls[0] as RadNumericTextBox;
            numericTextBox.Enabled = false;
        }
    }


    Result:



    See also:

    Kind regards,
    Attila Antal
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Jamie
    Jamie avatar
    16 posts
    Member since:
    Nov 2018

    Posted 14 May 2019 in reply to Attila Antal Link to this post

    Morning Attila, thank you or the code samples so far. The methods you posted do the opposite of what I need, I need the Insert template to have a read only field and for that field to be editable in the edit template.

     

    The logic behind this is that when a Contact is added, it will insert with the default status of "Active". You can then edit the contact and mark it as Inactive. I've tried using your code and reversing it to show as read only on insert and as editable on edit but can't make any progress.

     

    This is what I have:

     

     protected void RadGridContats_PreRender(object sender, EventArgs e)
            {
                foreach (GridDataItem dataItem in RadGridContats.Items)
                {   
                    dataItem["Status"].Visible = false;
                }
                foreach (GridDataItem item in RadGridContats.EditItems)
                {
                    GridEditFormItem editItem = item.EditFormItem;
                    RadTextBox TextBox = editItem["Status"].Controls[0] as RadTextBox;
                    TextBox.Enabled = false;
                }
            }

    I'm obviously going wrong somewhere but after a day of testing and searching, I'm still not further ahead

  4. Jamie
    Jamie avatar
    16 posts
    Member since:
    Nov 2018

    Posted 14 May 2019 Link to this post

    The last post wasn't that clear so figured I'd explain it a bit better!

     

    My scenario. I have a Contacts grid with multiple fields, ID, First Name, Last Name, Email & Status. The name fields & email are both free text, the ID and Status fields are assigned in the backend when the data is inserted into the database.

     

    Basically I want the Insert function to hide the ID and Status column as they both have default values assigned. However, when you edit the item, I want the Status field to be editable. 

     

    I've tried both these functions:

      protected void RadGridContats_PreRender(object sender, EventArgs e)
            {
                foreach (GridDataItem dataItem in RadGridContats.Items)
                {
                    dataItem["Status"].Enabled = false;
                }
            }
            protected void RadGridContats_ItemDataBound(object sender, GridItemEventArgs e)
            {
                GridDataItem dataItem = e.Item as GridDataItem;
                dataItem["Status"].Enabled = false;
            }

    How do I adapt your previous code Attila:

    protected void RadGrid1_PreRender(object sender, EventArgs e)
    {
        foreach (GridDataItem item in RadGrid1.EditItems)
        {
            GridEditFormItem editItem = item.EditFormItem;
            RadNumericTextBox numericTextBox = editItem["Freight"].Controls[0] as RadNumericTextBox;
            numericTextBox.Enabled = false;
        }
    }

     

    To work on the insert item and not edit item?

     

    Kind regards,

  5. Answer
    Attila Antal
    Admin
    Attila Antal avatar
    437 posts

    Posted 17 May 2019 Link to this post

    Hi Jamie,

    Please check out the How To Distinguish Edit or Insert Mode article to get a better understanding on the two different modes and when to access controls, values accordingly. Furthermore, the Accessing Cells and Rows article would provide you with a good overview of how to access values, cells, controls in cells and more.

    The following example snippet will disable the TextBox when inserting a new item:

    protected void RadGrid1_PreRender(object sender, EventArgs e)
    {
        RadGrid grid = sender as RadGrid;
     
        // Edit items
        foreach (GridDataItem item in grid.EditItems)
        {
            //GridEditFormItem editItem = item.EditFormItem;
            //RadNumericTextBox numericTextBox = editItem["Freight"].Controls[0] as RadNumericTextBox;
            //numericTextBox.Enabled = false;
        }
     
        // If the grid has an insert item rendered
        if (grid.MasterTableView.IsItemInserted)
        {
            // get the insert item
            GridEditFormInsertItem insertItem = grid.MasterTableView.GetInsertItem() as GridEditFormInsertItem;
            // find the controls in the insert item
            RadNumericTextBox numericTextBox = insertItem["Freight"].Controls[0] as RadNumericTextBox;
            // disable the controls
            numericTextBox.Enabled = false;
        }
    }

    If you would like specific Forms different for both insert and edit mode, you may consider using the options I have listed in my previous reply such as the Form Template, WebUserControls, etc..

    Kind regards,
    Attila Antal
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top