Folks,
I promise to share the solution with as many people as there are interested parties 8-)! Thanks in advance.
Env.: VS 2008, .NET 3.5.
I have the following
datagrid on a user control with RowNbr, LastName, FirstName, MiddleName, NameFormat and CharsLeft, in 5 rows:
<asp:Panel ID="Panel1" runat="server">
<asp:Table ID="Table1" runat="server">
<asp:TableRow ID="TableRow1" runat="server">
<asp:TableCell ID="TableCell1" runat="server" ColumnSpan="6">
<asp:DataGrid runat="server" ID="dgNames" AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn DataField="RowNbr" HeaderText="Row#">
</asp:BoundColumn>
<asp:TemplateColumn HeaderText="Last Name">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtLastName" Columns="18" Text='<%# DataBinder.Eval(Container, "DataItem.LastName") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="First Name">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtFirstName" Columns="18" Text='<%# DataBinder.Eval(Container, "DataItem.FirstName") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Middle Name">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtMiddleName" Columns="18" Text='<%# DataBinder.Eval(Container, "DataItem.MiddleName") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Name Format" ItemStyle-Wrap="false">
<ItemTemplate>
<asp:Label runat="server" ID="lblNameFormat"></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Chars. Left" ItemStyle-Wrap="false">
<ItemTemplate>
<asp:Label runat="server" ID="lblCharsLeft"></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</asp:Panel>
For each of the 5 rows:
1) The NameFormat column displays as LastName/FirstName/MiddleName
2) The combination of the lengths of all names has to be less than or equal to 30 characters
3) Any column (LastName/FirstName/MiddleName) can be any length for as long as the total count is less than or equal to 30
4) The CharsLeft column displays the number of characters left, subtracted from 30, e.g. 6/30 left, if the lengths of LastName/FirstName/MiddleName combined = 24
I tried to no avail:
[EDIT] Added what OP means] I mean sometimes the app. simply crashes on me, sometimes it churns for several minutes before I have to stop it and sometimes no changes are reflected on the NameFormat and CharsLeft columns at all[/EDIT]
Attempt A)
Row 1: (I repeated this for the remain ing 4 rows):
$(document).ready(function(){
$('#<%= dgNames.ClientID%> tr:has(td)').each(function(){
var parentGrid = document.getElementById('#<%= dgNames.ClientID %>');
var trTableRow = parentGrid.getElementsByTagName('TR')[1];
var tcLastName = trTableRow.getElementByTagName('TD')[1];
var txtLastName = tcLastName.innerText;
var tcFirstName = trTableRow.getElementByTagName('TD')[2];
var txtFirstName = tcFirstName.innerText;
var tcMiddleName = trTableRow.getElementByTagName('TD')[3];
var txtMiddleName = tcMiddleName.innerText;
var lblNameFormat = trTableRow.getElementByTagName('TD')[4];
var lblCharsLeft = trTableRow.getElementByTagName('TD')[5];
lblNameFormat.text(txtLastName + '/' + txtFirstName + '/' + txtMiddleName);
var remainingChars = 30 - (txtLastName.val().length + txtFirstName.val().length + txtMiddleName.val().length);
lblCharsLeft.text(remainingChars + '/30');
});
});
Attempt B)
$(document).ready(function(){
$('#<%= dgNames.ClientID%> tr:has(td)').each(function(){
var txtLastName = document.getElementById("<%= dgNames.ClientID %>").rows[1].cells[1].innerText;
var txtFirstName = document.getElementById("<%= dgNames.ClientID %>").rows[1].cells[2].innerText;
var txtMiddleName = document.getElementById("<%= dgNames.ClientID %>").rows[1].cells[3].innerText;
var lblNameFormat = document.getElementById("<%= dgNames.ClientID %>").rows[1].cells[4];
var lblCharsLeft = document.getElementById("<%= dgNames.ClientID %>").rows[1].cells[5];
lblNameFormat.text(txtLastName + '/' + txtFirstName + '/' + txtMiddleName);
var remainingChars = 30 - (txtLastName.val().length + txtFirstName.val().length + txtMiddleName.val().length);
lblCharsLeft.text(remainingChars + '/30');
});
});
Attempt C)
Row 1: (I repeated this for the remaining 4 rows):
$(document).ready(function(){
$("#<%= dgNames.ClientID %> input[id*='txtLastName']:txtLastName.ClientID]").keyup(function(){
$("#<%= dgNames.ClientID %> input[id*='lblNameFormat']:lblNameFormat.ClientID]").text
(
$("#<%= dgNames.ClientID %> input[id*='txtLastName']:txtLastName.ClientID").val() + '/' +
$("#<%= dgNames.ClientID %> input[id*='txtFirstName']:txtFirstName.ClientID]").val() + '/' +
$("#<%= dgNames.ClientID %> input[id*='txtMiddleName']:txtMiddleName.ClientID]").val()
);
$("#<%= dgNames.ClientID %> input[id*='lblCharsLeft']:lblCharsLeft.ClientID]").text
(
$("#<%= dgNames.ClientID %> input[id*='txtLastName']:txtLastName.ClientID").val().length +
$("#<%= dgNames.ClientID %> input[id*='txtFirstName']:txtFirstName.ClientID]").val().length +
$("#<%= dgNames.ClientID %> input[id*='txtMiddleName']:txtMiddleName.ClientID]").val().length
);
});
});