Questions on UI for ASP.NET MVC Forum

3 answers

127 views

Hi,
I am trying add tabs into an existing tabstrip and it works as expected. But when the number of tabs increase it goes to the second line. Is there a feature that will place the tabs on the same line.
Thanks in advance

TabStrip

answered on 26 Sep 2013

1 answer

1.2K+ views

DataSourceResult map to ViewModel in Controller. How To

I would like to be able to map a DataSourceResult to a ViewModel in my controller class, is this possible?

I have a pretty normal MVC application with a ViewModel

public class UserViewModel

{

public UserViewModel()

{

WebSiteUsers = new List<WebSiteUser>();

}

public List<WebSiteUser> WebSiteUsers { get; set; }

}

public class WebSiteUser

{

public int UserId { get; set; }

public string Username { get; set; }

public string FirstName { get; set; }

public string LastName { get; set; }

}

And a normal Grid in razor

@(Html.Kendo().Grid<Views.Users.ViewModel.WebSiteUser>()

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.UserId);

columns.Bound(p => p.Username);

columns.Bound(p => p.FirstName);

columns.Bound(p => p.LastName);

})

.Pageable(p => p.PageSizes(true))

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

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Model(model => model.Id(p => p.UserId))

.Read(read => read.Action("Users_Read", "Users"))

)

My controller has the following action for AJAX binding for filtering.

public ActionResult Users_Read([DataSourceRequest]DataSourceRequest request)

{

DataSourceResult result = _user.GetSiteUsersKendo(request);

return Json(result);

}

My service class has the method for getting the users.

public DataSourceResult GetSiteUsersKendo([DataSourceRequest]DataSourceRequest request)

{

using (TestEntities context = new Models.TestEntities())

{

IQueryable<Models.WebSiteUser> webSiteUsers = context.WebSiteUsers;

DataSourceResult result = webSiteUsers.ToDataSourceResult(request);

return result;

}

This code returns a Javascripts serialisaztion error - Object connection closed. I presume this is because the JSON call in the controller is trying to serialise the entity framework object perhaps trying to perform some kind of lazy loading but of course the connection to the DB is closed as it's in a 'Using' statement.

What I'm trying to achieve is a way to return a ViewModel to the grid from the controller action.

I can force the DataSourceResult to map to a POCO using the following code in my service class. I do NOT want to use a ViewModel in my service class, only the controllers should be aware of the ViewModels.

DataSourceResult result = webSiteUsers.ToDataSourceResult(request, su => new Models.UserModels.WebSiteUser{

UserId = su.UserId,

Username = su.Username

});

But then I still need to map the DataSourceResult to a ViewModel in the controller.

Is this possible?

Grid

answered on 26 Sep 2013

3 answers

101 views

[Solved] Filtering operators localisation bug?

I have few grids and I do filtering and reduce the standard operators. Code below.
I also use the Swedish language. However all the standard operators show up for the columns. (Extra(false) works)
When I remove the Kendo.Mvc.resources.dll everything works as expected.
The version of the dll is 2013.2.918.340 and I have the same version for the Kendo.Mvc.dll
The translations works fine when the resources are available but I like to reduce the operators.
Is this a bug?

.Filterable(filterable => filterable

.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.Contains("Innehåller")

.StartsWith("Startar med")

.IsEqualTo("Är lika med")

Grid

answered on 26 Sep 2013

4 answers

130 views

[Solved] Toolbar showing text not icons after latest update

I updated today to the new Q2 2013 service pack, now all editor windows show text rather then icons.
See attached image

Editor

answered on 26 Sep 2013

0 answers

120 views

Foreign Key Column thowing exception on select when grid is in an Editor Template

Hi. I am using Kendo UI in an ASP.NET MVC 4 application (using the Razor view engine) and I keep hitting a problem with how Kendo is auto generating the model structure for the rows in a grid.

I have a view and the model for that view contains a list of items, called Bricks, and then each Brick contains a list of items called BrickQualityMetricDtos. I created an editor template for the Brick class so that the MVC framework would properly name all of the fields. Within that editor template I have a Kendo UI Grid that I am using to display/edit the list of BrickQualityMetricDto classes. Two of the fields in that class are dropdowns, which I am using ForeignKeyColumns for, but every time I edit a row and then select a value of one of the drop downs I get this javascript exception:

"Unable to get property '0' of undefined or null reference"

This exception is getting thrown by this anonymous function:
function anonymous(d,value) {
d.Bricks[0].ExclusionReasonPK=value
}

The exception is being thrown because there is no Bricks member of "d" and therefore it cant get the "0" property. As far as I can tell "d" is an object that represents the model for the row that I am editing because it has fields "ExclusionReasonPK", "BrickSectionPK", "LengthExluded", and "PK" which are all of the fields of the BrickQualityMetricDto class. So the problem is that since the grid is in an Editor Template it is throwing this non-existent Bricks property onto the "d" object before it tries to access the actual properties of the object.

Can you please advise how to get around this limitation? I need to be using an Editor Template because if I don't then I won't get all of the other data fields in my form when I submit the form to my controller action.

Below is the code for my grid, but I am pretty sure that everything is correct in there.

@(Html.Kendo().Grid<BrickQualityMetricDto>()
.Name("BrickQualityMetrics_" + Model.Index)
.Columns(columns =>
{
columns.ForeignKey(e => e.BrickSectionPK, Model.BrickSections, "PK", "Name").Title("Section");
columns.ForeignKey(e => e.ExclusionReasonPK, Model.ExclusionReasons, "PK", "Name").Title("Exclusion Reason");
columns.Bound(e => e.LengthExcluded).Title("Length Excluded (mm)");
columns.Command(command => { command.Edit(); command.Destroy(); });
})
.Events(events =>
{
events.Edit("onBrickQualityMetricsGridEdit");
})
.ToolBar(toolbar => toolbar.Create().Text("Add"))
.BindTo(temp)
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Change("onGridDataSourceChange"))
.Model(model => model.Id("PK"))
.Create(update => update.Action("BrickMetric_Create", "Brick"))
.Update(update => update.Action("BrickMetric_Update", "Brick"))
.Destroy(update => update.Action("BrickMetric_Destroy", "Brick"))
))

EDIT: I just checked again and this problem is not limited to Foreign Key Columns. It is happening on the standard Bound column as well.

Also here is a similar post from the old ASP.NET MVC Telerik forums. It looks like the problem was never fully resolved though: http://www.telerik.com/community/forums/aspnet-mvc/grid/problems-with-grid-in-editor-template-in-collections.aspx

Grid

asked on 26 Sep 2013

7 answers

279 views

[Solved] "Unable to get value of the property 'jQuery'" exception in 2013.2.716/kendo.aspnetmvc.min.js

I just downloaded and installed the 2013.2.716.340 version of the ASP.Net MVC Kendo Complete package. Then I started a new MVC 4 project with .Net 4.5 in Visual Studio 2012 Update 3. I ran the new project without touching a single piece of code and get the following javascript error.

Unhandled exception at line 10, column 180 in http://localhost:62497/Scripts/kendo/2013.2.716/kendo.aspnetmvc.min.js0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'jQuery': object is null or undefined

IE says that window.kendo is undefined in one of the window.kendo.jQuery statements. Is this an environmental issue or is there something wrong with the actual files in this build? Maybe it has something to do with the way new projects are initialized with VS Update 3. I messed around with trying to host Kendo in a different MVC 4 project that was created as a standard project, instead of a Kendo project, but I get the same error. Also, when I tried to bundle the scripts, instead of directly linking them, WebGrease gives an error. Please, help.

General Discussions

answered on 25 Sep 2013

5 answers

558 views

Async Upload Limit

We use the Kendo Upload to allow customers to upload large number of files for processing.
Some of our customers in countries with poorer internet have run into bandwidth restrictions when trying to upload a large number of files (i.e a 100 files) simultaneously.

The files themselves are not very large, but the number of files causes a problem. To get around this, is it possible to set a upper limit on the number of async uploads that may be in progress at any given time?

So that if there are 20 files selected and added, I'd like them to upload in 2 batches of 10.

Thanks,

Roberto

Upload

answered on 25 Sep 2013

1 answer

147 views

Custom toolbar in grid error CS1525: Invalid expression term ')'

Hello, after trying to follow the examples for adding a toolbar in the grid and AS soon as I add in the toolbar I get the error in the title.

here's the aspx code:

<%: Html.Kendo().Grid<TSAEMSV3.Models.AirportTrainingViewManagementModel>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(x => x.Record).Width(65);

columns.Bound(x => x.Code).Width(65);

columns.Bound(x => x.PeopleTrained).Width(100);

columns.Bound(x => x.TrainingTypes).Width(100);

columns.Bound(x => x.Trainer).Width(100);

columns.Bound(x => x.TrainingDate).Format("{0:MM/dd/yyyy}").Width(100);

}

)

.ToolBar(toolbar =>

{

toolbar.Template(() =>

{ %>

<div class="toolbar">

<label class="category-label" for="category">Show products by category:</label>

</div>

<%});

})

.Pageable()

.Sortable()

.Scrollable()

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

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(50)

.Read(read => read.Action("RetrieveTrainingManagementGrid", "AirportTraining"))

);

%>

I have tried using the .Render() as well at the end of the control but no success. Any help would be greatly appreciated.

Grid

answered on 25 Sep 2013

3 answers

535 views

[Solved] Problem: expandRow() causes jump to top of window

Dear KendoUI-Team!
I have a hierarchy grid. I want to expand a master grid row in javascript. The javascript function is called by a custom command.
I succeeded to locate the the row.
When I call the expandRow() method something strange happens. The Row is expanded, but the current scroll position in the browser jumps to the top of the window. It looks like the jump happens after the expansion.
Even if I call the .click() function of the .t-plus element directly in javascript this strange behaviour occurs.

If I perform a mouse click on the expand item in the row, the scroll position of the browser window does not change.

Do you have any Ideas to solve this problem or find the cause?

brgds
Malcolm Howlett

Grid