This is a migrated thread and some comments may be shown as answers.

radcombobox onclientfocus get triggered on pageload

3 Answers 133 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

Joao asked on 01 Dec 2011, 12:15 PM

telerik1.JPG

I'm using a table to build a form and everytime a control is focused, I'm trying to change the background color of the table row to highlight the focus on that control. I'm doing that by changing the class of the row where the control is contained. I noticed that on the first page load all radcombobox controls get focused somehow but do not get unfocused so this makes that some rows are imediate highlighted even if the user didn't even go near those controls. When the control loses the focus it changes the row class back to the unselected state.

Is there anyway of this controls not getting focused on pageload?

I've tried to set focus on some other control (the button this case) to see if it would trigger the onblur of the radcombobox but didn't work.

My markup and javascript functions look like this

<script type="text/javascript">

function findControl(tagName, controlId) {

var aControls = document.getElementsByTagName(tagName);

if (aControls == null)

return null;

for (var i = 0; i < aControls.length; i++) {

var j = aControls[i].id.lastIndexOf(controlId);

if ((j - 1) && (j == (aControls[i].id.length - controlId.length)))

return aControls[i];

}

return null;

}

function HighlightRow(focus, CStableElemID, CSControlID) {

//alert("I'm Here")

var input = findControl(CStableElemID, CSControlID)

//alert(input)

if (focus) input.className = "tableFormRowSelected";

else input.className = "tableFormRowUnselected";

}

</script>

<table id="tableform" runat="server">

<tr id="fromAccountRow">

<td nowrap="nowrap">

<asp:Label ID="lblFromAccount" runat="server" Text="From Account: "></asp:Label>

</td>

<td>

<telerik:RadComboBox ID="fromAccount" Runat="server" AutoPostBack="True" CausesValidation="False" DropDownWidth="330px" Width="200px" EnableLoadOnDemand="true" EmptyMessage="Please Select" HighlightTemplatedItems="true" AllowCustomText="true" OnClientFocus="HighlightRow(true, 'tr', 'fromAccountRow')" OnClientBlur="HighlightRow(false, 'tr', 'fromAccountRow')">

<ItemTemplate>

<ul>

<li class="fromAccountCol1">a</li>

<li class="fromAccountCol2">b</li>

<li class="fromAccountCol3">d</li>

</ul>

</ItemTemplate>

</telerik:RadComboBox>

<asp:RequiredFieldValidator

ID="RequiredFromAccountValidator"

runat="server"

ErrorMessage="!"

ControlToValidate="fromAccount">

</asp:RequiredFieldValidator>

</td>

</tr>

<tr id="fromAccountTextRow">

<td>

<asp:Label ID="lblFromAccountText" runat="server" Text="Text On Account Statement: "></asp:Label>

</td>

<td>

<telerik:RadTextBox ID="Description" runat="server" MaxLength="128" onBlur="HighlightRow(false, 'tr', 'fromAccountTextRow')" OnFocus="HighlightRow(true, 'tr', 'fromAccountTextRow')"></telerik:RadTextBox>

<asp:RequiredFieldValidator ID="FromDescriptionRequiredValidator" runat="server" ErrorMessage="!" ControlToValidate="Description"></asp:RequiredFieldValidator>

</td>

</tr>

<tr id="toAccountRow">

<td>

<asp:Label ID="lblToAccount" runat="server" Text="To Account: "></asp:Label>

</td>

<td>

<telerik:RadComboBox ID="toAccount" runat="server" CausesValidation="false" EmptyMessage="Please Select" DropDownWidth="330px" Width="200px" AllowCustomText="True" HighlightTemplatedItems="true" OnClientFocus="HighlightRow(true, 'tr', 'toAccountRow')" OnClientBlur="HighlightRow(false, 'tr', 'toAccountRow')">

<ItemTemplate>

<ul>

<li class="toAccountCol1"><%# DataBinder.Eval(Container.DataItem, "Account")%></li>

<li class="toAccountCol2"><%# DataBinder.Eval(Container.DataItem, "AccountNumber")%></li>

<li class="toAccountCol3"><%# DataBinder.Eval(Container.DataItem, "Balance", "{0:c}")%></li>

</ul>

</ItemTemplate>

</telerik:RadComboBox>

</td>

</tr>

<tr id="toAccountTextRow">

<td>

<asp:Label ID="lblToAccountText" runat="server" Text="Reference: "></asp:Label>

</td>

<td>

<telerik:RadTextBox ID="Reference" runat="server" MaxLength="128" onBlur="HighlightRow(false, 'tr', 'toAccountTextRow')" OnFocus="HighlightRow(true, 'tr', 'toAccountTextRow')"></telerik:RadTextBox><asp:RequiredFieldValidator ID="ToDescriptionRequiredValidator" runat="server" ErrorMessage="!" ControlToValidate="Reference"></asp:RequiredFieldValidator>

</td>

</tr>

</table>

<telerik:RadButton ID="btnTransfer" runat="server" Text="Transfer"></telerik:RadButton>

Also find attached a screenshot of what the form looks like on the first page load. Note that the goal is to have no blue background rows on first page load as there isn't any control focused yet.

Thanks

Joao

3 Answers, 1 is accepted

Accepted

answered on 08 Dec 2011, 01:47 PM

RowColoring.zip

Hello Joao,

Take a look at the attached file. It shows how the desired scenario could be achieved, using the client-side API of the RadComboBox and the RadTextBox.

Greetings,
Ivana
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now