Questions on UI for ASP.NET MVC Forum

2 answers

233 views

[Solved] Kendo UI grid pagination takes search field placeholder text as request parameter in IE

We have a page with Kendo UI grid and simple search field with Kendo UI Autocomplete inititated on it. Search field has a placeholder "Type resource key".

On any version of internet explorer, when user navigates grid using pagination, the "GetResourceValues" function, that populates grid, gets search field's placeholder value as request parameter:

sort=&page=2&pageSize=25&group=&filter=&language=-&searchKeyword=Type+resource+key&resourceType=

While in other browsers the request looks like this:

sort=&page=3&pageSize=25&group=&filter=&language=-&searchKeyword=-&resourceType=

This leads to empty grid results after using pagination. Can it be Kendo UI bug?

Here is part of the code:

@(Html.Kendo().Grid<ResourceViewModel>()
          .Name("resourcesList")
          .Events(e => e.DataBound("handleDataBound"))
          .Pageable()
          .Resizable(resizable => resizable.Columns(true))
          .ClientDetailTemplateId("resourceDetailsTemplate")
          .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .Events(events => events.Error("errorHandler"))
                                        .ServerOperation(true)
                                        .Batch(false)
                                        .Model(model => model.Id(res => res.Id))
                                        .Create(create => create.Action("CreateResource", "Resources"))
                                        .Update(update => update.Action("UpdateResource", "Resources"))
                                        .Destroy(destroy => destroy.Action("DeleteResource", "Resources"))
                                        .Read(read => read.Action("GetResources", "Resources").Data("searchCriteria"))
                                        .PageSize(25))
          .Sortable()
          .Scrollable()
          .ToolBar(factory =>
                   factory.Template(@<text>
        <div class="k-grid-toolbar-row">
            <input id="resourceSearch" class="k-grid-toolbar-search-field" />
        </div>
    </text>)))

<script>
    $(document).ready(function () {
        var autocompleteSymbol = $("#resourceSearch").kendoAutoComplete({
            dataTextField: "Key",
            minLength: 2,
            dataValueField: "Key",
            filter: "contains",
            placeholder: "Type resource key",
            dataSource: {
                type: "json",
                transport: {
                    read: "Resources/GetAutoComplete",
                    maxRows: 50000
                }
            },
            change: filterResources
        });
    });
</script>

Grid

answered on 16 Sep 2013

1 answer

90 views

How to use filtered data for other uses

I want to use the mvc wrappers grid filter to select a sub group of data, and then use that data to send a sms. How do access that data using on the server?
Thanks

Grid

answered on 16 Sep 2013

1 answer

232 views

[Solved] ListView not passing Model to EditorTemplate

I have a list view that supports viewing and deleting attached files. That works just fine. The problem I am having is when I try to add a new file to the list. I have a custom editor template for the AttachedFile object, but when the editor runs the Model passed into it is empty. I have specified a default value on the field that I need to access in editor template, which I would assume would be passed to the editor.

Here is my ListView:

@(Html.Kendo().ListView<AttachedFile>()

.Name("attachedFilesListView")

.TagName("div")

.ClientTemplateId("attachedFilesTemplate")

.DataSource(dataSource => dataSource

.Model(model => {

model.Id(f => f.AttachedFileID);

model.Field(f => f.EntityTableKey).DefaultValue(Model.CorrectiveActionItemID);

})

.Read(read => read.Action("Files_Read", "CorrectiveActionItem", new { correctiveActionItemId = Model.CorrectiveActionItemID }))

.Destroy(destroy => destroy.Action("Files_Delete","CorrectiveActionItem"))

.PageSize(4)

)

.Pageable()

.Editable()

)

Here is my EditorTemplate:

@model AttachedFile

@(Html.Kendo().Upload()

.Name("files")

.Async(a => a.Save("SaveFile", "CorrectiveActionItem", new { correctiveActionItemId = Model.EntityTableKey })

.AutoUpload(true))

)

The problem is the Model.EntityTableKey is empty in the editor.

What am I doing wrong? Shouldn't the default value be passed to the editor template?

ListView

answered on 13 Sep 2013

3 answers

1.5K+ views

[Solved] 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

595 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

185 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

547 views

[Solved] 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

349 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

178 views

[Solved] 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

710 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