Questions on UI for ASP.NET MVC Forum

1 answer

1.0K+ views

Unexpected End of Input and Grid Response End and Error Events

In the Kendo Grid component we are handling both the dataSource RequestEnd event and Error events. On out production site, for IE and Chrome (but not Firefox) , the RequestEnd event is coming back with a "undefined" argument.type property (we are relying on the "update" type to trigger certain events). It turns out the at the same time in the Error event handler there is an error happening with the message "Unexpected end of input". So this brings up three questions:

What could be causing the "Unexpected end of input" error in Chrome/IE? Has this been reported before?
Why would a dataSource.Error event cause the dataSource.requestEnd event not to contain the argument type property (even though the argument itself is not null) ?
And is there a way to know, in these cases, if it is an update taking place?

We are using the latest SP build, jQuery 1.9 with jQuery migration script. Again it works fine in Firefox

Grid

answered on 23 May 2013

5 answers

120 views

kando.all.min.js invalide template

I got this error (see attachement).

The view :

@(Html.Kendo().Grid<MesFormations.Models.EmployeGridView>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(e => e.NomEmploye).Width(110);

columns.Bound(e => e.CourrielEmploye).Width(110);

columns.Bound(e => e.Telephone).Width(110);

columns.Bound(e => e.PosteTelephone);

})

.Sortable()

.Pageable()

.Scrollable()

.ClientDetailTemplateId("template")

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

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(6)

.Read(read => read.Action("HierarchyBinding_Employees", "Employe"))

)

.Events(events => events.DataBound("dataBound"))

)

<script id="template" type="text/kendo-tmpl">

@(Html.Kendo().Grid<MesFormations.Models.FormationEmployeGridView>()

.Name("grid_#=NoEmploye#")

.Columns(columns =>

{

columns.Bound(o => o.NoFormation).Width(70);

columns.Bound(o => o.DateFormation).Width(110);

columns.Bound(o => o.DateModification);

columns.Bound(o => o.Remarques).Width(200);

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(5)

.Read(read => read.Action("HierarchyBinding_Orders", "Employe", new { employeeID = "#=NoEmploye#" }))

)

.Pageable()

.Sortable()

.ToClientTemplate()

)

</script>

<script>

function dataBound() {

this.expandRow(this.tbody.find("tr.k-master-row").first());

}

</script>

The controller :

public ActionResult HierarchyBinding_Employees([DataSourceRequest] DataSourceRequest request)

{

return Json(GetEmployees().ToDataSourceResult(request));

}

public ActionResult HierarchyBinding_Orders(int employeeID, [DataSourceRequest] DataSourceRequest request)

{

return Json(GetOrders()

.Where(order => order.NoEmploye == employeeID)

.ToDataSourceResult(request));

}

private static IEnumerable<FormationEmployeGridView> GetOrders()

{

var northwind = new FormationContext();

//var loadOptions = new DataLoadOptions();

//loadOptions.LoadWith<Order>(o => o.Customer);

//northwind.LoadOptions = loadOptions;

return northwind.FormationEmploye.Select(order => new FormationEmployeGridView

{

NoFormationEmploye = order.NoFormationEmploye,

NoEmploye = order.NoEmploye,

NoFormation = order.NoFormation,

DateFormation = order.DateFormation,

Remarques = order.Remarques,

DateModification = order.DateModification

});

}

private static IEnumerable<EmployeGridView> GetEmployees()

{

var northwind = new FormationContext();

return northwind.Employes.Select(employee => new EmployeGridView

{

NoEmploye = employee.NoEmploye,

PrenomEmploye = employee.PrenomEmploye,

NomEmploye = employee.NomEmploye,

CourrielEmploye = employee.CourrielEmploye,

Telephone = employee.Telephone,

PosteTelephone = employee.PosteTelephone

});

}

And I don't have those line web.config

<httpRuntime targetFramework="4.5" encoderType=

"System.Web.Security.AntiXss.AntiXssEncoder, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"

/>

Grid

answered on 22 May 2013

1 answer

175 views

Kendo Tooltip on a Kendo Window results in a corrupted DOM

I have a Kendo Window which I am dynamically loading and showing when the user clicks on a "details" link in a grid. The dynamic content contains a Kendo Tooltip. Each time the Kendo Window is loaded and shown, new HTML markup is generated for the tooltip outside of the DIV that contains the window's content. This results in multiple copies of the same tooltip markup in the DOM.

Is there any way I can tell the tooltip to render inside of a specific region of the page, so it would be overwritten when the KendoWindow is filled with new content?

ToolTip

answered on 22 May 2013

7 answers

1.6K+ 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

413 views

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

366 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

170 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?

DatePicker

answered on 22 May 2013

1 answer

524 views

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

112 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

310 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