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

DEP0700 : Registration of the app failed. Windows cannot install package xx-xx-xx-xx-xx because the package requires architecture ARM, but this computer has architecture x64.

The other day I download Bing Maps C# LocationTracking Sample from MSDN to play with it. I have to download and install Bing Maps SDK for Windows Store apps grab a Bing Maps Key and put it into the sample. Everything seems to be fine and I have no issue building the app. However, once I try to deploy it I got the error.

Error    1    Error : DEP0700 : Registration of the app failed. Windows cannot install package 21338721-D4C4-4529-B0CE-F71A3BA1B7B1 because the package requires architecture ARM, but this computer has architecture x64. (0x80073cf3)    LocationTrackingSample

image

It turns out that the project is set to deploy on ARM platform. To fix it, I just go to Solution Property Pages by right-clicking the Solution name and choose “properties.”

image

Once you are in the property page, you can change ARM to x64 or x86 and that should fix it.

image

image

That is it. Now I can deploy and play with it.

image

This issue seems to be simple to fix, but if you don’t know what to look for, it can be frustrated. Enjoy coding!