Filter menu customization with a DropDownList using DataTextField and DataValueField

[Mike]

I'm trying to add a DropDownList list for grid / filter menu customization per http://demos.telerik.com/aspnet-mvc/grid/filter-menu-customization. If I return a list of strings to the DropDownList list, it works just find. However if I return a list of classes and ​use the DataTextField and DataValueField ​properties, the user has to select the item a second time to get an item to select and when you click Filter you get nothing in the list:

function cityFilter(element) {

    element.kendoDropDownList({

        dataTextField: "Name",
        dataValuefield: "Id",
        dataSource: {

           transport: {

               read: "@Url.Action("FilterMenuCustomization_Cities")"

            }

       },

        optionLabel: "--Select Value--"

    });

}

 I can return strings instead of class instances but it seems that the latter really should work.

 

 

 

function cityFilter(element) {
    element.kendoDropDownList({
        dataSource: {
            transport: {
                read: "@Url.Action("FilterMenuCustomization_Cities")"
            }
        },
        optionLabel: "--Select Value--"
    });
}




function cityFilter(element) {
    element.kendoDropDownList({
        dataSource: {
            transport: {
                read: "@Url.Action("FilterMenuCustomization_Cities")"
            }
        },
        optionLabel: "--Select Value--"
    });
}




[Boyan Dimitrov]

Hello Mike,

 

I am afraid that the issue is not a known one, nor is reproducible in our online demos. I prepared a sample http://dojo.telerik.com/unAHA example that implements very similar scenario: 

 

   - The DropDownList in the filter row template is bound to remote data. 

   - As soon as item is selected the Kendo UI Grid is filtered properly by the text of the selected item. 

 

Regards,
Boyan Dimitrov
Telerik

 

 

[Mike]

 I'm using Razor. Here is an example that displays the problem using version 2015.3.930 (tested with IE10 and latest Firefox and Chrome).

View:

@(Html.Kendo().Grid<TelerikMvc5App1.Models.TestDataModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(e => e.FirstName);
        columns.Bound(e => e.LastName);
        columns.Bound(e => e.State)
            .Filterable(filterable => filterable.UI("stateFilterUsingModel"));
    })
    .Filterable(filterable => filterable
        .Extra(false)
        .Operators(operators => operators
            .ForString(str => str
                .Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
            )
        )
    )
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("TestData_Read", "FilterMenuCustomization"))
    )
)
<script type="text/javascript">
    function stateFilterUsingModel(element) {
        element.kendoDropDownList({
            dataTextField: "Name",
            dataValuefield: "Name",
            dataSource: {
                transport: {
                    read: "@Url.Action("FilterMenuCustomization_StatesUsingModel")"
                }
            },
            optionLabel: "--Select Value--"
        });
    }
</script>

Controller:

namespace Kendo.Mvc.Examples.Controllers
{
    public class FilterMenuCustomizationController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult TestData_Read([DataSourceRequest] DataSourceRequest request)
        {
            var list = new List<TestDataModel>();
            list.Add(new TestDataModel {
                FirstName = "Jane",
                LastName = "Doe",
                State = "Oregon"
            });
            list.Add(new TestDataModel {
                FirstName = "John",
                LastName = "Doe",
                State = "Oregon"
            });
            list.Add(new TestDataModel
            {
                FirstName = "Jimmy",
                LastName = "John",
                State = "Washington"
            });
            return Json(list.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }
        public ActionResult FilterMenuCustomization_StatesUsingModel()
        {
            var list = new List<TestLookupModel>();
            list.Add(new TestLookupModel("Oregon"));
            list.Add(new TestLookupModel("Washington"));
            list.Add(new TestLookupModel("Idaho"));
            list.Add(new TestLookupModel("California"));
            list.Add(new TestLookupModel("Nevada"));
            return Json(list, JsonRequestBehavior.AllowGet);
        }

    }
}

Model:

namespace TelerikMvc5App1.Models
{
    public class TestLookupModel
    {
        public TestLookupModel(string name)
        {
            Name = name;
        }
        public string Name { get; set; }
    }
}

 

[Boyan Dimitrov]

Hello Mike,

 

The problem is that the dataValueField option should be with capital "F". In the provided code it is written "dataValuefield". 

 

Regards,
Boyan Dimitrov
Telerik

 

 

[Mike]

OMG! Thank you and I'm sorry for wasting your time (and no small amount of mine!).

[FRANK]

In a SQL query I have case statement to produce a field name. For e.g: 

CASE user_status

        WHEN 0 THEN 'In-active'

        WHEN 1 THEN 'Active'

END AS user_status

Now when I try to filter the grid by the user_status it fails because the grid is passing the text value not the numerical value. 

Hence I am trying to use the customized dropdown list but I couldn't figure out passing key value pair of datasource. 

filterable:{
   cell:{
      template:function(args) {
      args.element.kendoDropDownList({
           dataSource:[{'Active':1,'In-active':0}],
           optionLabel:"-- Select One --"
       })
},
showOperators:false
},
extra:false
}

this is not working can you please help? 

[Boyan Dimitrov]

Hello,

I believe that the problem is the DataSource definition. Currently there is only one item in the DataSource with two properties. I guess that you are expecting to have two items in the DataSource with same text and value properties. Please refer to the following dataSource configuration for such scenario: 

dataSource:['Active','In-active'],

Regards,
Boyan Dimitrov
Progress Telerik