Questions on UI for ASP.NET MVC Forum

5 answers

447 views

Cascading dropdownlist tutorial not working

Hi,

I'm new to HTML 5. I started with the cascading dropdownlist with ASP.NET MVC example and the .cshtml and .cs files. However, the first dropdownlist is not populating. I watched the steps in the debugger but it is not hitting the script. What am I missing? How do I associate the .cs file with the .cshtml. I made some minor change in the .cs file to display hard coded data but the methods are not being called.

Any help would be greatly appreciated.

DropDownList

answered on 23 May 2013

1 answer

87 views

[Solved] Bug with Error Event?

When i create a window the the below code it assigns the "error" handler to the "refresh" handler in JS. I'm guessing this is a bug.

Html.Kendo().Window()

.Name("createDocWin")

.Modal(true)

.Draggable(false)

.Height(300)

.Resizable(r => r.Enabled(false))

.Events(e => e.Error("errorCreatingDoc"))

<script>

jQuery(function(){jQuery("#createDocWin").kendoWindow({"refresh":errorCreatingDoc,"modal":true,"iframe":false,"draggable":false,"title":"Created Document","resizable":false,"content":null,"width":300,"height":300,"actions":["Close"]});});

</script>

Window

answered on 23 May 2013

0 answers

160 views

Kendo UI Grid Freezing vertical scrollbar and command buttons disappearing when scrolling horizontal scrollbar

Hi,
I would be happy if you answer to the following post:

http://www.kendoui.com/forums/ui/grid/kendo-ui-grid-freezing-vertical-scrollbar-and-command-buttons-disappearing-when-scrolling-horizontal-scrollbar.aspx

Thank you

Shabtai

Grid

asked on 23 May 2013

1 answer

107 views

Best Practices with Windows Azure

Windows Azure needs the "Transient Fault Handling Application Block" integrated for database queries (basically a retry logic) - or wait for EF6 which will support it transparently.

Are there any existing best practices on how to use it with KendoUI MVC?

ATM the Kendo Grid gets an IQueryable expression through a ViewModel property as it will extend the query with paging/grouping/etc. Unfortunately it does not compatible with the above fault handling block, could you please suggest a solution/workaround?

General Discussions

answered on 23 May 2013

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

132 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

187 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.7K+ 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

435 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

399 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