Questions on UI for ASP.NET MVC Forum

7 answers

1.5K+ views

Weird behavior with Kendo Grid returning a 500 error with large datasets

I am having some issues trying to get a grid binding to a dataset of about 10,000 records.

Within my layout I have my scripts set as

<link rel="stylesheet" href="https://da7xgjtj801h2.cloudfront.net/2013.1.514//styles/kendo.common.min.css">

<link rel="stylesheet" href="https://da7xgjtj801h2.cloudfront.net/2013.1.514/styles/kendo.default.min.css">

@Styles.Render("~/Content/all")

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

@Scripts.Render("~/bundles/all")

<script src="https://da7xgjtj801h2.cloudfront.net/2013.1.514/js/kendo.web.min.js"></script>

<script src="https://da7xgjtj801h2.cloudfront.net/2013.1.514/js/kendo.aspnetmvc.min.js"></script>

My grid set as

@(Html.Kendo().Grid<ZZ.Model.ProductModel>()

.Name("products-grid")

.Columns(columns =>

{

columns.Bound(o => o.id).ClientTemplate("<input type='checkbox' data-id='#: id #'/>").Title(" ").Sortable(false).Width(22).Filterable(false);

columns.Bound(o => o.name).Title("Name").Width(140);

columns.Bound(o => o.handle).Title("Handle").Width(140);

columns.Bound(o => o.type).Title("Type").Width(140);

columns.Bound(o => o.sku).Title("SKU").Width(80);

})

.Scrollable()

.Resizable(r=>r.Columns(true))

.Sortable()

.Filterable()

.Pageable(p=>p.Messages(m=>m.Display("{0}-{1} of {2} products")))

.HtmlAttributes(new { style = "height: 600px" })

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(250)

.Read(read => read.Action("GetProducts", "Products"))

)

// .Events(events => events.Change("select"))

)

My controller

public JsonResult GetProducts([DataSourceRequest] DataSourceRequest request)

{

var businessId = BusinessInfo.Id;

var result = _repository.GetProductsInDatabase(businessId).OrderBy(o=>o.handle).ToDataSourceResult(request);

return Json(result, JsonRequestBehavior.AllowGet);

}

Now when I try load the page I get a 500 error telling me that the json amount is to large.
If I switch the order the 2 kendo scripts are loaded to be

<script src="https://da7xgjtj801h2.cloudfront.net/2013.1.514/js/kendo.aspnetmvc.min.js"></script

>

<script src="https://da7xgjtj801h2.cloudfront.net/2013.1.514/js/kendo.web.min.js"></script>

The grid loads but there is a js error "Uncaught TypeError: Cannot read property 'jQuery' of undefined " and I am unable to filter or sort.

Anyone else ran into this problem before?

Grid

answered on 22 May 2013

1 answer

322 views

Persist column selection in cookie

Hi,

this issue is a followup on this thread!

I am trying to extend the example to persist column state in a cookie. Users can hide/show/resize columns. I thought I could use the same method described in the thread above. Here is my code:

// Add handlers to show and hide events

.Events(events => events.ColumnHide("onColumnHideIOrShow"))

.Events(events => events.ColumnShow("onColumnHideIOrShow"))

// Function is called when a column is hidden or Shown

function onColumnHideIOrShow(e) {

var columnlistCookieName = "GridMarColumns";

var grid = $("#GridMar").data("kendoGrid");

var columns = grid.columns;

var serializedColumns = kendo.stringify(columns);

$.cookie(columnlistCookieName, serializedColumns);

}

// On load recreate the column list as found in the cookie

$(document).ready(function () {

var columnlistCookieName = "GridMarColumns";

var serializedColumns = JSON.parse($.cookie(columnlistCookieName));

var grid = $("#GridMar").data("kendoGrid");

if (serializedColumns) {

grid.columns = serializedColumns;

}

When I hide a column from the grid, the column is hidden and I can see that the cookie now has the right information. When I reload the page however, the column is present in the grid, in the columnmenu however, it is no longer there (see image attached). The columns strasse is visible on the gird, but not in the list of columns that I could make visible or invisible.

Thank you for your suggestions on this issue!

Grid

answered on 22 May 2013

13 answers

321 views

Editor Issues with Firefox 17

Currently when using the Editor within Firefox 17, it does not gain focus nor permit any kind of editing. This issue does not appear with either the latest Chrome or IE.

Currently using the Build: v2012.3.1114 with MVC 4.

Other factors is that this is being used as part of an Popup-editor template with Kendo Grid.

Cheers,
Jeremy

Editor

answered on 22 May 2013

1 answer

122 views

Min / Max Version of JQuery?

I just noticed that the MVC 4 project in VS 2012 includes JQuery 1.7.1

If you include this version instead of the included /Scripts/kendo/2013.1.514/jquery.min.js then the date picker does not function properly if you page through the years.

remove reference to Scripts/kendo/2013.1.514/jquery.min.js
include reference to Scripts/jquery-1.7.1.min.js

add this to an MVC 4 site View

<div id="dataBind">
@(Html.Kendo().DatePicker().Name("dob").HtmlAttributes(new { data_bind="value: DateOfBirth"}))
</div>
<script>
var Model;
$(document).ready(function(){
Model = kendo.observable({
DateOfBirth: false
});
kendo.bind($("#dataBind"), Model);
});
</script>

Navigate to the page and select the DatePicker calendar
Select the Month Year section

The Months page does not show the months. Various navigation results in various effects to the Calendar DropDown view.

I guess my question is what is the version of JQuery supported by Kendo?

Date/Time Pickers

answered on 22 May 2013

1 answer

442 views

Setting the DataSourceSchema attribute of the datasource in a kendo combobox in Razor syntax

I am tring to synco a streets combo which is cascaded with a citys combo with it's value in the model.
I am tring to use the fallowing js lines:

var combobox = $("#MyStreetsCombo").data("kendoComboBox);
var dataItem = combox.dataSource.get(combobox.value());
combo.select(dataItem);

var dataItem is always undefined.

I have seen this post http://www.kendoui.com/forums/ui/dropdownlist/why-doesn-t-mydropdowncontrolid-data-kendodropdownlist-datasource-get-1-work.aspx
but I do not understand how to pass the jsonobject DataSourceSchema to set the id of the model in the rasor syntax.

@(Html.Kendo().ComboBox()
.Name("StreetsCombo")
.DataTextField("Text")
.DataValueField("Value")
.DataSource(source => {
                                     source.Read(read =>
                                        {
                                           readAction("Action" , "Controller")
                                           .Data("filterFunction");
                                          })
                                         .ServerFiltering(true)
                                         .DataSourceSchema( new {model ..... id = 'Value'}).???;

)

Ariel

ComboBox

answered on 22 May 2013

1 answer

89 views

Filter row on MVC grid (like AJAX grid)

The AJAX grid is capable of displaying an always visible filter row in the header (see http://demos.telerik.com/aspnet-ajax/grid/examples/programming/filteringtemplatecolumns/defaultcs.aspx for an example).

Is there any setting that would make the MVC grid behave the same (rather than the drop-downs in the header)?

Grid

answered on 21 May 2013

7 answers

267 views

Package Installation Error

I just opened VS2012, created a new Kendo UI MVC Project, followed the wizard steps and was slapped with this (see image at Screen Shot - also attached file). It appears I am missing a ton of jQuery, Modenizr, OAuth, knockout.js, razor packages and more. Is this normal? Do I need to track down each of these packages? Once I do, will they be available for the next new project I create?

TIA

Keith

Installer and VS Extensions

answered on 21 May 2013

1 answer

123 views

Getting generated query from Kendo UI Grid MVC

Hello,

Is there a way to get the generated query from the Kendo UI Grid? I would like to get this query that has anything the user selected such as sorting, grouping, filtering, ordering, etc.

What I'm trying to do is have a business layer do validation first to see if the query can be performed. Then if it passes with the search criteria let the query that was generated by the grid perform the search.

I'm using Entity framework so it would be nice if there is a way to get the query or linq generated without trying to scrape the DataSourceRequest object.

Thank you,

Daniel

Grid

answered on 21 May 2013

6 answers

781 views

Binding to Model, then cascade

Hi,

I have a scenario, where I have two drop-downs that I want to cascade. This is working to an extent, but when I want to expand the functionality to bind intially to a model list, then select a value on page load, I can't think of a way to make this happen.

These are the two drop-downs:

Html.Kendo().DropDownListFor(c => c.SelectedGroup)

.BindTo(Model.Groups)

.Value(Model.SelectedGroup.Value.ToString())

.HtmlAttributes(new { style = "width: 250px" })

.Render();

And

@(Html.Kendo().DropDownListFor(t => t.AuthorisedByExtraID)
                        .DataTextField("Name")
                        .DataValueField("ExtraUserID")
                        .DataSource(source =>
                            source.Read(read => read.Action("SearchAutocompleteEmployees", "Search")
                                                        .Data("onAutoCompleteAdditional")
                                                        .Type(HttpVerbs.Post))
                                    .ServerFiltering(true))
                              .HtmlAttributes(new { style = "width: 250px" })
                              .Enable(false)
                              .AutoBind(true)
                              .BindTo(Model.GroupEmployees)
                              .Value(Model.AuthorisedByExtraID.HasValue ? Model.AuthorisedByExtraID.Value.ToString() : "0")
                      .CascadeFrom("SelectedGroup")
    )

How can I enable the second drop-down to bind to Model.AuthorisedByExtraID when it exists, then when group changes, 
to load the contents via ajax? 

Thanks,
Gabor

DropDownList

answered on 21 May 2013

1 answer

92 views

IE 8 Rendering

We have a standard Kendo UI for ASP.Net project that was upgraded to 2013.1.514. After the upgrade, the DropDownList objects now display a text "sel" under the down arrow when run under IE 8. Under Chrome, no problem. Using Visual Studio 2010.

Screenshot enclosed as well as sample project.

DropDownList

answered on 21 May 2013