This is a migrated thread and some comments may be shown as answers.

Filter Menu Customization Is Not Working

3 Answers 220 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Ranganath asked on 12 Mar 2013, 12:27 PM

Hi,

I am using the Trial version of Kendo UI for ASP.NET MVC [2012.3.1315.340]. I am trying to customize the filter menu for a grid column as per the demo provide at the site - http://demos.kendoui.com/web/grid/filter-menu-customization.html

However, I cannot seem to get this to work. Below is my code

@(Html.Kendo().Grid<MyViewModel>()

.Name("importersGrid")

.Columns(columns =>

{

columns.Bound(m => m.Status).ClientTemplate("#=StatusText#").Filterable(filterable => filterable.UI("statusFilter");

columns.Bound(m => m.ActionOn).Format("{0:MMM dd, yyyy HH:mm}");

columns.Bound(m => m.Name).Title("Organization Name").ClientTemplate(@"# if (Status != 1) {# <a href=""Organizations/Show?id=#=PublicId#"">#=Name#</a> #} else {# <a href=""Importers/ApproveReject?id=#=PublicId#"">#=Name#</a>#}#");

columns.Bound(m => m.OrganizationCode);

columns.Bound(m => m.PrimaryLocation.City).Sortable(false);

columns.Bound(m => m.PrimaryLocation.Country).Sortable(false);

columns.Bound(m => m.PublicId).Sortable(false).Title("Actions").ClientTemplate(@"# if (Status==1) { #<a href=""Organizations/ApproveReject?id=#=PublicId#"" class=""approve-reject k-button"">Approve/Reject</a>#}#");

})

.Scrollable()

.Filterable(filterable => filterable.Extra(false).Operators(operators => operators

.ForString(str => str.Clear()

.StartsWith("Starts with")

.IsEqualTo("Is equal to")

.IsNotEqualTo("Is not equal to")

)))

.Sortable(sortable => sortable.SortMode(GridSortMode.SingleColumn))

.Pageable(pageable => pageable.ButtonCount(5).PageSizes(new[] { 10, 25, 35 }).Info(true).Numeric(true).Messages(messages => messages.Display("Displaying {0} to {1} of {2} organizations")))

.DataSource(dataSource =>

dataSource

.Ajax()

.ServerOperation(true)

.Sort(sort => sort.Add("Status").Ascending())

.Read(read => read.Action("GetCompanies", "Organizations", new { Area = "MyCompanies" }).Type(HttpVerbs.Get))

))

And below is my JavaScript

<script type="text/javascript">

function statusFilter(element) {

element.kendoDropDownList({

dataSource: [

{ text: "A", value: "1" },

{ text: "B", value: "2" },

{ text: "C", value: "3" },

{ text: "E", value: "4" }

],

filter: "contains"

});

}

</script>

Now the MyViewModel.Status is an enum with values X, Y, Z.

When I run the application, and I get to see the Grid. The filter shows a dropdown of values X, Y, Z as per the Enum which is not what I expected. I wanted to see A, B,C, E as values and for some reason the statusFilter() function is never called. I set debug points using Web Dev tools in Chrome and it is never hit. I even placed the script tag above the point I declared the Grid. I see no JavaScript errors.

Please help!

Regards,
Ranganath Kini

Filter Menu Customization Is Not Working

3 Answers, 1 is accepted