Cascading dropdown scenario

[miksh]

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?

[Hristo Valyavicharski]

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

 

 

[Stefania]

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

[Peter Filipov]

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