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

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

0 Answers 48 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
Top achievements
Rank 1
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">
<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



Tags
ComboBox
Asked by
James
Top achievements
Rank 1
Share this question
or