I’m currently testing the Grid control for ASP.NET MVC 5 and I need some help with paging. I’ve managed to get it working with my ASP.NET MVC 5 application at a basic level (data is fetched from a database and displayed in the grid) but the paging is not working (paging buttons are grayed out).
I found the following guide to enable paging but I still can’t make it working:
http://demos.telerik.com/aspnet-core/grid/paging
I mean what does it require to enable paging buttons? My goal is to fetch data, for example, 20 rows at a time (page 1), and when you click on the next button, you'll get the next 20 items (page 2) from the database etc. Is this possible with the Grid?
Here's my code that I'm using to show the grid and fetch the data:

Hi,
If I change the text of a button it removes span and other classes as well.
This is my code but doesn't work.
@(Html.Kendo().Menu()
.Name("HeaderMenu")
.Items(items =>
{
items.Add().Text("Home").Action("Index", "Home").SpriteCssClasses("fa fa-home");
items.Add().Text("About").Action("About", "Home").SpriteCssClasses("fa fa-info");
items.Add().Text("Contact").Action("Contact", "Home").SpriteCssClasses("fa fa-mobile-phone");
items.Add().Text("User").HtmlAttributes(new { id = "userloggedin" }).SpriteCssClasses("fa fa-user").Items(children => {
children.Add().Text("Sign out").SpriteCssClasses("fa fa-sign-out").HtmlAttributes(new { id = "signout" }).Enabled(false);
});
}))
<script type="text/javascript">
function onButtonClick(e) {
var html = $("#userloggedin").children(".k-link").html();
console.log(html);
$("#userloggedin").children(".k-link").text("It is me!");
html = $("#userloggedin").children(".k-link").html();
console.log(html);
}
</script>

Hello,
I have a Diagram Widget with a ShapeTemplate (Html.Kendo().Diagram().Editable.ShapeTemplateName("NodeEditTemplate")
@model Web_Anlageneditor.ViewModels.Diagram.DiagramEditNodeVm@Html.ValidationSummary(true, "", new { @class = "text-danger" })@Html.AntiForgeryToken()<div class="form-group row"> @Html.LabelFor(m => m.Title, new { @class = "col-sm-10 " }) <div class="col-sm-10"> @Html.EditorFor(m => m.Title, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(m => m.Title, "", new { @class = "text-danger" }) </div></div><script> //Kendo Validation $(function() { $("form").kendoValidator(); });</script>
How can I access the window's Title-bar, Width, etc. build around this Template when editing/creating the shape? (s. attachment)


Hello, is it possible to use the gantt chart with a signalR datasource in either Asp.NET MVC or Core? I can't seem to find any demos/examples of it and my attempts are not succesful.
Below is my Gantt.cshtml:
@using KendoNetCoreTest.Models;@using Kendo.Mvc.UI.Html;<script src="@Url.Content("~/Scripts/jquery.signalR-2.2.2.min.js")"></script><script src="@Url.Content("~/signalr/hubs")"></script><script type="text/javascript"> var hub = $.connection.ganttHub; var start = $.connection.hub.start(); function pushEvent(e) { var notif = $("#notif").data("kendoNotification"); notif.success(e.type); }</script><div> @(Html.Kendo().Notification() .Name("notif") .Width("100%") .Position(p => p.Top(0).Left(0)) )</div><div> @(Html.Kendo().Gantt<GanttTask, GanttDependency>() .Name("gantSignalR") .Columns(cols => { cols.Bound(c => c.ID); cols.Bound(c => c.Title); cols.Bound(c => c.Start); }) .DataSource(ds => ds .SignalR() .AutoSync(true) .Events(e => e.Push("pushEvent")) .Transport(tr => tr .Promise("start") .Hub("hub") .Client(c => { c.Read("read"); /* c.Create("create"); c.Update("update"); c.Destroy("destroy"); */ }) .Server(s => { s.Read("read"); /* s.Create("create"); s.Update("update"); s.Destroy("destroy"); */ }) ) .Schema(sch => sch.Model(m => { m.Id(f => f.ID); m.Field(f => f.Title).DefaultValue("New task"); m.Field(f => f.Start).DefaultValue(DateTime.Now); m.Field(f => f.End).DefaultValue(DateTime.Now.AddDays(2)); m.Field(f => f.Name).From("Name").DefaultValue("New task"); m.Field(f => f.ParentID).From("ParentID").DefaultValue(null); m.Field(f => f.OrderId).From("OrderId"); })) ) )</div><div> @(Html.Kendo().Grid<GanttTask>() .Name("grid") .Columns(cols => { cols.Bound(c => c.ID); cols.Bound(c => c.Title); cols.Bound(c => c.Start); cols.Bound(c => c.End); cols.Command(c => { c.Edit(); c.Destroy(); }); }) .DataSource(ds => ds .SignalR() .AutoSync(true) .Transport(tr => tr .Promise("start") .Hub("hub") .Client(c => { c.Read("read"); c.Update("update"); }) .Server(s => { s.Read("read"); s.Update("update"); }) ) .Schema(sch => sch.Model(m => { m.Id(f => f.ID); m.Field(f => f.Title).DefaultValue("New task").Editable(); m.Field(f => f.Start).DefaultValue(DateTime.Now).Editable(); m.Field(f => f.End).DefaultValue(DateTime.Now.AddDays(2)); m.Field(f => f.Name).DefaultValue("New task"); m.Field(f => f.ParentID).DefaultValue(null); m.Field(f => f.OrderId); })) ) .Editable(e => e.Mode(GridEditMode.InLine)) )</div>
The hub is currently just returning a dummy data of
public List<GanttTask> Read() { return new List<GanttTask>() { new GanttTask() { ID= 1, Title = "New task", Name= "New Task", Start = DateTime.Now, End=DateTime.Now.AddDays(2), OrderId = 1, ParentID = null } }; }
The result is a bit mixed for the gantt. It show the ids but nothing else, while the grid shows everything ok, see attached picture. The grid meanwhile shows the dates also.
Hi,
I am trying to use Panelbar as a Side bar navigation (something like Outlook).
I have the Model this way.
public class NavbarMainMenuModel{ public int Dept_id { get; set; } public int Seq_no { get; set; } public string Dept_name { get; set; } public List<NavbarMenuItem> Items { get; set; }}public class NavbarMenuItem{ public int Menu_item_id { get; set; } public int Seq_no { get; set; } public int Dept_id { get; set; } public string MenuName { get; set; }}
Now, I want to load the Panel bar with this data.
Currently, I have this code and it only display the top level items but not the children.
<div id="responsive-panel" style="width:200px;"> @(Html.Kendo().PanelBar() .Name("panelbar") .ExpandAll(false) .ExpandMode(PanelBarExpandMode.Multiple) .DataTextField("Dept_name") .DataSource(ds=>ds .Read(read=>read.Action("GetMainMenuItems","Home")) ) .Events(e=>e .Select("panelbarselected") ) )</div>
How do I get the Main list and sub items display on the PanelBar?
Also, i need to display them in the right sequence (if possible).
Thanks,
Arun
I've got an MVC implementation of a grid, datasource settings below
.DataSource(datasource => datasource
.Ajax()
.PageSize(20)
.ServerOperation(false)
.Read(read => read.Action("Data_Read", "StaffManager")
.Data("pageData")
)
I have ServerOperation(false) to allow for some client side sorting, which works great! Now I'm trying to get client side paging working but I cannot.
My page event handler is here:
function onGridPage(args) {
pageNumber = args.page;
var grid = $('#grid').data('kendoGrid');
grid.dataSource.read();
grid.dataSource.sync();
grid.refresh();
}
When I click page, I get back a valid json result from my read method (expecting 1 item) but the grid doesn't display anything. The page numbers and totals are updated correctly, just no data is shown. In dev tools, I see the json object that has data.
I assume that the datasource isn't being updated after the read.
Any suggestions?
@(Ajax.ActionLink("Add another shipment", "BlankEditor", new AjaxOptions { UpdateTargetId = "items", InsertionMode = InsertionMode.InsertAfter, }))@model SupplyViewModel<div class="k-block k-info-colored" style="margin-bottom: 1em;"> <div class="k-block"> <div style="display: inline-block;"> <div class="editor-label"> @Html.LabelFor(model => model.ReportDate) </div> <div class="editor-field"> @(Html.Kendo().DatePickerFor(model => model.ReportDate) .Name("ReportDate" + new Random().Next()) .Value(DateTime.Now.Date) .Max(DateTime.Now.Date)) @Html.ValidationMessageFor(model => model.ReportDate) </div> </div> <div style="display: inline-block;"> <div class="editor-label"> @Html.LabelFor(model => model.OrganizationId, "Supplier") </div> <div class="editor-field"> @(Html.Kendo().DropDownListFor(model => model.OrganizationId).Name("ddlOrganization").HtmlAttributes(new { @Class = "HABddList" }).SelectedIndex(0).BindTo(ViewBag.OrganizationId)) @Html.ValidationMessageFor(model => model.OrganizationId) </div> </div> </div> <div class="k-block vesselinfo" style="position: relative;"> <div style="display: inline-block;"> <div class="editor-label"> @Html.LabelFor(model => model.VesselName) </div> <div class="editor-field"> @Html.EditorFor(model => model.VesselName) @Html.ValidationMessageFor(model => model.VesselName) </div> </div> <div style="display: inline-block;"> <div class="editor-label"> @Html.LabelFor(model => model.VesselId) </div> <div class="editor-field"> @Html.EditorFor(model => model.VesselId) @Html.ValidationMessageFor(model => model.VesselId) </div> </div> <div style="display: inline-block;"> <div class="editor-label"> @Html.LabelFor(model => model.PortOfEntryId, "PortOfEntry") </div> <div class="editor-field"> @(Html.Kendo().DropDownListFor(model => model.PortOfEntryId).OptionLabel("Select Port of Entry...").BindTo(ViewBag.PortOfEntryId)) @Html.ValidationMessageFor(model => model.PortOfEntryId) </div> </div> @* <div style="float: right;"> <a href="#" class="k-button show_hide" style="text-align: right;">Hide</a> </div>*@ </div> @* <div class="k-block k-info-colored" id="vesselShowButton" style="text-align: right;"> <a href="#" class="k-button show_hide">Show Vessel Info</a> </div>*@ <div class="k-block"> <div class="dates"> <div class="editor-label"> @Html.LabelFor(model => model.EstimatedDepartureDate) </div> <div class="editor-field"> @Html.EditorFor(model => model.EstimatedDepartureDate) @Html.ValidationMessageFor(model => model.EstimatedDepartureDate) </div> </div> <div class="dates"> <div class="editor-label"> @Html.LabelFor(model => model.EstimatedArrivalDate) </div> <div class="editor-field"> @Html.EditorFor(model => model.EstimatedArrivalDate) @Html.ValidationMessageFor(model => model.EstimatedArrivalDate) </div> </div> <div class="dates"> <div class="editor-label"> @Html.LabelFor(model => model.DepartureDate) </div> <div class="editor-field"> @Html.EditorFor(model => model.DepartureDate) @Html.ValidationMessageFor(model => model.DepartureDate) </div> </div> <div class="dates"> <div class="editor-label"> @Html.LabelFor(model => model.ArrivalDate) </div> <div class="editor-field"> @Html.EditorFor(model => model.ArrivalDate) @Html.ValidationMessageFor(model => model.ArrivalDate) </div> </div> </div> <div class="k-block"> <table class="quantities"> <tr> <th></th> <th>Unit</th> <th>Sizes:</th> @foreach (SelectListItem item in ViewBag.ProductSizeId) { <th>@item.Text</th> } </tr> <tr> <td style="font-size: smaller;">Quantity in</td> <td>lugs</td> <td></td> @foreach (SelectListItem item in ViewBag.ProductSizeId) { <td>@(Html.Kendo().NumericTextBox<double>() .Name(item.Text) .Format("##,#") .Spinners(false) )</td> } </tr> </table> </div></div><script> $(function () { //var ddLists = $(".HABddList").each( // function () { // // $(this).data("kendoDropDownList").list.width("auto"); // alert('hi'); // setWidth($("this")); // }); setWidth($("#ddlOrganization")); //$(".vesselinfo").hide(); //$(".show_hide").show(); //$('.show_hide').click(function () { // $(".vesselinfo").slideToggle(); // $("#vesselShowButton").slideToggle(); //}); }); function setWidth(el) { var d = el; var p = d.data("kendoDropDownList").popup.element; var w = p.css("visibility", "hidden").show().outerWidth() + 30; p.hide().css("visibility", "visible"); d.closest(".k-widget").width(w); }</script><style scoped> .k-numerictextbox { max-width: 50px; margin: 0px; padding: 0; } .show_hide { display: none; } .dates { display: inline-block; margin-left: 1em; } .dates:nth-of-type(1) { margin-left: 0; } .quantities { border-collapse: collapse; border-spacing: 0; border: solid 1px; } .quantities th { min-width: 40px; max-width: 50px; text-align: center; font-size: 1em; border: solid 1px; margin: 0.5em 0.5em; } .quantities th:nth-of-type(1) { width: 35px; } .quantities td { text-align: center; padding: 0; border: solid 1px; }</style>
Hi!
My problem is, that I have a custom class with 3*2 fileds (DateTime and an integer value for 3 different things, so I want to see 3 series in my charts):
My viewmodel:
public class RiportViewModels
{
private DateTime _firstDate;
private DateTime _secondDate;
private DateTime _thirdDate;
public DateTime FirstDate
{
get => _firstDate;
set
{
if (value.Year < 1950) value = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
_firstDate = new DateTime(value.Year, value.Month, 1);
}
}
public int FirstAmount { get; set; }
public DateTime SecondDate
{
get => _secondDate;
set
{
if (value.Year < 1950) value = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
_secondDate = new DateTime(value.Year, value.Month, 1);
}
}
public int SecondAmount { get; set; }
public DateTime ThirdDate
{
get => _thirdDate;
set
{
if (value.Year < 1950) value = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
_thirdDate = new DateTime(value.Year, value.Month, 1);
}
}
public int ThirdAmount { get; set; }
}
My controller:
public class RiportController:Controller
{
[HttpGet]
public ActionResult Show()
{
return View();
}
[HttpPost]
public async Task<ActionResult> Show([DataSourceRequest] DataSourceRequest request)
{
List<RiportViewModels> result = new List<RiportViewModels>();
//here I fill up this list
return Json(result, JsonRequestBehavior.AllowGet);
}
}
And the Chart is empty:
@(Html.Kendo().Chart<RiportViewModels>()
.Name("chart")
.Title("My results")
.Legend(legend => legend
.Position(ChartLegendPosition.Top)
)
.DataSource(x => x
.Read(read => read.Action("Show", "Riport"))
)
.ChartArea(chartArea => chartArea
.Background("transparent")
)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Line().Style(ChartLineStyle.Smooth)
)
.Series(series =>
{
series.Line(model => model.FirstAmount, category => category.FirstDate).Name("My first amount");
series.Line(model => model.SecondAmount, category => category.SecondDate).Name("My second amount");
series.Line(model => model.ThirdAmount, category => category.ThirdDate).Name("My third amount");
})
.CategoryAxis(axis => axis
.ValueAxis(axis => axis
.Numeric()
.Labels(labels => labels.Format("{0}"))
.Line(line => line.Visible(false))
.Max(30000)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}")
)
)
I would like to see 3 lines, on the X axis the dates showing only the year and the month, on the Y axis the amount field.
Can you please help me, why my chart is totally empty?
Many thanks

I am no longer able to resize columns in Google Chrome. I've noticed this issue in the past but it seemed to resolve itself. After updating to the latest release, it looks like the issue is back. I don't know if this has to do with the update, but it is a crucial feature that I need.
I don't think this is something on my end, as it looks to be broken in the demo while in chrome:
http://demos.telerik.com/aspnet-mvc/grid/column-resizing