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

Cascading dropdown scenario

3 Answers 80 Views
ClientDataSource
This is a migrated thread and some comments may be shown as answers.
miksh
Top achievements
Rank 1
Iron
miksh asked on 25 Jun 2014, 01:41 PM
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?

3 Answers, 1 is accepted

Sort by
0
Accepted
Hristo Valyavicharski
Telerik team
answered on 30 Jun 2014, 03:29 PM
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.

 
0
Stefania
Top achievements
Rank 2
answered on 25 Jul 2014, 09:39 AM
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
0
Peter Filipov
Telerik team
answered on 29 Jul 2014, 11:41 AM
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.

 
Tags
ClientDataSource
Asked by
miksh
Top achievements
Rank 1
Iron
Answers by
Hristo Valyavicharski
Telerik team
Stefania
Top achievements
Rank 2
Peter Filipov
Telerik team
Share this question
or