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

[Solved] Combo Box - On Demand, Mouse Click does not call the

0 Answers 125 Views

ComboBox

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

This question is locked. New answers and comments are not allowed.

James asked on 08 Feb 2011, 04:36 PM

I used the demo code as a base for some AJAX Combo boxes (ie they only load the possible selections on click of the drop down)
Demo is :http://demos.telerik.com/aspnet-mvc/combobox/ajaxloading (specifically the top left style of control)

I have a problem in that nothing ever catches the "click" event on the drop down anchor.
It seems like client side events are not being handled?

Below is the site master.

<%@ Master Language="VB" Inherits="System.Web.Mvc.ViewMasterPage" %>

<%@ Import Namespace="vantageTEM.MVC" %>

<%-- The following line works around an ASP.NET compiler warning --%>

<%: ""%>

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

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

<head runat="server">

<title>

<asp:ContentPlaceHolder ID="TitleContent" runat="server" />

</title>

<% With Html.Telerik().StyleSheetRegistrar()

.DefaultGroup(Function(group)

With group

.Add("telerik.common.css")

.Add("telerik.telerik.min.css")

.Add("telerik.default" + ".css")

.Add("telerik.rtl.css")

End With

End Function)

.Render()

End With%>

<link href="../../Content/reset.css" rel="stylesheet" type="text/css" />

<link href="../../Content/layout.css" rel="stylesheet" type="text/css" />

<link href="../../Content/buttons.css" rel="stylesheet" type="text/css" />

<link href="../../Content/lists.css" rel="stylesheet" type="text/css" />

<link href="../../Content/forms.css" rel="stylesheet" type="text/css" />

<link href="../../Content/tables.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>

<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.debug.js") %>" type="text/javascript"></script>

<script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js") %>" type="text/javascript"></script>

<script src="../../Scripts/TabControlManager.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function () {

$("ul.searchfilters").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.SearchFilters

$("ul.searchmenu li span").click(function () { //When trigger is clicked...

//Following events are applied to the SearchFilters itself (moving SearchFilters up and down)

$(this).parent().find("ul.searchfilters").slideDown('fast').show(); //Drop down the SearchFilters on click

$(this).parent().hover(function () {

}, function () {

$(this).parent().find("ul.searchfilters").slideUp('slow'); //When the mouse hovers out of the SearchFilters, move it back up

});

//Following events are applied to the trigger (Hover events for the trigger)

}).hover(function () {

$(this).addClass("subhover"); //On hover over, add class "subhover"

}, function () { //On Hover Out

$(this).removeClass("subhover"); //On hover out, remove class "subhover"

});

</script>

<script type="text/javascript">

$(document).ready(function () {

$('tr').click(function () {

var href = $(this).find("a").attr("href");

if (href) {

window.location = href;

}

});

</script>

<asp:ContentPlaceHolder ID="HeaderContent" runat="server" />

</head>

<body id="<%= TypeName(Me.ViewContext.Controller)%>">

<%--ALL THE CONTENT OF MY PAGE GOES HERE.

Call render partial to draw some controls on this page.

These partial views contain the drop downs--%>

<%

With Html.Telerik().ScriptRegistrar()

.jQuery(True).DefaultGroup(Function(group)

group.Add("telerik.common.js")

group.Add("telerik.grid.js")

group.Add("telerik.grid.filtering.js")

group.Add("telerik.calendar.js")

group.Add("telerik.combobox.js")

group.Add("telerik.list.js")

group.Add("telerik.datepicker.js")

End Function)

.Render()

End With

%>

</body>

</html>

The following is the drop down as it appears on the user control:

<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl(Of vantageTEM.MVC.CarrierAccountsViewModel)" %>

<%@ Import Namespace="vantageTEM.Business" %>

<%  Dim currentCarrierAccountsRow As CarrierAccountsDataSet.VIT_ACC_Carrier_AccountRow = Model.CarriersAccountInformation.VIT_ACC_Carrier_Account.First %>

<fieldset>

<legend>Carrier Information</legend>

<ul>

<li>

<label>Carrier Information</label>

<% with Html.Telerik().ComboBox()

.Name("CarrierAccounts")

.AutoFill(True)

.DataBinding(Function(binding) binding.Ajax().Select("_fillDropDownCarriers", "CarrierAccounts").Enabled(True))

.Filterable(Function(filtering)

filtering.FilterMode(AutoCompleteFilterMode.StartsWith)

End Function)

.HighlightFirstMatch(True)

.Render()

End With

%>

</li>

</ul>

</fieldset>

And finally the controller methods...though i set breakpoints on them and they NEVER get fired:

Public Function _fillDropDownCarriers()

Return View()

End Function

Public Function _fillDropDownCarriers(ByVal text As String) As ActionResult

Dim model As EnumerableRowCollection(Of CarrierAccountsDataSet.VIT_CAR_CarrierRow)

Using dp As DataProxy = New DataProxy()

If (String.IsNullOrWhiteSpace(text)) Then

model = dp.getCarriers().Where(Function(rowmatch) rowmatch.CAR_NAME.StartsWith(text))

Else

model = dp.getCarriers().AsEnumerable()

End If

Return New JsonResult With { _

.Data = New SelectList(model.ToList(), "CAR_ID", "CAR_NAME") _

}

End Using

Any help would be great.

Am i using the script registrar correctly?

regards,
James