Workarounds to access the Readonly Textbox value on server side when changed through client side script

Question

I have a Date Textbox in each row of a Grid View. As the users must not be allowed to put their own values in the text box, we have set the property as ReadOnly="true". And provided a calender java-script plug-in which sets the Textbox value. Now when I am trying to access the date Textbox on save click, the Textbox value is not persisted.

I knew about this issue and resolution for this too. We need to set the readonly attribute on server side to resolve this issue. But my biggest concern here is, I have placed the Textbox inside the Template field of Grid view. So I need to loop through each row of the Grid view, then get the reference to the date Textbox and then set the readonly attribute to readonly. Looks very cumbersome. Could anybody suggest other alternatives or work arounds.

Code as Below

<asp:GridView ID="gv_sample" runat="server" AutoGenerateColumns="false">
 <Columns>
   <asp:TemplateField>
     <ItemTemplate>
      <table cellpadding="0" cellspacing="0" border="0">
       <tr>
        <td>
         <asp:TextBox runat="server" ID="txtByWhen" ReadOnly="true" CssClass="inputbox" Text='<%#Eval("ByWhen") %>'></asp:TextBox>
       </td>
        <td style="padding-left: 2px;">
         <img src="../Images/dateico.gif" alt="Select a date" title="Select a date" 
         onclick="JavaScript:return showCalendar('<%#((GridViewRow)Container).FindControl("txtByWhen").ClientID %>','dd/mm/y');" />
      </td>
     </tr>
    </table>
   </ItemTemplate>
  </asp:TemplateField>
 </Columns>
</asp:GridView>

score 1 · Answer 1 · answered Jun 22 '17 at 06:03

Try not to make the textbox directly readonly by changing its properties.

instead of that we can add the following line of code in the code-behind and make the textbox readonly but still we can retain its changed value at the client through postbacks.

TextBox1.Attributes.Add("readonly", "readonly");

score 1 · Answer 2 · edited May 23 '17 at 11:47

You are right, the solution is to set the Attribute in the Codebehind. (see this question)

You don't have to loop through the GridView, just do it in the RowCreated-Event:

protected void Page_Load(object sender, EventArgs e)
{
    gv_sample.RowCreated += new GridViewRowEventHandler(gv_sample_RowCreated);
}

void gv_sample_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        TextBox txtByWhen = (TextBox)e.Row.FindControl("txtByWhen");
        txtByWhen.Attributes.Add("readonly", "readonly");
    }
}

suryakiran · Accepted Answer · 2011-09-12T08:03:50.930

Got another cool work around. Just replace the ASP Text box with HTML input type text and adding runat="server" attribute, further adding readonly attribute. Sample code as below

<asp:GridView ID="gv_sample" runat="server" AutoGenerateColumns="false">
 <Columns>
   <asp:TemplateField>
     <ItemTemplate>
      <table cellpadding="0" cellspacing="0" border="0">
       <tr>
        <td>
         <input type="text" runat="server" id="txtByWhen" readonly="readonly" class="inputbox"
         style="width: 50px;" value='<%#Eval("ByWhen") %>' />
       </td>
        <td style="padding-left: 2px;">
         <img src="../Images/dateico.gif" alt="Select a date" title="Select a date" 
         onclick="JavaScript:return showCalendar('<%#((GridViewRow)Container).FindControl("txtByWhen").ClientID %>','dd/mm/y');" />
      </td>
     </tr>
    </table>
   </ItemTemplate>
  </asp:TemplateField>
 </Columns>
</asp:GridView>

On the server side we can just add the below code for getting the value

foreach (GridViewRow gvr in RSGV_ScoreCard.Rows)
{
 using (HtmlInputText txtByWhen = (HtmlInputText)gvr.FindControl(STR_BYWHEN))
  {
    string date=txtByWhen.Value.Trim();
  }
}

Hope this will save lot of coding.

score 0 · Answer 4 · answered Dec 03 '14 at 08:52

finally this got resolved for me :)

what i did is removed the read only property from the textbox and added a ForceReadOnly class in which i am returning nothing like below:

    $.fn.ForceReadOnly =
function () {
    return this.each(function () {
        $(this).keydown(function (e) {
            var key = e.charCode || e.keyCode || 0;
            return (key == 9);
        });
    });
};


$(".ForceReadOnly").ForceReadOnly();

so we got that readonly from event not as property

Workarounds to access the Readonly Textbox value on server side when changed through client side script

4 Answers4

Linked