locked
How to call CascadingDropDown ServiceMethod at on click RRS feed

  • Question

  • User1503019091 posted

    Is it possible to load the content of CascadingDropDown ServiceMethod when the client user click the drop down?

    I have this CascadingDropDown with ServiceMethod="GetCarMakes". GetCarMakes is called when the control is loaded. but I want it to only load when user click the down arrow.. is this possible?

    thank you

    my environment is ASP.net with VB.net code behind

    Friday, June 12, 2015 3:58 PM

Answers

  • User1644755831 posted

    Hello WWI Armando,

    Please see this Link: https://support.microsoft.com/en-us/kb/976156

    As described in the article right now he is loading the initial dropdown on page load event like this.

     function pageLoad() {
                // call a Web service method with no parameters and the user context.
                KB_CascadingDDL_VB.WebService.GetMakeValue(SucceededCallbackWithContext, FailedCallback, "fillMake");
            }

    You could change this to as following using javascript and use onmousedown event.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm44.aspx.cs" Inherits="WebFormsIdentity.WebForm44" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
      <title></title>
      <script src="Scripts/jquery-2.1.3.min.js"></script>
      <script>
        var selectloaded = false;
    
        function onmousedownevent() {
          if (!selectloaded) {
            var data = ['1', '2', '3']; //get this from webservice
            $.each(data, function () {
              $('#select').append($('<option>').val(this).text(this));
            })
            selectloaded = true;
          }
    
        }
        function onchanged() {
          alert($(this).val());
        }
      </script>
    
    </head>
    <body>
      <form id="form1" runat="server">
        <div>
          <select id="select" onmousedown="onmousedownevent()" onchange="onchanged()"></select>
        </div>
      </form>
    </body>
    </html>
    

    On Mouse down event it will load the dropdown.

    Hope this helps.

    With Regards,

    Krunal Parekh

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, June 14, 2015 11:30 PM
  • User1644755831 posted

    Hello WWI Armando,

     

    WWI Armando

    t.ServicePath = "AutoComplete.asmx" t.ServiceMethod = "GetCarMake"

    You can remove the service call and add the client side call using WebControl.Attributes Property.

    Please see: How to: Set HTML Attributes for Controls in ASP.NET Web Pages using this you can bind client side mousedown event that I described earlier.

    Hope this helps.

    With Regards,

    Krunal Parekh

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, June 28, 2015 10:38 PM

All replies

  • User1644755831 posted

    Hello WWI Armando,

    Please see this Link: https://support.microsoft.com/en-us/kb/976156

    As described in the article right now he is loading the initial dropdown on page load event like this.

     function pageLoad() {
                // call a Web service method with no parameters and the user context.
                KB_CascadingDDL_VB.WebService.GetMakeValue(SucceededCallbackWithContext, FailedCallback, "fillMake");
            }

    You could change this to as following using javascript and use onmousedown event.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm44.aspx.cs" Inherits="WebFormsIdentity.WebForm44" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
      <title></title>
      <script src="Scripts/jquery-2.1.3.min.js"></script>
      <script>
        var selectloaded = false;
    
        function onmousedownevent() {
          if (!selectloaded) {
            var data = ['1', '2', '3']; //get this from webservice
            $.each(data, function () {
              $('#select').append($('<option>').val(this).text(this));
            })
            selectloaded = true;
          }
    
        }
        function onchanged() {
          alert($(this).val());
        }
      </script>
    
    </head>
    <body>
      <form id="form1" runat="server">
        <div>
          <select id="select" onmousedown="onmousedownevent()" onchange="onchanged()"></select>
        </div>
      </form>
    </body>
    </html>
    

    On Mouse down event it will load the dropdown.

    Hope this helps.

    With Regards,

    Krunal Parekh

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, June 14, 2015 11:30 PM
  • User1503019091 posted

    the control is dynamically added. in that case how do I add onmouseDown attributes to the cascading dropdown control?

    thank you

    Friday, June 19, 2015 2:35 PM
  • User1644755831 posted

    Hello WW! Armando,

    Please Post your code on how you are adding dynamic controls.

    With Regards,

    Krunal

    Sunday, June 21, 2015 9:56 PM
  • User1503019091 posted

    this is the HTML

    <asp:Table ID="tblDetail" runat="server">
    </asp:Table>

    VB.net

    Private Sub LoadForm()
    For Each drv As Data.DataRowView In ds.CarDS.DefaultView Dim dr As dsCar.ExpenseRow = drv.Row AddLine(dr) Next End Sub
    Sub AddLine(ByVal dr As dsCar.CarMakeRow) Dim cboCar As New DropDownList  Dim tr As New TableRow
    Dim tc As New TableCell
    Dim s as String
    s = dr.CarMake tc.Controls.Add(cboCar) tc.Controls.Add(getCascade(cboCar,s))
     tr.Cells.Add(tc) tblDetail.Rows.Add(tr) End Sub Function getCascade(ByVal dl As DropDownList, ByVal SelectedValue As String) As AjaxControlToolkit.CascadingDropDown Dim t As New AjaxControlToolkit.CascadingDropDown t.ID = "Z" & dl.ID
    t.TargetControlID = dl.ID
      t.ServicePath = "AutoComplete.asmx" t.ServiceMethod = "GetCarMake" t.Category = "CarMake" t.PromptText = "-" t.LoadingText = "[Reading projects...]"
    t.selectedvalue = selectedValue Return t End Function

    This is the ASMX file

    %@ WebService Language="VB" CodeBehind="~/App_Code/AutoComplete.vb" Class="AutoComplete" %>
    

    This is the AutoComplete.VB

        <WebMethod()> <Script.Services.ScriptMethod()> _
        Public Function GetCarMake(ByVal knownCategoryValues As String, ByVal category As String) As AjaxControlToolkit.CascadingDropDownNameValue()
            Dim dt As New dsCar.v_Car_ProjectDataTable
            Dim da As New dsCarTableAdapters.v_Car_ProjectTableAdapter
            Dim kv As StringDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)
            If Not kv.ContainsKey("CarMake") Then Return Nothing
            da.FillByCpny(dt, kv("CarMake"))
            da.Connection.Close()
            Dim values As New List(Of AjaxControlToolkit.CascadingDropDownNameValue)
            For Each dr As dsExpense.v_Car_ProjectRow In dt.Rows
                values.Add(New AjaxControlToolkit.CascadingDropDownNameValue(dr.CarMake.Trim , dr.CarMake.Trim))
            Next
            Return values.ToArray()
        End Function

    The code above works. but The problem I have with this is when my datatable has 100 lines, it will try to load the GetCarMake 100 times, this often crash IE.

    SO if I could find a way to call getCarMake only when the drop down is clicked I think I will be golden. but I am open for suggestion.

    Thursday, June 25, 2015 5:48 PM
  • User1644755831 posted

    Hello WWI Armando,

     

    WWI Armando

    t.ServicePath = "AutoComplete.asmx" t.ServiceMethod = "GetCarMake"

    You can remove the service call and add the client side call using WebControl.Attributes Property.

    Please see: How to: Set HTML Attributes for Controls in ASP.NET Web Pages using this you can bind client side mousedown event that I described earlier.

    Hope this helps.

    With Regards,

    Krunal Parekh

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, June 28, 2015 10:38 PM
  • User1503019091 posted

    Do I add the onClick attributes to cboCar or the CascadingDropDown?

    If to CascadingDropDown .. I tried two below but both are invalid syntax

    t.attributes("onclick")="javascript:alert('test');"  and  t.attributes.add("onClick", "Alert('test')")

    so I am guessing the attributes is to cboCar?

    Friday, July 3, 2015 2:36 PM
  • User1644755831 posted

    Hello,

    WWI Armando

    or the CascadingDropDown?

    You really don't need the CascadingDropDown here you can achieve this using just the dropdown as I described earlier using javascript and mousedown event.

    Calling of the webservice will be handled client side.

    Sunday, July 5, 2015 9:32 PM