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

[Solved] ComboBox breaks RadButon OnClick

8 Answers 158 Views

ComboBox

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

Dan Lehmann asked on 22 Jun 2011, 08:17 PM

Hello, I'm having the common "postback eats a buttonclick event" problem as discussed here and here.
I have a RadButton:

<rad:RadButton ID="btnApplyFilters" runat="server"

Text="Apply Filters" UseSubmitBehavior="false" />

Conflicting with a RadComboBox:




<rad:RadComboBox runat="server"
 ID="rcbSearchLastName"
 EnableLoadOnDemand="true"
 OnItemsRequested="rcbSearchLastName_ItemsRequested"
 AutoPostBack="true"
 ShowWhileLoading="false"
 ShowToggleImage="false" />

When I type in the textbox I am getting suggest style choices in the dropdown. If I select from the dropdown choices the rcbSearchLastName.SelectedIndexChanged event fires in the code behind. While I am typing the rcbSearchLastName_ItemsRequested event is fired.

If I type in the TextBox portion of the RadCombBox, then click a RadButton, the button click event is not fired.

Is it possible to use the components differently so that this conflict doesn't occur? Or is there a way to queue the events with the AjaxManager?

Thanks,
Dan

8 Answers, 1 is accepted

answered on 25 Jun 2011, 04:44 PM

Hello Dan,

Could you clarify which version of the controls you are using.

I've made a sample project trying to reproduce the problem you are experiencing, but to no avail. The click event of the RadButton is fired correctly on my side.

Please try to provide more information about your particular implementation and specify whether you are using ajax or not.

All the best,
Dimitar Terziev
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 27 Jun 2011, 03:48 PM

I am using version 2011-1.519.40.

I made a sample project to demonstrate the problem I'm having. In this project, you'll notice I am trying to implement filters. Since I wanted paging of my data I could not use the built in RadFilters plus I have my data layer isolated so I cannot wire up the controls the way most of the examples are, with simple sql statements.

To reproduce the problem I'm having, type in either box and press the Apply Filters btn. My problem is I have to press the btn 2 times.

Here's my aspx:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="rad" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<rad:RadScriptManager ID="RadScriptManager1" runat="server" />

<rad:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true" />

<rad:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<rad:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<rad:AjaxUpdatedControl ControlID="RadAjaxPanel1" />

<rad:AjaxUpdatedControl ControlID="rgCustomers" />

</UpdatedControls>

</rad:AjaxSetting>

<rad:AjaxSetting AjaxControlID="RadAjaxPanel1">

<UpdatedControls>

<rad:AjaxUpdatedControl ControlID="rgCustomers" />

</UpdatedControls>

</rad:AjaxSetting>

<rad:AjaxSetting AjaxControlID="btnApplyFilters">

<UpdatedControls>

<rad:AjaxUpdatedControl ControlID="rgCustomers" />

</UpdatedControls>

</rad:AjaxSetting>

<rad:AjaxSetting AjaxControlID="btnClearFilters">

<UpdatedControls>

<rad:AjaxUpdatedControl ControlID="rgCustomers" />

</UpdatedControls>

</rad:AjaxSetting>

</AjaxSettings>

</rad:RadAjaxManager>

<h2>NW Customers</h2>

<rad:RadAjaxPanel runat="server" ID="RadAjaxPanel1">

<div style="width:100%;text-align:right;margin-bottom:2px;float:none;">

<rad:RadButton ID="btnApplyFilters" runat="server" Text="Apply Filters" Skin="Outlook" Width="90px" UseSubmitBehavior="false" />

<rad:RadButton ID="btnClearFilters" runat="server" Text="Clear Filters" Skin="Outlook" Width="90px" UseSubmitBehavior="false" />

</div>

<rad:RadComboBox runat="server" ID="rcbSearchCompanyName" Width="150px" ShowToggleImage="false" EnableLoadOnDemand="true" OnItemsRequested="rcbSearchCompanyName_ItemsRequested" AutoPostBack="true" LoadingMessage="" CollapseDelay="0" CollapseAnimation-Type="None" ExpandAnimation-Type="None" ShowWhileLoading="false" />

<rad:RadComboBox runat="server" ID="rcbSearchContactName" Width="150px" ShowToggleImage="false" EnableLoadOnDemand="true" OnItemsRequested="rcbSearchContactName_ItemsRequested" AutoPostBack="true" LoadingMessage="" CollapseDelay="0" CollapseAnimation-Type="None" ExpandAnimation-Type="None" ShowWhileLoading="false" />

</rad:RadAjaxPanel>

<rad:RadGrid ID="rgCustomers" runat="server" Skin="Vista" AllowSorting="false" AllowFilteringByColumn="false" AllowPaging="false" AllowCustomPaging="false" Width="100%" AutoGenerateColumns="false" ShowFooter="false" ShowHeader="true" >

<ClientSettings EnablePostBackOnRowClick="true">

<Selecting AllowRowSelect="True" />

</ClientSettings>

<MasterTableView Width="100%" TableLayout="Fixed" GridLines="Both" >

<Columns>

<rad:GridBoundColumn UniqueName="CustomerID" DataField="CustomerID" ReadOnly="true" Visible="false" />

<rad:GridBoundColumn HeaderText = "Company Name" DataField="CompanyName" ItemStyle-Width="100%" HeaderStyle-Width="110px" />

<rad:GridBoundColumn HeaderText = "Contact Name" DataField="ContactName" ItemStyle-Width="100%" HeaderStyle-Width="100px" />

<rad:GridBoundColumn HeaderText = "Postal Code" DataField="PostalCode" ItemStyle-Width="100%" HeaderStyle-Width="85px" />

<rad:GridBoundColumn HeaderText = "Phone" DataField="Phone" ItemStyle-Width="100%" HeaderStyle-Width="50px" />

</Columns>

</MasterTableView>

</rad:RadGrid>

</div>

</form>

</body>

</html>

And my codebehind:

Imports System.Data

Imports System.Data.SqlClient

Imports Telerik.Web.UI

Partial Class Default2

Inherits System.Web.UI.Page

Public Shared Function GetData_DataTable(query As String, Optional param1 As String = Nothing, Optional param2 As String = Nothing) As DataTable

Dim information As New DataTable()

Dim conn As New SqlConnection(ConfigurationManager.ConnectionStrings("NorthwindConnectionString").ConnectionString)

Try

conn.Open()

Dim adapter As New SqlDataAdapter()

Try

adapter.SelectCommand = New SqlCommand(query, conn)

If param1 IsNot Nothing Then

adapter.SelectCommand.Parameters.AddWithValue("@param1", param1)

End If

If param2 IsNot Nothing Then

adapter.SelectCommand.Parameters.AddWithValue("@param2", param2)

End If

adapter.Fill(information)

Finally

If Not [Object].Equals(adapter.SelectCommand, Nothing) Then

adapter.SelectCommand.Dispose()

End If

End Try

Finally

If conn.State = ConnectionState.Open Then

conn.Close()

End If

End Try

Return information

End Function

Public Function GetData_ddlCompanyName() As DataTable

Return GetData_DataTable(

"SELECT CompanyName FROM [Customers] WHERE CompanyName LIKE '%' + @param1 + '%' AND ContactName LIKE '%' + @param2  + '%'"

, Session("CompanyName"), Session("ContactName"))

End Function

Public Function GetData_ddlContactName() As DataTable

Return GetData_DataTable(

"SELECT ContactName FROM [Customers] WHERE CompanyName LIKE '%' + @param1 + '%' AND ContactName LIKE '%' + @param2  + '%'"

, Session("CompanyName"), Session("ContactName"))

End Function

Public Function GetData_grid() As DataTable

Return GetData_DataTable(

"Select CustomerID, CompanyName, ContactName, PostalCode, Phone FROM [Customers] WHERE CompanyName LIKE '%' + @param1 + '%' AND ContactName LIKE '%' + @param2  + '%'"

, Session("CompanyName"), Session("ContactName"))

End Function

Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load

If Not IsPostBack Then

Session("CompanyName") = ""

Session("ContactName") = ""

End If

End Sub

Protected Sub rgCustomers_NeedDataSource(sender As Object, e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles rgCustomers.NeedDataSource

rgCustomers.DataSource = GetData_grid()

End Sub

Protected Sub rcbSearchCompanyName_ItemsRequested(sender As Object, e As Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs) Handles rcbSearchCompanyName.ItemsRequested

Session("CompanyName") = Trim(e.Text)

Dim Customers As DataTable = GetData_ddlCompanyName()

For i As Int32 = 0 To Customers.Rows.Count - 1

Dim objDR As DataRow = Customers.Rows(i)

rcbSearchCompanyName.Items.Add(New RadComboBoxItem(objDR.Item("CompanyName"), objDR.Item("CompanyName")))

Next

End Sub

Protected Sub rcbSearchContactName_ItemsRequested(sender As Object, e As Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs) Handles rcbSearchContactName.ItemsRequested

Session("ContactName") = Trim(e.Text)

Dim Customers As DataTable = GetData_ddlContactName()

For i As Int32 = 0 To Customers.Rows.Count - 1

Dim objDR As DataRow = Customers.Rows(i)

rcbSearchContactName.Items.Add(New RadComboBoxItem(objDR.Item("ContactName"), objDR.Item("ContactName")))

Next

End Sub

Protected Sub rcbSearchCompanyName_SelectedIndexChanged(sender As Object, e As Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs) Handles rcbSearchCompanyName.SelectedIndexChanged

Session("CompanyName") = Trim(e.Text)

End Sub

Protected Sub rcbSearchContactName_SelectedIndexChanged(sender As Object, e As Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs) Handles rcbSearchContactName.SelectedIndexChanged

Session("ContactName") = Trim(e.Text)

End Sub

Private Sub btnClearFilters_Click(sender As Object, e As System.EventArgs) Handles btnClearFilters.Click

Session("CustomerFilterApplied") = False

rcbSearchCompanyName.Text = ""

rcbSearchContactName.Text = ""

Session("CompanyName") = ""

Session("ContactName") = ""

rgCustomers.Rebind()

rgCustomers.MasterTableView.Rebind()

End Sub

Private Sub btnApplyFilters_Click(sender As Object, e As System.EventArgs) Handles btnApplyFilters.Click

rgCustomers.MasterTableView.Rebind()

btnApplyFilters.Text = "Apply Filters"

End Sub

End Class

Are you able to reproduce the issue?

answered on 30 Jun 2011, 02:51 PM

Here is the project
To reproduce the problem,
1 .Open Default2.aspx
2. Type "al" in the first textbox
3. Click the Apply Filters btn
4. Click Apply Filters again

I think the filtering onClick in step 3 is blocked by the call to rgCustomers.NeedDataSource after the textbox onblur but before the click event. If you wait for the NeedDataSource to finish before clicking the button in step 3 the button works no problems.. I'm trying to think of some way to maybe delay the onblur and call it async or maybe putting the button click into an async call.

Thanks,
Dan

Accepted

answered on 22 Aug 2011, 01:01 PM

ComboBoxBreaksButton.zip

Hello Dan Lehmann,

We have downloaded your code and reproduced the issue.
I am suggesting you change the Ajax Settings on your page in this manner:

<rad:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<%-- <rad:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<rad:AjaxUpdatedControl ControlID="RadAjaxPanel1" />

<rad:AjaxUpdatedControl ControlID="rgCustomers" />

</UpdatedControls>

</rad:AjaxSetting>

<rad:AjaxSetting AjaxControlID="RadAjaxPanel1">

<UpdatedControls>

<rad:AjaxUpdatedControl ControlID="rgCustomers" />

</UpdatedControls>

</rad:AjaxSetting>--%>

<rad:AjaxSetting AjaxControlID="btnApplyFilters">

<UpdatedControls>

<rad:AjaxUpdatedControl ControlID="rgCustomers" />

</UpdatedControls>

</rad:AjaxSetting>

<rad:AjaxSetting AjaxControlID="btnClearFilters">

<UpdatedControls>

<rad:AjaxUpdatedControl ControlID="rgCustomers" />

</UpdatedControls>

</rad:AjaxSetting>

<rad:AjaxSetting AjaxControlID="rcbSearchCompanyName">

<UpdatedControls>

<rad:AjaxUpdatedControl ControlID="rgCustomers" />

<rad:AjaxUpdatedControl ControlID="rcbSearchCompanyName" />

</UpdatedControls>

</rad:AjaxSetting>

</AjaxSettings>

</rad:RadAjaxManager>

Kind regards,
Kalina
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>