Reading datagrid row contents client-side
Posted on 2004-09-13
Siuppose I have a datagrid with a checkbox column and several data columns.
If the user clicks anywhere on a row except on the checkbox then I need to call client-side function f1, which needs access to (a subset of) the values from the clicked row.
If the user clicks on the checkbox, then function f2 is executed with (in this particular case only) the same arguments (but it could be a different subset)
I know I can do this by setting up handlers server side in the ItemDataBound handler, e.g.:
oItem.Attributes("onclick") += GridRowClickedHandlerName + "(this, " & ClientSideRowHandlerArgs(oRow) + ");"
Here ClientSideRowHandlerArgs( is a function that generates the comma-separated list of arguments for the client-side call.
I can do the same for the onclick of the checkbox. It's arguments will be exactly the same.
The problem is that if I do it that way then I have several copies of the same data on the page:
-the row's cell contents
-the row conclick event handler
-the checkbox onclick event handler
-the viewstate representing the actually contains a copy of each of the above
Altogether that's 6 copies of (at least some of) the data in each row.
There has to be a better way.
One idea I have had is to write the data as a client side array and give the client event handlers and index into this array as a argument. That cuts down the duplication to 2 copies (row + array) and saves on viewstate info too. This is straightforward to implement and flexible enough for my needs. However it still leaves one redundant copy of the data in the form of the array.
My other idea is to develop a client-side function that pullls the row values from the client-side row. This client-side function would be built (written) on the fly server-side. The point of this is that only the server-side knows how the data is put together in a row i.e. which value goes in which column , how to access a value in a given column etc. This function would presumably take at most one parameter whic would be a row index and, via the DOM, extract the values from the relevant row.
I'm looking for guidance on implementing my second suggestion or for alternatives to the approaches outlined.