DIV tags within a gridview

Question

User270757467 posted

Hello Group,

I am using a gridview to display some data. I use a template control and inside that I have a <div> where I display the data.  I need to use a DIV because I need to be able to highlight the words inside the tag(using a find and replace routine I wrote) and a text box doesn't allow that from what I have seen. Anyways, when a user types information into the DIV and then click a button(causes a postback) to save the data, the information they entered is gone and what was in the DIV initially returns. Any ideas on how to resolve this? Thanks in advance.

Here is some of the code.

<asp:GridView ID="grdData" runat="server" AutoGenerateColumns="False" AllowSorting="false" CellPadding="4"

              ForeColor="#333333" ShowFooter="True" Width="804px" GridLines="Both">

<Columns>

<asp:TemplateField HeaderText="Text" ItemStyle-Width="400px">

<ItemTemplate>

        <div runat="server" id="text" style="text-align:left" contenteditable="true"><%# Eval("Text") %></div>

<asp:TextBox ID="TestText" runat="server"></asp:TextBox>

</ItemTemplate>

</asp:TemplateField>

VB.NET code behind

Dim rowTextEdit As HtmlGenericControl = CType(rRow.Cells(0).FindControl("text"), HtmlGenericControl)

Answer 1

User-1034726716 posted

You could write a JavaScript function to store the div content in a HiddenField so that you can reference the value HiddenField on Postbacks. For example:

<script language="javascript" type="text/javascript" >
    function CopyToHidden() {
        var hdElement = document.getElementById('<%= HiddenField1.ClientID %>');
        var divElement = document.getElementById('text');
        if(hdElement != null) {
             hdElement.value = EncodeHTML(divElement.innerHTML);
        }
    }


   function EncodeHTML(str)
   {
    if(str != null) {
       str = str.replace(/</g, '&lst;');
       str = str.replace(/>/g, '&gst;');
       return str;
    }
  }

</script>

PS: You may want to see the rendered generated ID of the Div tag so the getElementById will work properly. If you are on .NET 4.0, you can also try looking at ClientIDMode property: https://weblog.west-wind.com/posts/2009/Nov/07/ClientIDMode-in-ASPNET-40

Then at OnClientClick event of your Button, you can do:

OnClientClick="javascript:CopyToHidden()"

Now at the server, you can reference the value from HiddenField like this:

var contentText = string.IsNullOrEmpty(hdlFld.Value) ? hdlFld.Value : (hdlFld.Replace("&lst;", "<").Replace("&gst;", ">"));

//assign it back to your Div
text.InnerHtml = contentText;

Answer 2

User270757467 posted

Thanks for the reply! I will try what you mentioned.