Cascading dropdown scenario

4 posts, 1 answers
  1. miksh
    miksh avatar
    275 posts
    Member since:
    Nov 2006

    Posted 25 Jun 2014 Link to this post

    Thanks for such a great possibility. I'm interested in cascading dropdown scenario (it would be a nice case for demo). Could you give steps (or a simple example) how to implement it?
  2. Answer
    Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 30 Jun 2014 Link to this post

    Hi Michael,

    It is possible. Populate the first combo with data and handle its OnClientSelectedIndexChanged event. In this event you will get the text (value) from the selected item needed for the second combo:

    <telerik:RadComboBox ID="RadComboBox1" runat="server" ClientDataSourceID="RadClientDataSource1"
        OnClientItemDataBound="OnClientItemDataBound"
        OnClientSelectedIndexChanged="OnClientSelectedIndexChanged"
        EnableLoadOnDemand="true" DataTextField="CategoryName" DataValueField="CategoryID" MaxHeight="180px">
    </telerik:RadComboBox>

    ​        <telerik:RadComboBox ID="RadComboBox2" runat="server" ClientDataSourceID="RadClientDataSource2"
                EnableLoadOnDemand="true" DataTextField="ProductName" DataValueField="ProductID" MaxHeight="180px">
            </telerik:RadComboBox>
    function OnClientSelectedIndexChanged(sender, args) {
           var categoryId = args.get_item().get_value();
              $find('RadComboBox2').requestItems(categoryId);
    }

    then call the requestItems() method of the second and pass the selected value from the first combo.

    Regards,
    Hristo Valyavicharski
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stefania
    Stefania avatar
    107 posts
    Member since:
    May 2013

    Posted 25 Jul 2014 in reply to Hristo Valyavicharski Link to this post

    Hi Hristo,
    I'm trying to do what you said but I have some problem..

    //DATASOURCE COMBO1
    <
    telerik:RadClientDataSource runat="server" ID="AssetCategoryDataSource">
               <DataSource>
                   <WebServiceDataSourceSettings BaseUrl="DynamicChartWebService.asmx/">
                       <Select Url="GetAssetCategories" RequestType="Post" DataType="JSON" ContentType="application/json; charset=utf-8" />
                   </WebServiceDataSourceSettings>
               </DataSource>
               <Schema DataName="d">
               </Schema>
           </telerik:RadClientDataSource>
     
    //DATASOURCE  COMBO2
           <telerik:RadClientDataSource runat="server" ID="AssetDataSource">
               <DataSource>
                   <WebServiceDataSourceSettings BaseUrl="DynamicChartWebService.asmx/">
                       <Select Url="GetAssets" RequestType="Post" DataType="JSON" ContentType="application/json; charset=utf-8" />
                   </WebServiceDataSourceSettings>
               </DataSource>
               <Schema DataName="d">
               </Schema>
           </telerik:RadClientDataSource>

    <%--COMBO 1--%>
     <telerik:RadComboBox runat="server" ID="AssetCategoryComboBox" EnableVirtualScrolling="true"
                    ItemsPerRequest="20" Height="150px" Width="35%" AllowCustomText="false" ShowMoreResultsBox="true"
                    EnableLoadOnDemand="true" DataTextField="Text" DataValueField="Value" Label="Asset category"
                    LabelCssClass="ComboLabelWidth" ClientDataSourceID="AssetCategoryDataSource"
                    OnClientSelectedIndexChanged="OnAssetCategoryClientSelectedIndexChanged" OnClientLoad="ComboAlternativeRowColor">
                </telerik:RadComboBox>
     
    <%--COMBO 2--%>
      <telerik:RadComboBox runat="server" ID="AssetsRadComboBox" ClientIDMode="AutoID" EnableVirtualScrolling="true"
                    ItemsPerRequest="20" Height="150px" Width="35%" CheckBoxes="true" EnableCheckAllItemsCheckBox="true"
                    AllowCustomText="false" ShowMoreResultsBox="true" EnableLoadOnDemand="true" DataTextField="Text"
                    DataValueField="Value" Label="Assets" LabelCssClass="ComboLabelWidth" ClientDataSourceID="AssetDataSource"
                    OnClientLoad="ComboAlternativeRowColor">
                </telerik:RadComboBox>

    js

    function OnAssetCategoryClientSelectedIndexChanged(sender, args) {
           var assetcategory = args.get_item().get_value();
              $find("<%=AssetsRadComboBox.ClientID%>").requestItems(assetcategory);
    }

    webService
    [WebMethod]
           [ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
           public List<ComboObject> GetAssetCategories()
           {
               AssetCategoryHelper m_AssetCategoryHelper = new AssetCategoryHelper();
               Exception exception = null;
     
               var assetCategories = m_AssetCategoryHelper.GetAssetCategoryForCombo(Utility.FindUserId(), Utility.FindSelectedCompany(), ref exception);
     
               List<ComboObject> result = new List<ComboObject>();
               assetCategories.ForEach(p => result.Add(new ComboObject { Text = p.CodeDescriptionAndCompany, Value = p.IdAndAmbiente }));
     
               return result;
           }
     
           [WebMethod]
           [ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
           public List<ComboObject> GetAssets()
           {
               string parent = "";
               AssetHelper m_AssetHelper = new AssetHelper();
               Exception exception = null;
     
                                     
               //carico il combo asset
               List<AssetEntity> assets = m_AssetHelper.GetAssetsByAssetCategoryForCombo(parent, Utility.FindUserId(), ref exception);
                
               List<ComboObject> result = new List<ComboObject>();
               assets.ForEach(p => result.Add(new ComboObject { Text = p.CodeAndDescription, Value = p.Id.ToString() }));
     
               return result;
     
           }

    How can I pass the selected value of the first combo to my function GetAssets in th webService?

    thanks
  5. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 29 Jul 2014 Link to this post

    Hello Stefania,

    When using ClientDataSource It is not possible to pass the parameter to the web service dynamically. When the comboboxes are integrated with client data source control the control filters all of the items at the client.

    Regards,
    Peter Filipov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top