Client Side Calculation in Grid Question

[sheykc]

I have a grid that has 2 textboxes and several labels per row. If the user changes a value in the textbox, it needs to update the calculations on that row and in an html table at the bottom.

Currently, I am using server side code with the text_changed event. But if this is a large contract with 1000 items (no they won't use paging), it takes a long time to update the row and then it has to refresh the page, and the grid....yada yada yada.

I was hoping there might be a way to calculate the row, and not lose the value inside of the textboxes, so when I click on save I can still push the updated values into the database.

Can someone help me?

 

[RTomes]

You can use hidden and text form elements to store data and access them with custom attributes on the client. The same hidden and text elements can accessed on the server with DataGridItem.FindControl("lbCustomer2")
The example below is simple and could also be done with the .ClientID of the control. The custom attribute is more versatile and useful for many other situations.

< ItemTemplate>

<input type=text id="lbCustomer1" onchange="getElementByCustomAttribute('input','MyID','<%# DataBinder.Eval(Container.DataItem,"custom_id")%>').value=this.value"
runat="server">

<input type=text id="lbCustomer2" MyID='<%# DataBinder.Eval(Container.DataItem,"custom_id")%>' runat="server">


</ItemTemplate>

It is even better to do this in the OnItemDataBound event

e.Item.FindControl("lbCustomer2").Attributes.Add("MyID", YourCustomValue)

<script language=javascript>
function getInfo(obj,customAttribute){
	if(obj.attributes){
		if(obj.attributes[customAttribute]){
			return obj.attributes[customAttribute].value
		}
	}
	return ""
}

function getElementByCustomAttribute(tagname,customAttribute,value){
var col = document.getElementsByTagName(tagname)
for(var i=0;i<col.length;i++){
if(getInfo(col[i],customAttribute)==value){
return col[i]
}
}
return null
}
</script>

 

[sheykc]

I'll try this and see how it works.

Thanks for your help.

 

[sheykc]

I'm confusing myself on this code. I guess I'm not sure if I'm doing this right.

Currently, before modifying I have this:

<ItemTemplate>
   <asp:Textbox id="txtProjUnits" Width="50px" autopostback=True OnTextChanged="Units_Changed" onkeypress="return noenter()" Text='<%# DataBinder.Eval(Container, "DataItem.ProjUnits")%>' Runat="server"></asp:Textbox>

<asp:Label id="lblProjUnits" Width="50px" Text='<%# DataBinder.Eval(Container, "DataItem.ProjUnits")%>' Runat="server"></asp:Label>
</ItemTemplate>

Depending on another value, I set the visible to true/false in the itemdatabound.

So, going by your code, I remove the <asp:textbox> and insert both <input>'s?

Do I replace "custom_id" with my "ProjUnits" value?

You mention it is "even better" to do in the itemdatabound? Can I do that instead of the 2 input boxes or in addition to the 2 boxes?

I hope I'm not confusing you now....

Thanks.

 

[RTomes]

What is shown above is just another way to reference elements on the client with javascript.
Repeater and datagrid items are assigned a clustered client side ID attribute when they are rendered.
This just gives you a way of accessing elements on the client with ID values that make sense to your code.
The fact if it is a <input <asp:textbox <asp:dropdown is irrelevant.