Questions on UI for ASP.NET MVC Forum

5 answers

102 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

159 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.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

334 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

325 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

126 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

464 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

90 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

275 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

129 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