Datagrid Textbox and Javascript syntax problem

[ISPrincess]

I can fill in the text box within the grid in javascript with this:

document.getElementById('datagrid1_0_isSelected').value = '1';

So how can i do it by NOT hardcoding the index ( i am sure my syntax is incorrect):

		document.getElementById('datagrid1_' + SRow.itemIndex + '_isSelected').value = ( document.getElementById('datagrid1_' + SRow.itemIndex + '_isSelected').value == '1' ) ? '0' : '1';

Anyone that could correct my syntax in the second code box, Thank you!!!

PH
I was walking home one night and a guy hammering on a roof called me a paranoid little weirdo.
In morse code.
-Emo Phillips

 

[tgreer]

We need to pick a method and stick with it.

The central problem is this: controls inside ItemTemplates inside DataGrids aren't really controls. Yet. They are just "templates" for controls that will be created at run-time.

So, you can either interact with the results CLIENT-SIDE, by getting the table/row/cell etc., and communicating back to the server code by creating our own private little "viewstate" (the textarea technique I showed you above), OR, and here's the big secret:

Attach server event handlers to the DataGrid, and use FindControl to get the dynamically created "template" control.

For example, in a scenario where we want to get the value of a textbox control (created dynamically via ItemTemplate), we might grab onto the DataGrid's SelectedIndexChanged event, and code a handler like so:

private void DataGrid1_SelectedIndexChanged(object sender, System.EventArgs e)
{
   TextBox b = (TextBox) DataGrid1.Items[DataGrid1.SelectedIndex].FindControl("TextBox1"); 
   }
}

What this does is "find" the particular TextBox1 that exists in the particular DataGrid row the user selected. Notice that we have to declare our own TextBox to work with it. Confusing, and not very efficient because it requires a server postback. But you could do this, to store the values of each row/control as the user selects them. Store them all up in an ArrayList until the user clicks "submit", and then process the ArrayList, which will contain every row the user selected.

A second server-side technique is to add an event handler to the ItemTemplate. Just as we're currently adding "onclick" for client side, you could add "onTextChanged" for a server-side method.

I know this didn't address this post, but I started it in the other thread and didn't want to throw this whole message away.

Let me start over in another post.


Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting

 

[ISPrincess]

I agree that we need to stick with a method, my original method WAS to update a textbox within a datagrid row, but not knowing javascript and also beginning to realize my own issues between server/client side, we ended up with the textarea solution you had some up with on the other thread.

Once I realized I could do that (update a textbox outside of a grid), I also realized I could update the textbox WITHIN the grid and get the results server side also.

As I said, in my first post within this thread - the first hardcoded code box works to update the text in row 0 of the datagrid. I thought that the second code box just had a syntax error in the javascript. Are you saying there is NOT a way to get the rowindex of the datagrid row that was clicked and then use that as a variable with in the script in order to access that row's text box?


PH
I was walking home one night and a guy hammering on a roof called me a paranoid little weirdo.
In morse code.
-Emo Phillips

 

[tgreer]

Ok, to manipulate, via JavaScript, the contents of a textbox (a textbox created in a DataGrid in an ItemTemplate declaration), is to grab it by it's "id".

The "id" is created at run time, based on the template's id, which is "isSelected". The id will end up looking like:

id="datagrid1__ctl3_isSelected"

This is the "third" textbox created out of the template.

But that still isn't very dynamic. You would have to "know" the "ctl3", and that all depends on which row the user selects.

In our sample project, we've added an onclick to the table row. We have a JavaScript function which handles it. The entire row is passed in via the "this" keyword, and stored in a JavaScript variable "SRow".

The Textbox is in a cell in the row. We happen to know it's the second cell, right? So to retrieve the textbox control out of the second cell of the current row:

SRow.cells[1].childNodes[0]

That will give you the textbox, because the textbox is a child of the cell.

A fully expanded snippet to set the value of the textbox:

var myTB = document.getElementById(SRow.cells[1].childNodes[0].id);
myTB.value = "Hello world!");

Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting

 

[tgreer]

Take that final ")" out of the final code snippet. It's a typo:

myTB.value = "Hello world!";



Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting