Solved

Cannot access contenteditable div tag value in a datagrid

Posted on 2003-11-19
13
889 Views
Last Modified: 2012-08-13
I am building a content management system and am using the MSHTML editing platform. Basically I have a contenteditable div tag where the user can perform basic word processing functions, like bold, italics and add links. The contenteditable div tag is being dynamically filled and placed on the page using a DataGrid (the contenteditable div is inside of  a <edititemtemplate>). Also inside of the same edititemtemplate column is 3 other server controls (<asp:textbox>). This DataGrid also has an editcommandcolumn with an Edit, Update and Cancel button. Once the Update button is clicked I need to be able to grab the new text (using an Update subroutine) that is inside of the contenteditable div tag as well as all of the other server controls. So far, I can easily access the textbox's data by using:
 
Dim strDayTitle as String = CType(E.Item.FindControl("txtboxDayTitle"), TextBox).Text

I've tried accessing the contenteditable div tag's data by using:

Dim strDayText as String = CType(E.Item.FindControl("oDiv"), HtmlGenericControl).InnerHtml

But I keep receiving this error, "System.NullReferenceException: Object reference not set to an instance of an object." I've even tried this:

Dim strDayText as String = oDiv.InnerHtml

But I keep receiving the same error as above. How do I get the InnerHtml value out of a div tag in a DataGrid?

Thanks for your thoughts,

-Shamus
0
Comment
Question by:shammyd
  • 6
  • 5
13 Comments
 
LVL 12

Expert Comment

by:roverm
ID: 9787135
You could try to dig a little deeper into the datagrid (and the locals window in debugmode):

Dim obj As TextBox = DataGrid1.Items(e.Item.ItemIndex).Cells(4).FindControl("txtboxDayTitle")

Of course, you need to change the Cells(4) into the column number the DIV tag is in.

D'Mzz!
RoverM

0
 
LVL 12

Expert Comment

by:roverm
ID: 9816619
Any progress here?
0
 

Author Comment

by:shammyd
ID: 9819322
Roverm, I tried your suggestions, but they didn't work either.... but I think I figured out why. The div tag that I need to get the data from, because it isn't a server control, hasn't been instantiated yet, so upon postback there is no "oDiv" object! Now I just need to figure out how to either build the contenteditable div structure into a custom server control (and add it's contents to viewstate) or have a Page Unload subroutine run and pass the div's data into something that I can access.

Thanks for you response. I will post a solution once I figure out what I am going to do...

-Shamus

0
 
LVL 12

Expert Comment

by:roverm
ID: 9819367
That's correct. I guessed that you used a server control.
What about placing a TextBox (Textmode = multiline) inside the DIV? This way you can use a serverside control.
0
 

Author Comment

by:shammyd
ID: 9819463
That is a good idea, but if I did that I wouldn't be able to use the word processing features (bold, italics, adding links, etc) that the contenteditable div tag provides. I've wanted to look into creating the div tag on the server side via some server control (asp:literal or asp:label or etc), but it looks like most of these controls use a span tag, and I need a div tag so I can add the contenteditable attribute to it.

What a mess...
0
 
LVL 12

Accepted Solution

by:
roverm earned 125 total points
ID: 9820303
You can have bold etc. in a textarea (that is a multiline textbox).
Take a look here:
http://www.interactivetools.com/products/htmlarea/

D'Mzz!
RoverM
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:shammyd
ID: 9820759
Hmmmm, that is very interesting! I wasn't aware that you could build a textarea that can bold, italics, etc. What I created was, again, using the contenteditable attribute of the div tag, as laid out in this tutorial:

http://msdn.microsoft.com/library/default.asp?url=/workshop/browser/mshtml/overview/mshtml_editing_ovw_entry.asp

Now, I just need to see if I can add this to an asp.net server control (asp:textbox with multiline). I will write back and let you know if I get it working... and if it works you definately deserve the points!

Thanks for your time.
0
 
LVL 12

Expert Comment

by:roverm
ID: 9821001
If you need some help in getting the HTMLArea to work just let me know.
I've used it a lot! ;-)
0
 

Author Comment

by:shammyd
ID: 9826907
Just a quick update... I first created a page to test if I could use an asp:textbox with TextMode="MultiLine" to create the HTMLArea, and sure enough, it works! Then I tried to add the code to my DataGrid... unfortunately .NET changes the name attribute of the textarea once it is placed in the DataGrid from "txtboxDayText" to "myDataGrid:_ctl2:txtboxDayText" (where the ctl2 changes according to which textarea I choose), so the editor_generate() function call at first wouldn't work. So I added a RegisterStartupScript() function like this:

' Create a reference to the TextArea
Dim myTextBox as TextBox = myDataGrid.Items(e.Item.ItemIndex).Cells(2).FindControl("txtboxDayText")

'Set the script
RegisterStartupScript("editorGenerate", "<script language=""JavaScript1.2"" defer>" & vbCrLf & vbTab & "editor_generate('" & myTextbox.UniqueID &"');" & vbCrLf & "<" & "/script>")

Now editor_generate() has the correct name for the textarea (verified by viewing the source code), so it should work... but it doesn't.

Here is the current problem as I see it: HTMLArea code uses the name attribute of the textarea (myDataGrid:_ctl2:txtboxDayText) and the .NET name attribute now has colons in it and colons are not legal characters in JavaScript for objects. Only the underscore, characters and numbers are allowed, at least I thnk this is the rule. The textarea's id attribute would work just fine since it has no colons (myDataGrid__ctl2_txtboxDayText), but the HTML script specifies that it uses the name attribute!

Right now I am trying to figure out how to change the HTMLArea script to use the id attribute instead of the name. Rewriting RegisterStartupScript() will be easy; I just need to change myTextbox.UniqueID to myTextbox.ClientID and now it will reference the id attribute.

This is proving difficult...
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 10268208
No comment has been added lately, so it's time to clean up this TA.
I will leave the following recommendation for this question in the Cleanup topic area:

Accept: roverm {http:#9820303}

Please leave any comments here within the next seven days.
PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!

TheLearnedOne
EE Cleanup Volunteer
0
 

Author Comment

by:shammyd
ID: 10273007
The solution that roverm gave didn't work, but I was able to use a free .NET Rich Text Box control to do what I needed. Here is a link to the control:

http://www.asp.net/ControlGallery/ControlDetail.aspx?Control=1205&tabindex=2

I hope this helps anyone with the same problem!

-Shamus
0
 
LVL 12

Expert Comment

by:roverm
ID: 10276349
Shamus,thanks for sharing your solution!
I would like to suggest a PAQ/Refund here.

D'Mzz!
RoverM
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
Along with being a a promotional video for my three-day Annielytics Dashboard Seminor, this Micro Tutorial is an intro to Google Analytics API data.
Migrating to Microsoft Office 365 is becoming increasingly popular for organizations both large and small. If you have made the leap to Microsoft’s cloud platform, you know that you will need to create a corporate email signature for your Office 365…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now