Drilling down a dropdown list further based on another dropdown lists selection.

1 posts, 0 answers
  1. sarat
    sarat avatar
    4 posts
    Member since:
    Aug 2012

    Posted 24 Sep 2012 Link to this post

    Hi ,

    i have 3 dropdownlists on my page
    -Customer
    -Region
    -FacilityGroup

    <li>
                        <label class="fieldName"  for="CustomerName"> Customer<span class="red">*</span>:</label>
                        <span class="fieldValue">
                            @(Html.Kendo().DropDownList()
                            .OptionLabel("Select ")
                            .Name("Customer")
                            .DataTextField("CustomerName")
                            .DataValueField("CustomerId")
     
                            .Value("CustomerId")
                            .DataSource(source =>
                            {
                                source.Read(read =>
                                {
                                    read.Action("GetCustomer", "AddFacility");                                  
                                     
                                });
     
                            })
                        .Events(e => e.Change("dropdownlist_Validation"))
                         
     
                            )
                            @Html.HiddenFor(m=>m.CustomerName)
                            <div id="divcustomer" >
                            @Html.Label("Required", new { @class = "red" });
                            </div>
                            <script type="text/javascript">
     
                                function GetId() {
                                    return {
                                        Customer: $("#Customer").val()
                                    };
                                }
                            </script>
                          @*  @Html.ValidationMessageFor(model => model.CustomerName)*@
                        </span>
                         
                        </li>
                        <li>
                      <label class="fieldName"  for="RegionName">Region<span class="red"></span>:</label>
                      <span class="fieldValue">
                      @(Html.Kendo().DropDownList()
                                    .OptionLabel("Select ")
                                    .Name("Region")
                                    .DataTextField("RegionName")
                                    .DataValueField("RegionId")
                                                                     
                                    //.Value("RegionId")
                                    .DataSource(source =>
                                    {
                                        source.Read(read =>
                                        {
                                            read.Action("GetRegion", "AddFacility")
                                                 
                                                 
                                                .Data("filterRegion");
                                             
                                        })
                                         .ServerFiltering(true);
                                    })
                           .Enable(false)
                           .AutoBind(false)
                           .CascadeFrom("Customer")
                           .Events(e => e.Change("dropdownlist_Validation"))
     
                                    )
     
                                    
                                     
                                    <script type="text/javascript">
                                        function filterRegion() {
                                            return {
                                                Customer: $("#Customer").val()
                                                 
                                            };
                                        }
                                   </script>
                                    <script type="text/javascript">
                                        function GetId() {
                                            return {
                                                Region: $("#Region").val()
                                            };
                                        }
                            </script>
                            
                      </span>
                      </li>
                        <li>
                        <label class="fieldName"  for="FacilityGroupName">Facility Group<span class="red">*</span>:</label>
                        <span class="fieldValue">
                                     @(Html.Kendo().DropDownList()
                                    .OptionLabel("Select ")
                                    .Name("FacilityGroup")
                                    .DataTextField("FacilityGroupName")
                                    .DataValueField("FacilityGroupId")
                                    .Value("FacilityGroupId")
                                     
                                    .DataSource(source =>
                                    {
                                        source.Read(read =>
                                        {
                                            read.Action("GetFacilityGroupName", "AddFacility")
                                            //.Data("filterfacilitygroup")
                                            .Data("filterfacilitygroup2");                                       
                                        })
                                        .ServerFiltering(true);
     
                                    })
            .Enable(false)
             .AutoBind(false)
                    .CascadeFrom("Region")               
                    .CascadeFrom("Customer")
                    .Events(e => e.Change("dropdownlist_Validation"))
     
                                    )<div id="divfacilitygroupname">
                                     @Html.Label("Required", new { @class = "red" });
                                    </div>
                                    @*<script type="text/javascript">
                                        function filterfacilitygroup() {
                                            return {
     
                                                Region: $("#Region").val()
                                                 
                                            };
                                        }
                                                </script>*@
                                                <script type="text/javascript">
                                                    function filterfacilitygroup2() {
                                                        return {
                                                            Customer: $("#Customer").val(),
                                                            Region: $("#Region").val()
                                                        };
                                                    }
                                                 </script>
                             <script type="text/javascript">
                                 function GetId() {
                                     return {
                                         FacilityGroup: $("#FacilityGroup").val()
                                     };
                                 }
                             </script>
                              
                        </span>
                    </li>


    Now as you can see i am cascading the Region and the Facility Group dropdown from the Customer dropdown .
    my controller looks like dis :-
    public JsonResult GetCustomer()
          {
     
              var objCustomerName = CustomerNameTypeClient.GetCustomers().Select(CustomerT => new RegionModel
              {
                  CustomerId = CustomerT.CustomerId,
                  CustomerName = CustomerT.CustomerName
              });
              return Json(objCustomerName, JsonRequestBehavior.AllowGet);
          }
     
          /// <summary>
          /// Gets the region.
          /// </summary>
          /// <returns>Json</returns>
          public JsonResult GetRegion(string Customer)
          {
               
     
              var VarRegionName = FacilityClient.GetRegion(Customer);
     
              return Json(VarRegionName, JsonRequestBehavior.AllowGet);
          }
     
          /// <summary>
          /// Gets the name of the facility.
          /// </summary>
          /// <returns>Json</returns>
          public JsonResult GetFacilityGroupName(string Region, string Customer)
          {
     
     
     
              var VarFacilityGroupName = FacilityClient.GetFacilityGroup(Region, Customer);
     
                  
               
     
              return Json(VarFacilityGroupName, JsonRequestBehavior.AllowGet);
               
          }

    Now i need to drill down the facilitygroup dropdown further using  the selection in  region dropdownlist.

    Help!!!!
Back to Top