I have a grid with several foreign key columns which display combo-box editor templates. The user enters and selects an item, which sets the id on that column for that record in the grid.
If the user unfocuses the cell without selecting an option, the built-in validation message (shown in the attached screenshot) 'X must be a number' appears. This occurs when the input does not load any data (i.e. they type a name that doesn't exist in the database and so auto-complete doesn't find anything). It seems the validation skips the 'required' message and goes to this invalid-type message. We would like to change or bypass this so that the user doesn't see this user-unfriendly message.
Is there a way to (1) somehow force the combo-box to select an option when losing focus in this case where there was no valid auto-complete option (since normally it does auto-select said option), or (2) to somehow override this error message?
When you hover over the legend it displays all the points for the series you are hovering over. See attached image. Is there a way to turn this off?
<div> <div id="chart"> @(Html.Kendo().Chart<CashInvestedAreaChart>() .Name("chartCashInvested") .DataSource(ds => ds.Read(read => read.Action("CashInvestedChartData", "PracticeAnalytics"))) .Transitions(false) .Theme("bootstrap") .Legend(l => l.Visible(true) .Position(ChartLegendPosition.Bottom)) .ChartArea(c => c.Margin(10, 8, 0, 10).Background("transparent").Height(280)) .SeriesDefaults(s => s .Area() .Line(l => l.Style(ChartAreaStyle.Smooth)) .Stack(false)) .CategoryAxis(axis => axis .Categories(m => m.Date) .Line(l => l.Visible(false)) .Labels(l => l.Visible(false)) .MajorGridLines(l => l.Visible(false)) ) .Tooltip(t => t.Visible(true).Template("#= series.name # <br /> #= kendo.toString(kendo.parseDate(category), 'MM/dd/yyyy') #: #= kendo.format('{0:C}', value) #")) .Series(series => { series.Area(model => model.MarketValue).Name("Market Value").Color("#60A7F5").Opacity(1); series.Area(model => model.CashInvested).Name("Cash Invested").Color("#35608F").Opacity(1); }) .ValueAxis(axis => axis .Numeric() .Labels(labels => labels.Template("#= ciFormatMillions(value) #" ) ) .AxisCrossingValue(-10) .Line(line => line.Visible(false)) ) .Events(e => e.Render("scaleChart")) ) </div>$scope.dateFilter = { extra: true, operators: {}, ui: function (element) { var parent = element.parent(); while (parent.children().length > 1) $(parent.children()[0]).remove(); parent.prepend( "Start Date:<br/><span class=\"k-widget k-datepicker k-header\">" + "<span class=\"k-picker-wrap k-state-default\">" + "<input data-bind=\"value: filters[0].value\" class=\"k-input\" type=\"text\" data-role=\"datepicker\"" + " style=\"width: 100%\" role=\"textbox\" aria-haspopup=\"true\" aria-expanded=\"false\" aria-disabled=\"false\" " + " aria-readonly=\"false\" aria-label=\"Choose a date\">" + "<span unselectable=\"on\" class=\"k-select\" role=\"button\">" + "<span unselectable=\"on\" class=\"k-icon k-i-calendar\">select</span></span></span></span>" + "<br/>End Date:<br/>" + "<span class=\"k-widget k-datepicker k-header\"><span class=\"k-picker-wrap k-state-default\">" + "<input data-bind=\"value: filters[1].value\" class=\"k-input\" type=\"text\" data-role=\"datepicker\"" + " style=\"width: 100%\" role=\"textbox\" aria-haspopup=\"true\" aria-expanded=\"false\" " + " aria-disabled=\"false\" aria-readonly=\"false\" aria-label=\"Choose a date\">" + "<span unselectable=\"on\" class=\"k-select\" role=\"button\">" + "<span unselectable=\"on\" class=\"k-icon k-i-calendar\">select</span></span></span></span>" ); }};Hi,
I have an editor grid that has one editable cell. I want that cell to always be the input box (numeric text box in this case) instead of going back to a regular dirty cell after clicking out. So basically always keeping cells in edit mode.How can I achieve this? See attached image for example of what I mean.

Hi,
We have a grid with a detail template containing a tabstrip - much like the demo at https://demos.telerik.com/aspnet-mvc/grid/detailtemplate .
Three tabs got their content from calling controller actions which returned different Partial views.
We do not need to show multiple tabs now - we only need to show one so do not need the tabstrip control.
How can we keep the same method of getting the detailtemplate content from a controller action partialview without the tab strip?
The data is a single model - not a listing - so not suited to a grid or listview.
Many Thanks.
Hi all,
I am trying to make an HtmlHelper to create sub grids by passing an ISubGridBuilder which will contain the construction detail of my sub grid.
Example:
public interface ISubGridBuilder{ string ActionName { get; } string ControlerName { get; } void BuildColumns(GridColumnFactory<dynamic> gcf);}public static MvcHtmlString SubGridClient(this HtmlHelper html, ISubGridBuilder builder){ return html.Kendo().Grid<dynamic>() .Name("detailGrid") .Navigatable(n => n.Enabled(true)) .Selectable(s => s .Mode(GridSelectionMode.Single) .Type(GridSelectionType.Row)) .Columns(gcf => { gcf.Bound("ParentId").Hidden(true); gcf.Bound("Id").Hidden(true); builder.BuildColumns(gcf); }) .DataSource(d => d .Ajax() .Model(m => { m.Id("Id"); m.Field("ParentId", typeof(int)); }) .Read(r => r.Action(builder.ActionName, builder.ControlerName, new {Id = "#=ParentId#" })) .PageSize(3) ) .Pageable(p => p .AlwaysVisible(false) .PageSizes(new[] { 3 }) ) .Events(e => e.Change("function(e) { onChange(e)}")) .ToClientTemplate();}
The problem is that at runtime I get a reference error:
VM17183:3 Uncaught ReferenceError: ParentId is not defined at Object.eval [as tmpl0] (eval at compile (kendo.all.js:234), <anonymous>:3:12352) at Object.eval (eval at compile (kendo.all.js:234), <anonymous>:3:185) at d (jquery.min.js:2) at HTMLAnchorElement.<anonymous> (kendo.all.js:64799) at HTMLTableElement.dispatch (jquery.min.js:3) at HTMLTableElement.r.handle (jquery.min.js:3)How can I add the ParentId parameter on the routeValues for the controller call.
Thank you!
Hello,
We have an MVC project that uses the Kendo MVC grid to return well data records. Because we use paging and can return several thousand records, we're using Ajax with server side paging like this (abbreviated):
@(Html.Kendo().Grid<GroundWater.Models.GroundWaterSearchResult>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.well_id).Title("Well ID").Width(75).HtmlAttributes(new { style = "text-align: right;" });
columns.Bound(p => p.Well_Name).Title("Well Name").Width(105).Locked(true);
columns.Bound(p => p.Permit).Title("PermitNo").Width(90);
columns.Bound(p => p.Well_Depth).Title("Well Depth").Width(64).HtmlAttributes(new { style = "text-align: right;" });
columns.Bound(p => p.Water_Level_Depth).Title("Water Level Depth").Width(66).Format("{0:n2}").HtmlAttributes(new { style = "text-align: right;" });
columns.Bound(p => p.Measurement_By).Title("Measurement By").Width(111);
columns.Bound(p => p.publication_name).Title("Publication Name").Width(93);
columns.Bound(p => p.Elevation).Title("Elevation").Width(78).Format("{0:n2}").HtmlAttributes(new { style = "text-align: right;" });
columns.Bound(p => p.Elevation_Accuracy).Title("Elevation Accuracy").Width(121);
columns.Bound(p => p.Top_Perforated_Casing).Title("Top Perforated Casing").Width(84).HtmlAttributes(new { style = "text-align: right;" });
columns.Bound(p => p.Bottom_Perforated_Casing).Title("Bottom Perforated Casing").Width(85).HtmlAttributes(new { style = "text-align: right;" });
columns.Bound(p => p.Base_of_Grout).Title("Base of Grout").Width(65).HtmlAttributes(new { style = "text-align: right;" });
columns.Bound(p => p.Contact).Title("Owner").Width(130);
columns.Bound(p => p.DIV).Title("DIV").Width(54).HtmlAttributes(new { style = "text-align: right;" });
columns.Bound(p => p.WD).Title("WD").Width(54).HtmlAttributes(new { style = "text-align: right;" });
columns.Bound(p => p.County).Title("County").Width(69);
columns.Bound(p => p.basin).Title("Designated Basin").Width(91).HtmlAttributes(new { style = "text-align: right;" });
columns.Bound(p => p.Management_District).Title("Management District").Width(91);
})
.Pageable(pager => pager
.PageSizes(true)
.PageSizes(new int[] { 10, 20, 50, 100 }))
.Sortable(sorting => sorting.AllowUnsort(false))
.Scrollable(scroll => scroll.Height(500))
.Filterable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorderable => reorderable.Columns(true))
.ColumnMenu()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Wells_Read", "GroundWaterSearch").Data("filterData"))
.ServerOperation(true)
.PageSize(50)
)
)
And the JS
<script>
function filterData() {
return {
Publication: document.getElementById('publicationArea').value
//WellName: document.getElementById('wellname').value,
//StartDate: document.getElementById('startdate').value,
//EndDate: document.getElementById('enddate').value,
//ContrArea: document.getElementById('contributingarea').value,
//WaterDistrict: document.getElementById('waterdistrict').value
//........ up to 10 additional fields
};
}
</script>
And the Controller looks like this:
public ActionResult Wells_Read([DataSourceRequest]DataSourceRequest request, string Publication, ......add more parameters)
{
List<string> criteria = new List<string>();
GetPublicationArea(Publication, criteria);
.... additional search criteria
var tempCalls = CallMgrData.GetGroundWaterLevelsResult(criteria);
List<GroundWaterSearchResult> values = tempCalls.ResultSet.Select(x => ModelMapper.Map<GroundWater, GroundWaterSearchResult>(x)).ToList();
DataSourceResult result = values.ToDataSourceResult(request);
return Json(result);
}
My question is, what are my options for returning the additional parameters to the Controller? The View contains complex search criteria (including strings, numbers, and datetime) so I need to return up to 16 parameters from the DataSource. I don't really want to keep adding a long list of parameters (many would or could be null). I would rather return a single object to the controller. I read somewhere I can pass a class object or maybe a json string as the DataSource.Data? Any help would be appreciated. Thanks

Hi I have need to display multiple dynamic grid on single page. I created partial view with dynamic grid binding and passing model and method name to bind data from view. First grid displays data and call data read action but rest of the grid do not display data or call method. It shows column names but no data.
This is partial view
@(Html.Kendo().Grid<dynamic>() .Name(@ViewData["Name"].ToString()) .Columns(columns => { foreach (System.Data.DataColumn column in Model.Columns) { columns.Bound(column.ColumnName); } }) .Pageable() .Sortable() .Filterable() .Groupable() .Scrollable() .DataSource(dataSource => dataSource .Ajax() .PageSize(50) .Model(model => { foreach (System.Data.DataColumn column in Model.Columns) { var field = model.Field(column.ColumnName, column.DataType); } }) .Read(read => read.Action(@ViewData["ActionName"].ToString(), "RunData")) ) )
In main view I am passing list of datatable and in partial view it is getting datatable from ajax call. I have created 3 separate method (ReadData1, ReadData2, ReadData3) in RanData controller.
Thanks in advance.
@model List<System.Data.DataTable>@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml";} <div> @{Html.RenderPartial("dGrid", Model[0], new ViewDataDictionary { { "ActionName", "ReadData1" }, { "Name", "Grid1" } });} </div> <div> @{Html.RenderPartial("dGrid", Model[1], new ViewDataDictionary { { "ActionName", "ReadData2" } , { "Name", "Grid2" } });} </div> <div> @{Html.RenderPartial("dGrid", Model[2], new ViewDataDictionary { { "ActionName", "ReadData3" }, { "Name", "Grid3" } });} </div>