Filter menu customization with a DropDownList using DataTextField and DataValueField

7 posts, 1 answers
  1. Mike
    Mike avatar
    23 posts
    Member since:
    Jul 2008

    Posted 09 Nov 2015 Link to this post

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

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2060 posts

    Posted 11 Nov 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Mike
    Mike avatar
    23 posts
    Member since:
    Jul 2008

    Posted 11 Nov 2015 in reply to Boyan Dimitrov Link to this post

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

     

  4. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2060 posts

    Posted 13 Nov 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Mike
    Mike avatar
    23 posts
    Member since:
    Jul 2008

    Posted 13 Nov 2015 in reply to Boyan Dimitrov Link to this post

    OMG! Thank you and I'm sorry for wasting your time (and no small amount of mine!).
  6. FRANK
    FRANK avatar
    6 posts
    Member since:
    Feb 2009

    Posted 06 Dec 2017 in reply to Boyan Dimitrov Link to this post

    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? 

  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2060 posts

    Posted 08 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top