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; }
    }
}

Answer 1

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

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