Questions on UI for ASP.NET MVC Forum

2 answers

139 views

Is there a way to get the current mode of the grid inside a column template? I want to check if the grid is in edit mode within a column template so I can act on it.

Grid

answered on 30 Jan 2013

3 answers

354 views

EnableCustomBinding problems with sort and filter

I have some grids using telerik MVC controls that I am trying to move to Kendo.
They handle large amounts of data so I want to use custom binding.

so far I have got the grid to load with data, but when trying to sort or filter I get sorts or filter is null.
Where am I going wrong,

Thanks

My grid

@code

Dim grid As Kendo.Mvc.UI.Grid(Of BO.Models.Location) = Html.Kendo.Grid(Of BO.Models.Location)(Model.Locations) _

.Name("LocationGrid") _

.EnableCustomBinding(True) _

.Columns(Sub(c)

c.Bound(Function(b) b.ZipCode)

c.ForeignKey(Function(f) f.StateId, Model.States.AsEnumerable, "Id", "Name")

c.Bound(Function(b) b.City)

c.Bound(Function(b) b.Longitude)

c.Bound(Function(b) b.Latitude)

'c.Command(Sub(m)

' m.Edit()

'                  'm.Custom("Details").Text("Details").Action("details", "location", New With {.area = "admin"})

' End Sub).Width(210)

End Sub) _

.DataSource(Function(d) _

d.Ajax.Read("GetLocations", "Location", New With {.area = "admin"}).Update("UpdateLocation", "Location", New With {.area = "admin"}) _

.ServerOperation(True).Model(Sub(model) model.Id(Function(p) p.LocationId)).Total(Model.RecordCount)).Sortable().Filterable().Pageable()

grid.Render()

End Code

Controller

Function Index() As ActionResult

Return View(New BO.Models.LocationGridModel)

End Function

Function GetLocations(<Kendo.Mvc.UI.DataSourceRequestAttribute(Prefix:="Grid")> request As Kendo.Mvc.UI.DataSourceRequest) As JsonResult

If request.PageSize.Equals(0) Then

request.PageSize = 10

End If

Dim LocationGridModel As BO.Models.LocationGridModel = New BO.Models.LocationGridModel(request)

Return Json(LocationGridModel.Locations.ToList)

End Function

<HttpPost>

Function UpdateLocation(id As Integer, collection As FormCollection, <Kendo.Mvc.UI.DataSourceRequestAttribute(Prefix:="Grid")> request As Kendo.Mvc.UI.DataSourceRequest) As JsonResult

Dim Location As EF.Location = db.Locations.Find(id)

Try

UpdateModel(Location)

db.SaveChanges()

Catch ex As Exception

Throw

End Try

Dim LocationGridModel As BO.Models.LocationGridModel = New BO.Models.LocationGridModel(request)

Return Json(LocationGridModel.Locations.ToList)

End Function

LocationGridModel

Imports System.Collections.ObjectModel

Imports System.ComponentModel

Imports Kendo.Mvc

Namespace Models

Public Class LocationGridModel

Public Property PageSize As Integer = 15

Private _Locations As ReadOnlyCollection(Of BO.Models.Location)

Public ReadOnly Property Locations As ReadOnlyCollection(Of BO.Models.Location)

Get

Return _Locations

End Get

End Property

Public Property States As ReadOnlyCollection(Of BO.Models.StateDropDown)

Public Property RecordCount As Integer

Sub New()

Using db As EF.HomelyEntities = New EF.HomelyEntities

Me._Locations = ConvertToDbMoldelsLocation(db.Locations.OrderBy(Function(o) o.LocationId).Take(Me.PageSize))

Me.RecordCount = db.Locations.Count

Me.States = New ReadOnlyCollection(Of BO.Models.StateDropDown)(db.States.Where(Function(w) w.CountryId.Equals(2)).OrderBy(Function(o) o.Name).Select(Function(s) New BO.Models.StateDropDown With {.Id = s.StateId, .Name = s.Name}).ToList)

End Using

End Sub

Sub New(request As UI.DataSourceRequest)

Using db As EF.HomelyEntities = New EF.HomelyEntities

Me._Locations = GetData(request, Me.RecordCount)

Me.States = New ReadOnlyCollection(Of BO.Models.StateDropDown)(db.States.Where(Function(w) w.CountryId.Equals(2)).OrderBy(Function(o) o.Name).Select(Function(s) New BO.Models.StateDropDown With {.Id = s.StateId, .Name = s.Name}).ToList)

End Using

End Sub

''' <summary>

''' Reterns location data for kendo grid

''' </summary>

''' <param name="request">Kendo.Mvc.UI.DataSourceRequest</param>

''' <param name="recordCount">Integer</param>

''' <returns>ReadOnlyCollection(Of BO.Models.Location)</returns>

''' <remarks></remarks>

Private Function GetData(ByVal request As Kendo.Mvc.UI.DataSourceRequest, ByRef recordCount As Integer) As ReadOnlyCollection(Of BO.Models.Location)

Using db As EF.HomelyEntities = New EF.HomelyEntities

'todo remove recordcount

Dim data As IQueryable(Of EF.Location) = db.Locations

If request.Sorts.Any Then

For Each sortDescriptor As SortDescriptor In request.Sorts

data = SortLocation(sortDescriptor, data)

Next

Else

data = data.OrderBy(Function(o) o.LocationId)

End If

If request.Filters.Any() Then

data = data.Where(ExpressionBuilder.Expression(Of EF.Location)(request.Filters))

End If

recordCount = data.Count

If request.PageSize > 0 Then

data = data.Skip((request.Page - 1) * request.PageSize)

data = data.Take(request.PageSize)

End If

Return ConvertToDbMoldelsLocation(data)

End Using

End Function

Private Function SortLocation(sortDescriptor As SortDescriptor, data As IQueryable(Of EF.Location)) As IQueryable(Of EF.Location)

If sortDescriptor.SortDirection.Equals(ListSortDirection.Ascending) Then

Select Case sortDescriptor.Member

Case "LocationId"

data = data.OrderBy(Function(o) o.LocationId)

Case "ZipCode"

data = data.OrderBy(Function(o) o.ZipCode)

Case "StateId"

data = data.OrderBy(Function(o) o.StateId)

Case "Latitude"

data = data.OrderBy(Function(o) o.Latitude)

Case "Longitude"

data = data.OrderBy(Function(o) o.Longitude)

Case "City"

data = data.OrderBy(Function(o) o.City)

End Select

Else

Select Case sortDescriptor.Member

Case "LocationId"

data = data.OrderByDescending(Function(o) o.LocationId)

Case "ZipCode"

data = data.OrderByDescending(Function(o) o.ZipCode)

Case "StateId"

data = data.OrderByDescending(Function(o) o.StateId)

Case "Latitude"

data = data.OrderByDescending(Function(o) o.Latitude)

Case "Longitude"

data = data.OrderByDescending(Function(o) o.Longitude)

Case "City"

data = data.OrderByDescending(Function(o) o.City)

End Select

End If

Return data

End Function

''' <summary>

''' Converts to poco model to use in grid

''' </summary>

''' <param name="data">IQueryable(Of EF.Location)</param>

''' <returns>ReadOnlyCollection(Of BO.Models.Location)</returns>

''' <remarks></remarks>

Private Shared Function ConvertToDbMoldelsLocation(data As IQueryable(Of EF.Location)) As ReadOnlyCollection(Of BO.Models.Location)

Return New ReadOnlyCollection(Of BO.Models.Location)(data.Select(Function(s) New BO.Models.Location With {

.ZipCode = s.ZipCode,

.StateId = s.StateId,

.City = s.City,

.Longitude = s.Longitude,

.Latitude = s.Latitude,

.LocationId = s.LocationId

}).ToList)

End Function

End Class

End Namespace

Grid

answered on 30 Jan 2013

1 answer

461 views

MVC Model Binding with Filters

I have some comboboxes that cascade from one to the other. I would also like to be able to filter based on partial text entered into the combobox. This isn't working out of the box, so I'm working on coding it server-side. It appears that the text is being posted to the servers, but I can't find a server-side object to bind to the post. Here's what's being posted. In my case "Value" is the value of the parent combobox this combobox is cascading from.

filter[logic]:

and
filter[filters][0][field]:

Value
filter[filters][0][operator]:

eq
filter[filters][0][value]:

2
filter[filters][1][value]:

purity
filter[filters][1][field]:

Text
filter[filters][1][operator]:

contains
filter[filters][1][ignoreCase]:

true

I took a look at IFilterDescriptor, FilterDescriptor, and CompositeFilterDescriptor. They seem to have similar fields to those shown above, but they aren't binding when I try to use them as input to my Action method. I haven't had any luck finding a similar thread or any documentation around this.

Again, my end goal is to have cascading comboboxes without losing the ability to filter by text entered, so if there's any advise there, I'm all ears. Also, any advice on how to bind the posted filter info is welcome.
Thanks,
--Evan

Also, here's the definition of my comboboxes as a side note:
<tr>
<td class="formTableLabel">Price Publisher: </td>
<td>
@(Html.Kendo().ComboBox()
.Name("PricePublisherId")
.DataValueField("Value")
.DataTextField("Text")
.BindTo(Model.ReferenceData.PricePublisherList)
.Filter(FilterType.Contains)
.HtmlAttributes(new { required = "required", validationMessage = "Please select an option." }))
</td>
</tr>
<tr>
<td class="formTableLabel">Price Instrument: </td>
<td>
@(Html.Kendo().ComboBox()
.Name("PriceInstrumentId")
.DataValueField("Value")
.DataTextField("Text")
.Placeholder("(Empty)")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetPriceInstrumentList", "TradeEntry").Data("priceInstrumentListJSON").Type(HttpVerbs.Post);
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("PricePublisherId")
.Filter(FilterType.Contains)
.HtmlAttributes(new { required = "required", validationMessage = "Please select an option." }))
</td>
</tr>

General Discussions

answered on 30 Jan 2013

2 answers

214 views

[Solved] Inserted Item Moves To Top After Save Or Another Add

I have a question about Kendo Grid for ASP.NET MVC. It's probably something that I'm not doing incorrectly.

When I add a new item to the grid, I'm using the solution described on this forum post to move the inserted <tr> to the bottom of the grid. That part works fine. However, when I save the changes to the grid or add a new item, the inserted item is moved to the top of the grid, even if that breaks the currently applied sort order.

I have attached a simple project that demonstrates this. To repro what I'm talking about, do the following:

Run the app
Note that the grid is currently sorting on the Id column in ascending order
Go to the last page
Click the "Add New Item"
Set the Id to 550 and enter First Name, Last Name, and Position
Click "Save Changes" or "Add New Item"
The inserted row that was at the bottom of the grid has been moved to the top, ignoring the sort order

Can anyone point out what I'm doing wrong?

Thanks

Grid

answered on 30 Jan 2013

3 answers

94 views

Table with One Column That is the Primary ID

I am using a grid to edit a table that is one column and that column is the primary ID. Therefore, I cannot edit the column. I want to allow adds and deletes (with checks in the background). There are two problems. I do not see the Add or Delete button in line. If I use the pop-up option, I can only add but the pop-up button states that I am editing, which would be confusing to the users. How do I get the grid to add and delete properly?

This is what I have:

@(Html.Kendo().Grid<NatureOfStudyViewModel>()

.Name("NatureOfStudyGrid")

.Columns(columns =>

{

columns.Bound(item => item.NatureOfStudy);

})

.DataSource(ds => ds

.Ajax()

.Model(model =>

{

model.Id(m => m.NatureOfStudy);

})

.Read(read => read.Action("NatureOfStudyDataSource", "Lists"))

.Create(create => create.Action("NatureOfStudyCreate","Lists"))

.Destroy(destroy => destroy.Action("NatureOfStudyDelete","Lists"))

.Events(events => events.Error("listValueDataSource_error"))

)

.Pageable()

.ToolBar(commands => commands.Create())

.Editable(edit => edit.Mode(GridEditMode.PopUp))

)

Grid

answered on 30 Jan 2013

1 answer

96 views

Adding grid to existing edit page is not working

I have an MVC4 app and I'm trying to evaluate the trial version of Kendo for MVC. I want to add a grid to an existing edit page for on of my views. We are using entity framework and views were made using the Razor view engine. On this edit view page the data that is editable is from a tabled called Agency. I want to add a grid to this razor view that will contain records from a tabled called Institute.

I have tried the AJAX binding example and the server binding example located here: http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding but neither of these seem to work in my existing application.

How do I accomplish this?

Grid

answered on 29 Jan 2013

2 answers

546 views

Can I attach event to piechart area click

Hi, I would like to show relevant expanded data in a grid when user clicks on pie chart. Does charts provide any built in client events that get raised when chart area is clicked or do I have to hook it manually in jquery.

Chart

answered on 29 Jan 2013

1 answer

174 views

DropDownList not opening with many items (~15000)

Hi,

I have a DropDownList which is populated with many items (around 15000). I know this is a lot, but it is needed for this application.

Unfortunately, the DropDownList does not open anymore, when there are that many items. The open Animation is shown but the Dropdown is closed immediately. I'm using the Version 2012.3.1114.

Is there a fix to this?

Greets

DropDownList

answered on 29 Jan 2013

1 answer

234 views

DataTable aggregete functions

Specs

Kendo: 2012.3.1114
Net: 4.5
MVC: 4.0

Problem
I am binding my grid using a DataTable as the Model and need to have aggregate values. I have to use the datatable as I have a lot of data that is being sent over from the web service. If wrapped as XML it was over 55 MB for 21 columns and 14,400 rows so we converted the SQL DataTable to CSV and then sent the string over. That resulted in a file around 5MB.

The data that I a getting has no model as there can easily be 200+ columns depending on the query so making a data model is sadly out of the question.

If I use the snippet below as my base (taken from the Kendo UI Code Library) there seems to be no way to set up the aggregate functions

@(Html.Kendo().Grid(Model)

.Name("Grid")

.Columns(columns => {

foreach (System.Data.DataColumn column in Model.Columns)

{

columns.Bound(column.DataType, column.ColumnName);

}

})

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.Groupable()

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("Read", "Home"))

)

Back in the days of the Telerik MVC controls I could set up the aggregate function you could setup the aggregate while adding the bound column but in the Kendo UI wrapper that has been moved down to be inside of the DataSource.

Telerik Grid:

columns.Bound("ColumnName").Aggregate(aggregates => aggregates.Count().Min().Max())

If I try and set up the agregate down in the DataSource I get a lovely exception "'count' is undefined" which is a bit vague.

if (column.ColumnName == "ProductID")

{

columns

.Bound(column.DataType, column.ColumnName)

.ClientFooterTemplate("Count: #=count#");

}

...

.Aggregates(aggregates =>

{

aggregates.Add(a => "ProductID").Count();

})

Is there any way to get around the aggregate problem?

Grid

answered on 29 Jan 2013

1 answer

80 views

IE8 : Grid Popup Add not working for Text and DateTime input in IE8

Hi,

In Grid MVC Server Wrapper for Kendo UI, popup save values are not binding to grid for input text box. Same is happening for Date time selector, it works okay if a Date is selected but doesn't work consistently if someone manually types in a Date

Please see attached file for visual description

This only happens on IE8

Please suggest a solution

Thanks,

Taha

Grid

answered on 29 Jan 2013