How to : Kendo UI Grid for ASP.NET MVC

Customize the Filter menu items:

Grid Helpers:

@(Html.Kendo().Grid(Model)
    .Name("People")
    .Columns(cols =>
    {
		...
		cols.Bound(m => m.ResidenceState)
			.Title("State")...
			.Filterable(filter =>
			{
				filter.UI("statesFilter");
				filter.Operators(f => f.ForString(o =>
				{
					o.Clear();
					o.IsEqualTo("Is Equal To");
					o.IsNotEqualTo("Is Not Equal To");
				}));
	        });
    ...
    })
)

JavaScript:

function statesFilter(element)
{
   element.kendoDropDownList({
   dataSource:
   {
       data: @(Html.Raw(Json.Encode(ViewData["States"])))
   }});
}

Controller:

public ActionResult Index()
{
    ViewData["States"] = SamplePeople.States;
    return View();
}

With this set up my filter menu shows only “Is Equal To” and “Not Equal To.” My filter menu will also use our state filter UI.

image

Column ClientTemplate:
Grid Helpers:

@(Html.Kendo().Grid(Model)
	.Name("People")
	.Columns(cols =>
	{
		...
		cols.Bound(m => m.ResidenceState)
		.Title("State")
		.ClientTemplate("#=getStatesTemplate(ResidenceState)#")
		...
	})
	...
)

JavaScript:

function getStatesTemplate(state)
{
	switch(state)
	{
		case "California":
		case "Washington":
		case "Tennessee":
		case "Oregon":
		case "Texas":
			return "<b>"+state+"</b>";
		default: return state;
	}
}

California and other states are shown in bold.

image

Customized EditorTemplate:
Grid Helpers:

@(Html.Kendo().Grid(Model)
	.Name("People")
	.Columns(cols =>
	{
		...
		cols.Bound(m => m.ResidenceState)
			.Title("State")
			...
			.EditorTemplateName("StateEditor")
			.Filterable(filter =>
			{
				filter.UI("statesFilter");
				filter.Operators(f => f.ForString(o =>
				{
					o.Clear();
					o.IsEqualTo("Is Equal To");
					o.IsNotEqualTo("Is Not Equal To");
				}));
			});
		...
	})
	...
)

EditorTemplate (Views/Shared/EditorTemplate/StateEditor.cshtml):

@(Html.Kendo().DropDownList()
   .Name("States")
   .BindTo(((System.Collections.IEnumerable)ViewData["States"]) )
)

When I click “edit”, I will get the drop-down list of states.

image

Advertisements

3 thoughts on “How to : Kendo UI Grid for ASP.NET MVC

  1. Hi I was just wondering if the Filterable template stuff aka
    .Filterable(filter =>
    {
    filter.UI(“statesFilter”);
    filter.Operators(f => f.ForString(o =>
    {
    o.Clear();
    o.IsEqualTo(“Is Equal To”);
    o.IsNotEqualTo(“Is Not Equal To”);
    }));
    });

    was an addon or something.. in my razor view in the latest version of kendo UI im only getting
    Filterable(bool something) as an overload..

    Cheers,
    Tom

    • Umm. I don’t think so, but I need to double check. What is your Kendo UI version. The Kendo UI site has similar sample, http://demos.kendoui.com/web/grid/filter-menu-customization.html.

      What happen when you do F12? Do you see two filterable methods like the code below?

      namespace Kendo.Mvc.UI.Fluent
      {
      // Summary:
      // Defines the fluent interface for configuring bound columns
      //
      // Type parameters:
      // T:
      // The type of the data item
      public class GridBoundColumnBuilder : GridColumnBuilderBase<IGridBoundColumn, GridBoundColumnBuilder> where T : class
      {

      public GridBoundColumnBuilder Filterable(Action configurator);
      public GridBoundColumnBuilder Filterable(bool value);

      }
      }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s