Questions on UI for ASP.NET MVC Forum

1 answer

132 views

Grid generating an HttpPost at document ready

Strange behaviour, really...
I have an ASP.NET MVC View with a form, and inside of it, a grid that I configure with code like:

@(Html.Kendo().Grid<Customer>()
            .Name("gridSecondaryCustomers")
            .Columns(columns =>
            {
...

and then I bind it to local data (JavaScript array) with code like:

        var grid = $("#gridSecondaryCustomers").data("kendoGrid");
        localDataSource = new kendo.data.DataSource({ data: secondaryCustomers });
        grid.setDataSource(localDataSource);

Last, I add items by code in the array, and refresh the grid with previous code.

Nothing is showing, so I suppose that the problem lies in the 'normal' configuration of the grid, that tries to go to the server, or something like that...
So I add this code:

...
  .DataSource(ds => { ds.Ajax().ServerOperation(false); })

and now, magically, when I add an item to the array, I can see the grid populated correctly.

What puzzles me is that with this single line in the grid configuration, loading the page generates an HttpPost to the controller, that I cannot really track down to where it comes... :-(
Could you please help me? Please ask me for more information, if needed...
Thanks as always,
Andrea

Grid

answered on 10 Jun 2013

1 answer

66 views

What happens with *a lot* of records in the back end?

I'm making tests, on selecting a customer from a database, and binding the combobox value to the model.
All is ok, but I'm wondering about the fact that I can open the combobox dropdown even without typing any text: what happens if I have, say, a million records? I would like to give the chance to the user to open the drop down only if I have, say, three chars typed in...
Thanks
Andrea

ComboBox

answered on 08 Jun 2013

4 answers

1.2K+ views

MVC unobtrusive validation doesn't work

Hi! We are using in project Jquery Unobtrusive validation, but with kendo Dropdownlist validation doesn't work on client.

@(Html.Kendo().ComboBoxFor(model => model.CountryId)

.Filter(FilterType.Contains)

.BindTo(ViewBag.Countries)

.HtmlAttributes(CommonHelpers.MergeHtmlAttributes(Html.GetUnobtrusiveValidationAttributes(

CommonHelpers.GetPropertyName(() => Model.CountryId)),

new Dictionary<string, object>(){

{ "class", "combobox-country" }})))

How to fix this issue? Is it possible to combine Kendo Combobox and client-side mvc unobtrusive jquery validation?
Thanks!

DropDownList

answered on 07 Jun 2013

1 answer

295 views

Is it possible to add a Sparkline inside a ClientRowTemplate in a Grid?

I'm trying to add a column of sparklines inside a grid, using a ClientRowTemplate that is based on a partial view. So far, this is what I've got;
Index view (holding grid):

<div>

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

.Name("Grid")

.DataSource(ds => ds

.Ajax()

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

)

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

.Columns(columns =>

{

columns.Bound(p => p.UnitContract.Name).Title("Unit");

columns.Bound(p => p.UnitContract.CurrentRun.Operation.WellContract.Location).Title("Site");

columns.Bound(p => p.UnitContract.CurrentRun.Operation.WellContract.Name).Title("Well");

columns.Bound(p => p.UnitContract.CurrentRun.Id).Title("Run");

columns.Bound(p => p.UnitContract.CurrentRun.RunTask).Title("Task");

columns.Bound(p => p.UnitContract.CurrentRun.Operation.Description).Title("Operation");

columns.Bound(p => p.UnitContract.Status.StatusText).Title("Status");

columns.Bound(p => p.UnitContract.CurrentRun.LatestWellLogEntry.Depth).Title("Depth (m)");

columns.Bound(p => p.UnitContract.CurrentRun.LatestWellLogEntry.Speed).Title("Speed (m/min)");

columns.Bound(p => p.UnitContract.CurrentRun.LatestWellLogEntry.Tension).Title("Weight (kg)");

columns.Bound(p => p.UnitContract.CurrentRun.Name);

columns.Template(p => { }).ClientTemplate(" ").Width(75);

})

.ClientRowTemplate(Html.Partial("_ClientRowTemplate", Model).ToHtmlString())

.Pageable()

.Scrollable(builder => builder.Height(250))

.Sortable())

</div>

Next, I added a partial view, looking like this:

<tr>

<td>#: UnitContract.Name#

</td>

<td>#: UnitContract.CurrentRun.Operation.WellContract.Location#

</td>

<td>#: UnitContract.CurrentRun.Operation.WellContract.Name#

</td>

<td>#: UnitContract.CurrentRun.Id#

</td>

<td>#: UnitContract.CurrentRun.RunTask#

</td>

<td>#: StatusMessage#

</td>

<td class='text-center'>

<span class='label label-#:StatusColor #' style='width: 25px;'> </span>

</td>

<td>

<div>

@(Html.Kendo().Sparkline()

.Name("depth")

.Data(#: UnitContract.CurrentRun.LatestWellLogEntry.Speed#)

.Type(SparklineType.Bar)

.Tooltip(false)

.ValueAxis(axis => axis.Numeric().Max(5000).Min(-5000).Visible(false))

.CategoryAxis(c =>

c.MajorTicks(ticks => ticks.Visible(false))

.Visible(true))

.ChartArea(ca => ca.Background("transparent"))

.HtmlAttributes(new { style = "width: 75px;" }))

</div>

</td>

<td>

<div>

</div>

</td>

<td>

<div>

</div>

</td>

<td>#: UnitContract.CurrentRun.Name#

</td>

<td>

<form method='POST' action='@Url.Content("~/UnitDetails/Index/")#: UnitContract.Id#'>

<input type='submit' class='k-button' value='Details' />

</form>

</td>

</tr>

I've tried several different approaches as far as the part with .Data(source) goes.
Is there another way to go that lets me utilize the Sparkline inside a Grid, or is this combination not possible?

Grid

answered on 07 Jun 2013

4 answers

410 views

Hierarchical grid example "Invalid template" error

I've been attempting to translate several Kendo UI Grid examples to VB.Net. I've been trying to get the hierarchical grid example to work.

Can someone tell me why the code below does not work? Removing or commenting out the sub-grid allows the primary grid to work. But as soon as the sub-grid source is added I get the "Invalid template" error in the "Kendo.all.min.js" code. If I tell the IDE to continue the primary grid will display but it is empty.

MVC 3 Razor project
Version: 2012.3.1114
IDE: Visual Studio 2012

View source:

@(Html.Kendo().Grid(Of KendoUIMvcApplication1.ViewModels.EmployeeViewModel).Name("Employees") _

.Columns(Sub(columns)

columns.Bound(Function(e) e.FirstName).Width(140)

columns.Bound(Function(e) e.LastName).Width(140)

columns.Bound(Function(e) e.Title).Width(200)

columns.Bound(Function(e) e.Country).Width(200)

columns.Bound(Function(e) e.City)

End Sub) _

.ClientDetailTemplateId("employeesTemplate") _

.Pageable() _

.DataSource(Sub(dataSource)

dataSource.Ajax().Read(Sub(read)

read.Action("HierarchyBinding_Employees", "Example")

End Sub)

dataSource.Ajax().PageSize(5)

End Sub) _

.Sortable() _

.Events(Sub(events)

events.DataBound("dataBound")

End Sub))

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

@(Html.Kendo().Grid(Of KendoUIMvcApplication1.ViewModels.OrderViewModel).Name("Orders_#=EmployeeID#") _

.Columns(Sub(columns)

columns.Bound(Function(o) o.OrderID).Width(101)

columns.Bound(Function(o) o.ShipCountry).Width(140)

columns.Bound(Function(o) o.ShipAddress).Width(200)

columns.Bound(Function(o) o.ShipName).Width(200)

End Sub) _

.DataSource(Sub(dataSource)

dataSource.Ajax().Read(Sub(read)

read.Action("HierarchyBinding_Orders", "Example", New With {.employeeID = "#=EmployeeID#"})

End Sub)

End Sub) _

.Pageable() _

.Sortable() _

.ToClientTemplate())

</script>

<script>

function dataBound() {

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

}

</script>

Controller source:

Imports System.Web.Mvc

Imports System.Linq

Imports System.Data.Linq

Imports Kendo.Mvc.Extensions

Imports Kendo.Mvc.UI

Public Class ExampleController

Inherits System.Web.Mvc.Controller

Public Function Hierarchy() As ActionResult

Return View()

End Function

Public Function HierarchyBinding_Employees(<DataSourceRequest> request As DataSourceRequest) As ActionResult

Return Json(GetEmployees().ToDataSourceResult(request))

End Function

Public Function HierarchyBinding_Orders(employeeID As Integer, <DataSourceRequest> request As DataSourceRequest) As ActionResult

Return Json(GetOrders().Where(Function(order) order.EmployeeID = employeeID).ToDataSourceResult(request))

End Function

Private Shared Function GetOrders() As IEnumerable(Of ViewModels.OrderViewModel)

Dim northwind = New NorthwindDataContext()

Dim loadOptions = New DataLoadOptions()

loadOptions.LoadWith(Of Order)(Function(o) o.Customer)

northwind.LoadOptions = loadOptions

Return northwind.Orders.[Select](Function(order) New ViewModels.OrderViewModel() With { _

.ContactName = order.Customer.ContactName, _

.OrderDate = order.OrderDate, _

.OrderID = order.OrderID, _

.ShipAddress = order.ShipAddress, _

.ShipCountry = order.ShipCountry, _

.ShipName = order.ShipName, _

.EmployeeID = order.EmployeeID _

})

End Function

Private Shared Function GetProducts() As IEnumerable(Of ViewModels.ProductViewModel)

Dim northwind = New NorthwindDataContext()

Return northwind.Products.[Select](Function(product) New ViewModels.ProductViewModel() With { _

.ProductID = product.ProductID, _

.ProductName = product.ProductName, _

.UnitPrice = If(product.UnitPrice, 0), _

.UnitsInStock = If(product.UnitsInStock, 0), _

.UnitsOnOrder = If(product.UnitsOnOrder, 0), _

.Discontinued = product.Discontinued, _

.LastSupply = DateTime.Today _

})

End Function

Private Shared Function GetEmployees() As IEnumerable(Of ViewModels.EmployeeViewModel)

Dim northwind = New NorthwindDataContext()

Return northwind.Employees.[Select](Function(employee) New ViewModels.EmployeeViewModel() With { _

.EmployeeID = employee.EmployeeID, _

.FirstName = employee.FirstName, _

.LastName = employee.LastName, _

.Country = employee.Country, _

.City = employee.City, _

.Notes = employee.Notes, _

.Title = employee.Title, _

.Address = employee.Address, _

.HomePhone = employee.HomePhone _

})

End Function

End Class

Grid

answered on 06 Jun 2013

4 answers

449 views

Error in DetailView ClientTemplate with TabStrip in a Grid

I am having an issue with trying to test out a client template using a tabstrip within a detailview of a grid. The template being passed to Template.compile is:

"<div class="k-widget k-tabstrip k-header" id="Inty#=Id#"><ul class="k-reset k-tabstrip-items"><li class="k-item k-state-default"><a class="k-link" href="\#Inty#=Id#-1">Turtle</a></li></ul><div class="k-content" id="Inty#=Id#-1">Brownie</div></div><script><br><span class="Apple-tab-span" style="white-space:pre"> </span>jQuery(function(){jQuery("\#Inty#=Id#").kendoTabStrip({});});<br><\/script>"

It appears to be choking on the encoded spaces such as  

My code producing this as follows

cshtml:

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

@(Html.Kendo().TabStrip().Name("Inty#=Id#").Items( items => items.Add().Text("Turtle").Content(@<text>Brownie</text>) ).ToClientTemplate())

</script>

@(

Html.Kendo().Grid<JobGridViewModel>()

.Name("Grid")

.ClientDetailTemplateId("jobGridTemplate")

.Columns(columns =>

{

columns.Bound(p => p.Id).Hidden();

columns.Bound(p => p.Name).Width("15em").ClientTemplate(Html.ActionLink("#=Name#", "Edit", new {selectedjobid = "#=Id#"}).ToHtmlString());

columns.Bound(p => p.Number).Width("11em");

columns.Bound(p => p.Cost).Width("12em");

columns.Bound(p => p.Status).Template(@<text>

@item.Status;

</text>)

.ClientTemplate("#= statusValues[Status] #")

.EditorTemplateName("JobStatusEditor").Width("9em");

columns.Bound(p => p.Date).Width(130).Format("{0:d}").EditorTemplateName("Date");

columns.Bound(p => p.Commissions).Filterable(false).Template(@<text>

@ListCommission(item, CommissionType.Sell)

</text>).EditorTemplateName("ClientCommission").ClientTemplate("#= template(data.Commissions) #").Sortable(false);

columns.Command(command =>

{

command.Edit();

command.Destroy();

command.Custom("Duplicate").Text("Copy").SendDataKeys(true).SendState(true).Click("onGridCommand");

}).Width(280);

}).ToolBar(y=> y.Template(

@<text>

<div>

Job Name

@(Html.Kendo().AutoComplete().Name("SearchName").DataSource(source =>

{

source.Read(read => read.Action("_GetJobNamesLike", "Jobs"                                                                                                                          })

.Events(events => events.Change("onFilterChange")))

</div>

<div>

Job Number

@(Html.Kendo().AutoComplete().Name("SearchNumber")

.DataSource(binding =>

{

binding.Read(read => read.Action("_GetJobNumbersLike", "Jobs"));

}).Events(events => events.Change("onFilterChange")))

</div>

@item.CustomCommandToolBarButton("NewJob", "New Job", "New", "Jobs", null)

</text>))

.Editable(editable => editable.Mode(GridEditMode.InLine))

.Sortable()

.Pageable(paging => paging.PageSizes(new int[]{20,40,60,80}))

.Scrollable(config => config.Height(1000).Virtual(true))

.Resizable(resize => resize.Columns(true))

.Filterable()

.DataSource( dataBinding =>

dataBinding.Ajax().Events(e =>

{

e.RequestStart("onGridDataBinding"); // try Ajax().Data("sendData") return { foo: "bar" };

}).Model(model => model.Id(id => id.Id))

.Read(read=>read.Action("_SelectAjaxEditing", "Jobs", new {jobName="", jobNumber=""}))

.Create(create => create.Action("_InsertAjaxEditing", "Jobs"))

.Update(update => update.Action("_SaveAjaxEditing", "Jobs"))

.Destroy(destroy=>destroy.Action("_DeleteAjaxEditing", "Jobs")))

.Events(events =>

{

events.Change("onGridEdit").DataBound("onRowDataBound")

.DetailExpand("onGridExpand")

.DetailCollapse("onGridCollapse");

})

)





I am eager to see this product in action but this small issue would be a show stopper for me for switching over the rest of my code base.

General Discussions

answered on 06 Jun 2013

3 answers

224 views

Kendo UI MVC Grid not displaying properly in IE8

Hi,

I just downloaded the KendoUI for Web trial and using it in a MVC 4 application.

Here are some issues which I am facing.

1) In IE 8 the design of Grid is not displaying properly(Refer the attached Image).

2) I am not able to assign any styles to grid.As mentioned in telerik forum I have linked the following css files in page (kendo.common.min.css,kendo.default.min.css) still the fonts are not changing.Its always get displayed with Times new Roman font.What if I need to display the grid with other fonts like Arial and all.

3) Filter menu in columns are displaying broad and small for different columns.I want the filter menu two display in unique style for all columns and the style should be short display. I dont want the broad display.
Refer image(FilterMenuPblm.jpg) to get details of broad display and refer image (FilterMenuProperDisplay.jpg) to get an idea of display what I want to be displayed in all columns.

Can you please help me to resolve these issues.

Grid

answered on 06 Jun 2013

1 answer

175 views

TimePicker error in Chrome

Hi support,

I am getting "Invalid language tag error" when i select the time in chrome browser while using kendo TimepickerFor. Error image is attached and below is my code.

My model class:
[RequiredIf("MONDAY", true, ErrorMessage = "Required")]
public DateTime? MONDAY_FROM_TIME { get; set; }
[RequiredIf("MONDAY", true, ErrorMessage = "Required")]
public DateTime? MONDAY_TO_TIME { get; set; }

Partial page:
@(Html.Kendo().TimePickerFor(h => h.HIRE_FLEET_AVAILIABILITY.MONDAY_FROM_TIME)
.Format("hh:mm tt")
.Interval(15)
.Enable(Model != null ? Model.HIRE_FLEET_AVAILIABILITY.MONDAY : false)
.HtmlAttributes(new { @style = "width:100px" }))

@(Html.Kendo().TimePickerFor(h => h.HIRE_FLEET_AVAILIABILITY.MONDAY_TO_TIME)
.Format("HH:mm")
.Interval(15)
.Enable(Model != null ? Model.HIRE_FLEET_AVAILIABILITY.MONDAY : false)
.HtmlAttributes(new { @style = "width:100px" }))

DatePicker

answered on 06 Jun 2013

1 answer

186 views

How to reference item properties in template using mvc helpers

Hello !

Please help me with this. I'm trying to reference an item property in a helper function inside the template. How can I do this ?

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

<div class="process-view">

<div class="edit-buttons">

@(Html.ActionLink("Create New", "Process_Create", "Process",

new { id=${ProcessID} }))

</div>

<dl>

<dt>Code</dt>

<dd>${ProcessCode}</dd>

<dt>Name</dt>

<dd>${Name}</dd>

<dt>Description</dt>

<dd>${Description}</dd>

<dt>ID</dt>

<dd>${ProcessID}</dd>

</dl>

</div>

</script>

The problem is that the compiler tries to solve the item reference and throws a
CS1056: Unexpected character '$'

I've also tried with #:ProcessID#, and get
CS1040: Preprocessor directives must appear as the first non-whitespace character on a line

What should I do ?

Thanks,

Leandro

ListView

answered on 06 Jun 2013

1 answer

148 views

How force reloading of treeview

Hello,
I'm testing your library Kendo UI for my application in ASP.NET MVC4.
I placed inside a view a kendo.treeview dynamically loaded as shown in your examples.
Now I have the need, following an update of the data on the database (added a node), to force the loading of the treeview with new data without reloading the view.
There is a client function to do this?
If you could send me an example?

thanks

TreeView

answered on 06 Jun 2013