Questions on UI for ASP.NET MVC Forum

3 answers

1.5K+ views

ComboBox with Server FIltering Not Working

Hello,

I have a combobox that I want to implement server filtering on - I have followed the example in the demo but I cannot get the filter to work, the items bind correctly upon selecting the dropdown but the autocomplete filter doesn't filter. The filter works perfectly clientside but not when I implement serverfiltering. Am I missing something on the controller end?

My View Code:

@(Html.Kendo().ComboBoxFor(model => model.AffectedUser)

.Placeholder("Choose One...")

.DataTextField("Text")

.DataValueField("Value")

.Filter(FilterType.Contains)

.AutoBind(false)

.DataSource(dataSource => dataSource

.Read(read => read.Action("GetUserList", "User"))

.ServerFiltering(true)

))

My Controller Code:

public class UserController : Controller

{

public JsonResult GetUserList(string group, string filter)

{

var items = new

List<SelectListItem>();

for (int i = 1; i <= 500; i++)

{

items.Add(new SelectListItem { Value = i.ToString(), Text = "John"});

}

items.Add(new SelectListItem { Value = "Jane", Text = "Jane" });

return Json(items.AsEnumerable(), JsonRequestBehavior.AllowGet);

}

Thanks,
Carrie

ComboBox

answered on 13 Sep 2013

1 answer

570 views

DatePicker and DateTimePicker both throw exception: Value cannot be null. Parameter name: key

Hi,

I have a datepicker on my cshtml view.  I'm creating it with the following line (which I'm using elsewhere successfully):
@Html.Kendo().DateTimePicker().HtmlAttributes(new { @id = "fltBeginDate" }).Value(DateTime.Now).Format("MM/dd/yyyy")
When the view tries to load, I get the following error:
Value cannot be null.
Parameter name: key

StackTrace:
   at System.Collections.Generic.Dictionary`2.FindEntry(TKey key)
   at System.Collections.Generic.Dictionary`2.TryGetValue(TKey key, TValue& value)
   at System.Web.Mvc.ModelStateDictionary.TryGetValue(String key, ModelState& value)
   at Kendo.Mvc.UI.InputComponentExtensions.GetAttemptedValue[T](IInputComponent`1 instance)
   at Kendo.Mvc.UI.Html.DatePickerHtmlBuilderBase.Build()
   at Kendo.Mvc.UI.DateTimePicker.WriteHtml(HtmlTextWriter writer)
   at Kendo.Mvc.UI.WidgetBase.ToHtmlString()
   at Kendo.Mvc.UI.Fluent.WidgetBuilderBase`2.ToHtmlString()
   at System.Web.HttpUtility.HtmlEncode(Object value)
   at System.Web.WebPages.WebPageBase.Write(Object value)
   at ASP._Page_Views_PlantDeclaration_Index_cshtml.Execute()

Any help is appreciated!

Thanks,

Eddie

DatePicker

answered on 13 Sep 2013

5 answers

169 views

Possbile issues with the asp.net mobile helpers and ServerNavigation

Hi,

I'd like to report a few possible issues with the asp.net mobile framework. I'm saying possible, as I'm not sure if my application is setup completely correctly.

Whenever my .ServerNavigation is set to true, the transitions between views (i.e. "fade") stops working. It just flicks between pages without any effect.
I'm trying to implement a drawer in one of my views, but this does not seem to work either when the .ServerNavigation is set to false. It seems to duplicate my url, so that the application does not quite understand where to navigate. I.e. when ServerNavigation is set to true, my links look like the following: "http://localhost/Stimline.Xplorer.Mobile/UnitDetails/Index/1#/". Both the drawer and "back" button seems to work correctly with this in place. Now, if i change my ServerNavigation to false, the link will look like the followng after presssing the "back" button once and navigate back to the view again with a link: "http://localhost/Stimline.Xplorer.Mobile/UnitDetails/Index/1#/Stimline.Xplorer.Mobile/UnitDetails/Index/1". As a result of this, both my drawer and "back" button stops working.

Here's my MobileApplication() as defined in my shared _Layout.cshtml:

@(Html.Kendo().MobileApplication()

.ServerNavigation(false)

.Transition("fade")

.HideAddressBar(true)

.Skin("flat")

)

And here's my "drawer" layout:

@(Html.Kendo().MobileLayout()

.Name("drawer-layout")

.Header(obj =>

Html.Kendo().MobileNavBar()

.Content(navbar =>

@<text>

@(Html.Kendo().MobileButton()

.Align(MobileButtonAlign.Left)

.Icon("drawer-button")

.Rel(MobileButtonRel.Drawer)

.Url("#my-drawer")

)

@navbar.ViewTitle("")

@(Html.Kendo().MobileButton()

.Align(MobileButtonAlign.Right)

.Text("Back")

.HtmlAttributes(new { @class = "nav-button" })

.Url(Url.RouteUrl(new { controller = "home" }))

)

</text>)

)

Application

answered on 13 Sep 2013

2 answers

514 views

Iterating over DataSourceRequest Filters

We used to iterate over DataSourceRequest filters like this:
foreach (var filter in request.Filters)
{
var descriptor = filter as FilterDescriptor;
if (descriptor != null)
{
//do stuff
}
}
Since we moved to Q3(v2013.2.906) this simple solution no longer works. With 2 or more filters applied to datasource, requestFilter is single CompositeFilterDescriptor with 2 children, CompositeFilterDescriptor and FilterDescriptor, and so long.
Is this a feature or a bug? If this is a feature is there any elegant solution to 'do stuff' or turn it off and get back to good old FilterDescriptor collection?

Right now we're using crude recursion to preprocess the filters, but that does not feel quite right. ;-)

General Discussions

answered on 13 Sep 2013

1 answer

311 views

Filtering on multiple fields

Hi,
The Mobile ListView Filtering demo explains how to filter a datasource on a single field. I'm looking to filter a directory of users on two fields - I want to return a list of users when either their firstname OR surname starts with a search argument.

Looking at forum posts for the Web ListView widget, it appears you can specify multiple search fields and associated logic condition (eg. And, Or).

1. Does the Mobile ListView Filterable configuration allow you to specify two filter fields?
2. If so, what would be the syntax to achieve this using the Mobile ListView MVC wrapper?

Best regards, Ian

ListView (Mobile)

answered on 12 Sep 2013

1 answer

158 views

ComboBox not showing the X to unselect

Hello,

I am trying to implement the combo box and it is rendering and working fine except that I don't get the "X" inside the input once a selection is made. The X is used to unselect. What is wrong with my code?

I am using version 2013.2.716 - it does work in IE but not in Firefox

Thanks,
Carrie

@(Html.Kendo().ComboBoxFor(model => model.Impact)

.Placeholder("Choose One...")

.DataTextField("Text")

.DataValueField("Value")

.Suggest(true)

.DataSource(dataSource => dataSource

.Read(read => read.Action("GetImpactList", "Enum"))

))

ComboBox

answered on 12 Sep 2013

1 answer

687 views

Changing command.Edit() Kendo Icon to Custom Icon

I know this is a very trivial solution however I can't seem to figure how to do this.

Here is my scenario.

I have a grid with some columns, one of them being the built in kendo command.Edit() button. Now this button has a standard icon associated with it from kendo.

What I am trying to do is change that icon to a custom icon that I have created.

The following allows me to do so with CSS however when I hover over it (right before I click) the icon is removed. I am looking for either the CSS to not remove the icon on hover or another viable solution. I do not want to change the command.Edit() to a custom command.

Here is the CSS

.k-grid .k-edit
{
background-position: 0 0 ;
background-image: url('...');

}

Thanks
Nav

Grid

answered on 12 Sep 2013

5 answers

666 views

Kendo Grid UI Html helper grid editing

I've got a strongly typed razor view tied to an IEnumerable of an Object.

I'd like to add the ability to edit, in line, some, one or more, of the cells.

@using Kendo.Mvc.UI

@model IEnumerable<MyObject>

<legend>Objects</legend>

@(Html.Kendo().Grid(Model)

.Name("object-grid")

.Columns(columns =>

{

columns.Bound(m => m.Description).Title("Product");

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

columns.Bound(m => m.Quantity)

.HtmlAttributes(new { @class = "quantity" });

})

.Scrollable()

.Selectable()

.Editable(editable => editable.Mode(GridEditMode.InLine))

.DataSource(dataSource => dataSource

.Server()

.Model(model => model.Id(m => m.Id)))

)

How do I add an editor for my quantity field in this example?
Am I incorrectly setting up my view with an IEnumerable of my object?

In this example, the grid seems to be bound to an order object, not an IEnumerable of order,
and the developer can then simply use Html.EditorFor.

@Html.EditorFor(o => o.Quantity);

Grid

answered on 12 Sep 2013

2 answers

59 views

<A> tag when building a TabStrip with the MVC wrapper

Is there a way to tell the MVC wrapper of TabStrip no to create the <a> tags? It does conflict with the hash navigation of my single page application.
Thanks.

Lutfi

TabStrip

answered on 11 Sep 2013

5 answers

161 views

Refresh and paging not working. Getting "do you want to save or download read.json"

Hi,

I sent an email to support 2 days ago for this as I was told that emails are responded to within 24 hours. No reply. So trying on the forums now.

I have a grid that has columns dynamically created. It populates just fine.

When attempting to move to the next page or do a refresh, my browser asked me if I want to download or save read.json.

In my other grids with static columns (predefined), it works fine. It is just in this grid where the columns are dynamically created.

How do I fix this?

My View

@using Kendo.Mvc.UI

@model System.Data.DataTable

@{

Layout = null;

}

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>@ViewBag.Title</title>

<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<meta name="viewport" content="width=device-width" />

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.common.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.blueopal.min.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/kendo/2013.2.716/jquery.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo/2013.2.716/kendo.all.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo/2013.2.716/kendo.aspnetmvc.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>

</head>

<body style="height: 100%">

<div id="body">

@(Html.Kendo().Grid(Model)

.Name("Grid")

.Columns(columns =>

{

foreach (System.Data.DataColumn column in Model.Columns)

{

columns.Bound(column.ColumnName);

}

})

.Pageable(pager => pager.Refresh(true))

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

foreach (System.Data.DataColumn column in Model.Columns)

{

model.Field(column.ColumnName, column.DataType);

}

})

.Read(read => read.Action("Read", "View", new { area = "DisplayPanel" }))

)

</div>

</body>

</html>

My Controller

using System;

using System.Web.Mvc;

using Kendo.Mvc.Extensions;

using Kendo.Mvc.UI;

using Smartrail.Application;

using Smartrail.Common;

using Smartrail.Domain.Service.Contracts;

namespace SmartrailWeb.Areas.DisplayPanel.Controllers

{

public class ViewController : Controller

{

public ActionResult Index()

{

using (var uow = ApplicationContext.ServiceLocator.GetInstance<IPresentationUnitOfWork>())

{

var service = ApplicationContext.ServiceLocator.GetService<IDisplayPanelCreatorService>(uow);

return View(service.GetDataSet(new DateTime(1990, 1, 1), null));

}

[HttpGet]

public ActionResult Read([DataSourceRequest] DataSourceRequest request)

{

using (var uow = ApplicationContext.ServiceLocator.GetInstance<IPresentationUnitOfWork>())

{

var service = ApplicationContext.ServiceLocator.GetService<IDisplayPanelCreatorService>(uow);

return Json(service.GetDataSet(new DateTime(1990, 1, 1), null).ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}

Please would someone respond ASAP. I am falling behind with my deadlines and need to get this sorted out ASAP.

TIA

Grid

answered on 11 Sep 2013