This is a migrated thread and some comments may be shown as answers.
Filter menu customization with a DropDownList using DataTextField and DataValueField
6 Answers 183 Views
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 10 Nov 2015, 12:28 AM

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

6 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 11 Nov 2015, 01:51 PM

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!
 
0
Mike
Top achievements
Rank 1
answered on 11 Nov 2015, 08:14 PM

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

 

0
Accepted
Boyan Dimitrov
Telerik team
answered on 13 Nov 2015, 04:18 PM

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!
 
0
Mike
Top achievements
Rank 1
answered on 13 Nov 2015, 05:09 PM
OMG! Thank you and I'm sorry for wasting your time (and no small amount of mine!).
0
FRANK
Top achievements
Rank 1
answered on 06 Dec 2017, 09:04 PM

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? 

0
Boyan Dimitrov
Telerik team
answered on 08 Dec 2017, 04:40 PM

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.
Tags
Grid
Asked by
Mike
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Mike
Top achievements
Rank 1
FRANK
Top achievements
Rank 1
Share this question
or