Returning a value from Kendo drop down list

Question

Solved: All I did was change the DataTextField and the DataValueField to both "Type" and that way when I returned .val() it gave me the exact same field as the text.

I am trying to return a value to my Controller from the view from a Kendo drop down list's selected index using script. So far I can only make it return the index value and not the text.

Side Problem: Also the distinct does not work in this current context, if I remove the .DataValueField from the view as well as take out Product ID from my DTO and Controller I can get the distinct values of just the .DataTextField("Type").

Main Problem: is that name: $("#typeDropDownList").val() is only grabbing the ProductID (like it should) and if I try and make it grab it by .text() instead it gives me a "" (blank string) as a result every time. I am wondering how I can grab just the text value of the drop down list.

It will be updating a Kendo Grid as well.

I am fairly new to programming and I am on a workterm, go easy on me please.

Here is my View

<h2>Products</h2>

@(Html.Kendo().DropDownList()
  .Name("typeDropDownList")
  .HtmlAttributes(new { style = "width: 250px" })
  .DataTextField("Type")
  .DataValueField("ProductID")
  .DataSource(source => 
       { 
         source.Read(read => 
         { 
             read.Action("GetList", "AdvSlider")
             .Data("refresh"); 
         })
         .ServerFiltering(true); 
       }) 
  .OptionLabel("Select a type")        
  .Events(e => e.Change(
      @<text>
      function(e){
        $("#grid").data("kendoGrid").dataSource.read();
      }</text>
      ))
)



@(Html.Kendo().Grid<SKLiqPOC.Models.PatDTO>()
  .Name("grid")
  .DataSource(dataSource => dataSource // Configure the grid data source
      .Ajax() // Specify that ajax binding is used
      .ServerOperation(false)          
      .Read(read => read.Action("GetJson", "AdvSlider")
      .Data("refresh"))
      // Set the action method which will return the data in JSON format
      .PageSize(20)          
   )
     .Columns(columns => {
    //columns.Bound("Name");
         columns.Bound(a => a.ProductID).Filterable(false).Width(100);
         columns.Bound(a => a.Description);
         columns.Bound(a => a.ProductName).Width(160);
         columns.Bound(a => a.Manufacturer).Width(160);
         columns.Bound(a => a.Price).Format("{0:C}").Width(130);
  })

  .Pageable() // Enable paging
  .Sortable() // Enable sorting
  .Filterable() //Enable filtering
  .Scrollable()
  .HtmlAttributes(new { style = "height:430px;" })
)  
<script>
 function refresh()
{        
    return {
        name: $("#typeDropDownList").val()
    };
};
</script>

Here is my controller

namespace SKLiqPOC.Controllers
{
public class AdvSliderController : Controller
{

    private SKLIQContext db = new SKLIQContext();

    public ActionResult Index()
    {
        return View();
    }

    public ActionResult GetList()
    {
        IQueryable<ddlDTO> dtoQuery = (
        from name in db.t_prdct_fmly

        join product in db.t_prdct on name.prdct_fmly_sys_key_id equals product.prdct_fmly_sys_key_id
        join nameCat in db.t_prdct_fmly_ctgy on name.prdct_fmly_sys_key_id equals nameCat.prdct_fmly_sys_key_id
        join type in db.t_prdct_ctgy on nameCat.prdct_ctgy_sys_key_id equals type.prdct_ctgy_sys_key_id

        where !product.excl_fr_srch

        select new ddlDTO
        {
            Type = type.shrt_descr,
            ProductID = product.prdct_fmly_sys_key_id                             
        }).Distinct();

        return Json(dtoQuery, JsonRequestBehavior.AllowGet);
    }


    public ActionResult GetJson([DataSourceRequest]DataSourceRequest request, string name)
    {
        IEnumerable<PatDTO> dtoQuery = GetItems(name);

        if (dtoQuery.Count() <= 0) //If no items are found add a message in the grid stating such
            dtoQuery = new PatDTO[1] { new PatDTO { ProductName = "No Items Found" } };

        DataSourceResult result = dtoQuery.ToDataSourceResult(request);
        return Json(result, JsonRequestBehavior.AllowGet);
    }
    public IQueryable<PatDTO> GetItems(string query)
    {
        IQueryable<PatDTO> dtoQuery =
        from product in db.t_prdct

        join name in db.t_prdct_fmly on product.prdct_fmly_sys_key_id equals name.prdct_fmly_sys_key_id
        join type in db.t_prdct_ctgy on product.prdct_typ_cd equals type.prdct_ctgy_sys_key_id
        join country in db.t_cntry_orig on product.cntry_orig_cd equals country.cntry_orig_sys_key_id
        join region in db.t_regn_orig on product.regn_orig_cd equals region.regn_orig_sys_key_id

        where !product.excl_fr_srch
        && type.shrt_descr.ToLower().Contains(query.ToLower())

        select new PatDTO
        {
            ProductID = product.prdct_fmly_sys_key_id,
            Price = product.retl_price,
            ProductName = product.t_prdct_fmly.prdct_fmly_nm,
            Manufacturer = name.mnfct_nm,
            Description = name.mrkt_nrtv
        };

        return dtoQuery; 
    }
}
}

and also my DTO

namespace SKLiqPOC.Models
{   
    public class ddlDTO
    {         
        public string Type { get; set; }
        public int ProductID { get; set; }
    }
}

Late edit : Looks like you found the solution on your own. DataTextField is used as the value displayed in the drop down and DataValueField is used as what the input captures as final value. I.e. if you have a list for phone codes, you can display "+61 Australia" with DataTextField but capture only the value "61" — Yann

Bill Hayden Bill Hayden · Accepted Answer · 2013-06-14T05:32:01

You can get the text value through the text property like this:

var selectedText = $("#typeDropDownList").data("kendoDropDownList").text()

Returning a value from Kendo drop down list

1 Answers