I'm trying to combine the SignalR live updates example with the Hierarchical grid example.
I want both grids to update via SignalR when there's a change. The Customers grid works great.
Trouble is, I can't even read the order data when I switch the Order grid to SignalR. The Read method on the child (order) grid is never called.
I wish there were more documentation on the Transport, Promise, and Hub properties.
Any suggestions?
@{ ViewBag.Title = "Home Page";}<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />@*<link href="http://cdn.kendostatic.com/2016.1.112/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> <link href="http://cdn.kendostatic.com/2016.1.112/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" /> <link href="http://cdn.kendostatic.com/2016.1.112/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" /> <link href="http://cdn.kendostatic.com/2016.1.112/styles/kendo.default.min.css" rel="stylesheet" type="text/css" /> <link href="http://cdn.kendostatic.com/2016.1.112/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" /> <script src="http://cdn.kendostatic.com/2016.1.112/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2016.1.112/js/kendo.all.min.js"></script> <script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script> <script src="http://cdn.kendostatic.com/2016.1.112/js/kendo.aspnetmvc.min.js"></script>*@<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script><script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script><script src="@Url.Content("~/signalr/hubs")"></script><div id="modalWindow"> <h2>Delete?</h2> <button id="yes" class="k-button">Yes</button> <button id="no" class="k-button">No</button></div><script> // var hub = $.connection.customerHub; var customerHub = $.connection.customerHub; var orderHub = $.connection.orderHub; var hubStart = $.connection.hub.start();</script>@(Html.Kendo().Notification() .Name("notification") .Width("100%") .Position(position => position.Top(0).Left(0)))@(Html.Kendo().Grid<TelerikMvcCRUDGrid.Models.CustomerViewModel>() .Name("Customers") .Filterable() .Columns(columns => { columns.Bound(c => c.CustomerId).Visible(false); columns.Bound(c => c.LastName) .ClientTemplate("#:LastName#, #:FirstName#" + "#:MiddleInitial#") .Title("Full Name"); columns.Bound(c => c.AccountNumber); columns.Command(command => { command.Edit(); command.Destroy(); }) .Title("Actions") .HeaderHtmlAttributes(new { style = "font-weight:600;" }); }) .ToolBar(toolbar => toolbar.Create().Text("Add new Customer")) .ToolBar(toolbar => toolbar.Excel().Text("Export to Excel")) .ToolBar(toolbar => toolbar.Pdf().Text("Export to PDF")) .Editable(editable => editable.Mode(GridEditMode.PopUp) .DisplayDeleteConfirmation(false)) .Events(events => events.DetailExpand("onExpandCustomer")) // .Events(e => e.DataBound("onRowBound")) .Pageable(pageable => pageable .Refresh(true) .PageSizes(true) .ButtonCount(5)) .Sortable() .Scrollable(s => s.Height("auto")) .ClientDetailTemplateId("Orders") .DataSource(dataSource => dataSource .SignalR() // .AutoSync(true) // Automatically save changed data items by calling the sync method @*.Events(events => events.Push(@<text> function(e) { var notification = $("#notification").data("kendoNotification"); notification.success(e.type); } </text>))*@ .PageSize(10) // Transport is the configuration used to load and save the data items .Transport(tr => tr .Promise("hubStart") // The promise returned by the start method of the SignalR connection. The promise option is mandatory. .Hub("customerHub") .Client(c => c //transport.signalr.client Specifies the client-side CRUD methods of the SignalR hub. .Read("read") //Specifies the name of the client-side method of the SignalR hub responsible for reading data items. .Create("create") //Specifies the name of the client-side method of the SignalR hub responsible for creating data items. .Update("update") //Specifies the name of the client-side method of the SignalR hub responsible for updating data items. .Destroy("destroy")) //Specifies the name of the client-side method of the SignalR hub responsible for destroying data items. .Server(s => s .Read("read") //Specifies the name of the server-side method of the SignalR hub responsible for reading data items. .Create("create") // Specifies the name of the server-side method of the SignalR hub responsible for creating data items. .Update("update") //Specifies the name of the server-side method of the SignalR hub responsible for updating data items. .Destroy("destroy") //Specifies the name of the server-side method of the SignalR hub responsible for destroying data items. ) ) .Schema(schema => schema .Model(model => { model.Id(m => m.CustomerId); model.Field(m => m.CustomerId).Editable(false); }) ) ))<script id="Orders" type="text/kendo-tmpl"> @(Html.Kendo().Grid<TelerikMvcCRUDGrid.Models.OrderViewModel>() .Name("grid_#=CustomerId#") // template expression, to be evaluated in the master context .Filterable() .ToolBar(toolbar => toolbar.Create().Text("Add new Order")) .ToolBar(toolbar => toolbar.Excel().Text("Export to Excel")) .ToolBar(toolbar => toolbar.Pdf().Text("Export to PDF")) .Editable(editable => editable.Mode(GridEditMode.PopUp)) .HtmlAttributes(new { style = "height:100%;width:100%" }) .Events(e => e.DataBound("onRowBound")) .Columns(columns => { columns.Bound(o => o.OrderId).Visible(false); columns.Bound(o => o.OrderTotal).Width(115); columns.Bound(o => o.OrderSubtotal).Width(120); columns.Bound(o => o.OrderTax).Width(80); columns.Bound(o => o.DatePlaced).Width(115); columns.Bound(o => o.DateShipped).Width(110); columns.ForeignKey(f => f.OrderChannelId, (System.Collections.IEnumerable) ViewData["orderchannels"], "Value", "Text").Title("Channel"); columns.Command(command => { command.Edit(); command.Custom("Delete").Click("openWindow"); }).Title("Order Actions").HeaderHtmlAttributes(new { style = "font-weight:600;" }); }) .DataSource(dataSource => dataSource .SignalR() // .AutoSync(true) // Automatically save changed data items by calling the sync method .PageSize(10) // Transport is the configuration used to load and save the data items .Transport(tr => tr .Promise("hubStart") // The promise returned by the start method of the SignalR connection. The promise option is mandatory. .Hub("orderHub") .Client(c => c //transport.signalr.client Specifies the client-side CRUD methods of the SignalR hub. .Read("read") //Specifies the name of the client-side method of the SignalR hub responsible for reading data items. .Create("create") //Specifies the name of the client-side method of the SignalR hub responsible for creating data items. .Update("update") //Specifies the name of the client-side method of the SignalR hub responsible for updating data items. .Destroy("destroy")) //Specifies the name of the client-side method of the SignalR hub responsible for destroying data items. .Server(s => s .Read("read") //Specifies the name of the server-side method of the SignalR hub responsible for reading data items. .Create("create") // Specifies the name of the server-side method of the SignalR hub responsible for creating data items. .Update("update") //Specifies the name of the server-side method of the SignalR hub responsible for updating data items. .Destroy("destroy") //Specifies the name of the server-side method of the SignalR hub responsible for destroying data items. ) ) .Schema(schema => schema .Model(model => { model.Id(o => o.OrderId); model.Field(o => o.OrderId).Editable(false); }) ) ).ToClientTemplate());</script><script> var wnd; $(document).ready(function () { wnd = $("#modalWindow").kendoWindow({ title: "Delete confirmation", modal: true, visible: false, resizable: false, width: 300 }).data("kendoWindow"); }); function openWindow(e) { e.preventDefault(); var grid = this; var row = $(e.currentTarget).closest("tr"); wnd.center().open(); $("#yes").click(function () { grid.removeRow(row); wnd.close(); }); $("#no").click(function () { wnd.close(); }); } function onRowBound(e) { $(".k-grid-Delete").find("span").addClass("k-icon k-delete"); } function dataBound() { this.expandRow(this.tbody.find("tr.k-master-row").first()); } function onExpandCustomer() { $(".k-detail-cell").css({ "padding": "10px", "background-color": "#f35800" }); }</script><script id="delete-confirmation" type="text/x-kendo-template"> <p class="delete-message">Are you sure?</p> <button class="delete-confirm k-button">Yes</button> <a href="#" class="delete-cancel">No</a></script><script type="text/javascript"> function error_handler(e) { if (e.errors) { var message = "Errors:\n"; $.each(e.errors, function (key, value) { if ('errors' in value) { $.each(value.errors, function () { message += this + "\n"; }); } }); alert(message); } }</script><script> function onExpandProduct() { $(".k-detail-cell").css({ "padding": "10px", "background-color": "white" }); }</script><script type="text/javascript"> function error_handler(e) { if (e.errors) { var message = "Errors:\n"; $.each(e.errors, function (key, value) { if ('errors' in value) { $.each(value.errors, function () { message += this + "\n"; }); } }); alert(message); } }</script>Hi,
We have different cultures setup based on the user login.
We found an issue with grid sort, it seems sorting correctly with US culture, but it fails with UK or custom cultures.
thanks!
I have a grid that includes the Export to Excel functionality.
I retrieve the grid options via getOptions() and store them to local storage so that I may later restore those settings by using setOptions(). The Export to Excel button is not being displayed after I call setOptions() so I'm assuming this is something I need to manually add to the configuration. However, I'm having a hard time coming up with the syntax. How do I do this?
The relevant configuration of the grid looks like this:
.ToolBar(tools => tools.Excel()).Excel(excel => excel .AllPages(true) .FileName("Applications.xlsx") .Filterable(true) .ProxyURL(Url.Action("Excel_Export_Save", "Application")))
Code to populate the grid options looks like this:
var options = JSON.parse(gridOptions);// Now that I have the options how do I add the Excel settings I defined on the// grid above before calling setOptions()?grid.setOptions(options);I have a Menu that has 9 root level items and many children
items under each of them.
I have added tooltips to the items, but I do not want
tooltips for the root items to show up at all.
I am loading the text using the ContentHandler and I have
tried setting the text for the root items to "" and also to null. I
have tried just leaving them out of the JavaScript that I use to set the text.
No matter what I have tried, I get an empty tooltip box
showing next to the root item when I first hover over it.
TIA,
Bob Mathis
Hello, I'm getting very strange behavior on my action buttons on a Kendo Window. I'm currently on UI for ASP.NET MVC 2015.2.805, should I upgrade? ( i see UI for ASP.NET MVC Q1 2016 SP1 has Minimize / maximize events listed, any benefit?)
My setup is, a main view which loads a window, which contents are a kendo scheduler. Here is the razor declaration for the window.
@(Html.Kendo().Window()
.Name("shedulerWindow")
.Title("Scheduler Window")
.Content(@<text>@Html.Action("_EvaultBackupSchedulerPopOut", "Dashboard")</text>)
.Draggable()
.Resizable()
.Width(1285)
.Height(545)
.Position(settings => settings
.Top(178)
.Left(495)
)
.Actions(actions => actions
.Minimize()
.Custom("Maximize")
.Custom("close")
)
.Events(ev => ev
.Close("onClose")
)
)
You'll notice i've started over-writing all of the real close and maximize actions with custom ones, simply because they don't work correctly out of the box; ie.Close never consistently fired my onClose method (50% or less). Maximize and restore were not working correctly and still not.
Now what's happening, when I maximize, I get two restore buttons show up which do not actually work correctly either.
Look at my 'restore code' image of how the HTML renders out.
Look at the restore icons to see what shows up.

columns.Bound(p => p.Reason).Title("Reason") .ClientTemplate("<textarea rows='2' style='text-overflow:ellipsis; display:block; width:99%; height:100%; font-family:Arial; font-size:12px;' readonly='readonly'>#= Reason #</textarea>");@model string@Html.TextAreaFor(m => m, new { rows = 2, cols = 35, wrap = "hard", @readonly = true, style = "text-overflow:ellipsis; display:block; width:99%; height:100%; font-family:Arial; font-size:12px;" })
I getting increasingly frustrated with the effort required to get Telerik/Kendo products to do anything other than look pretty in useless ineffective demos.
The DatePicker is beyond a joke.
I've been buggered by this all day today.
I've got a Kendo grid in an MVC razor page running in AJAX mode with create and update actions calling a controller.
I've also got click-happy users that want to double-click the "update" button and are causing duplicate calls to the data service. I've tried various things, including disabling the buttons on RequestStart and RequestEnd but a double click continually reposts data.
The following code disables both the update and cancel button. inserting the k-state-disabled class and removing the action class replacing it with a dummy class. When the data request is done the classes are restored.
Is there a better solution than this:
.DataSource(ds=>ds .Ajax() //Brevity .Events(events => events.Error("onValidationError")) .Events(events => events.RequestStart("prs_RequestStart")) .Events(events => events.RequestEnd("prs_RequestEnd")) .Read(read => read.Action("ReadCreateProductVMs", "API", new { id = Model.Id })) .Create(create => create.Action("CreateProductVM", "API")) .Update(update => update.Action("UpdateProductVM", "API")) ))<script>function prs_RequestStart(e) { var grid = $("#Grid"); grid.find(".k-grid-update").addClass("k-state-disabled").addClass("qmims-noUpdate").removeClass(".k-grid-update"); grid.find(".k-grid-cancel").addClass("k-state-disabled").addClass("qmims-noCancel").removeClass(".k-grid-cancel");}function prs_RequestEnd(e) { var grid = $("Grid"); grid.find(".k-grid-noUpdate").removeClass("k-state-disabled").removeClass("qmims-noUpdate").addClass("k-grid-update"); grid.find(".k-grid-noCancel").removeClass("k-state-disabled").removeClass("qmims-noCancel").addClass("k-grid-cancel");}</script>
Hello, I'm trying to create a date range picker for a column in a kendo grid that will also use the datepicker UI. Running into a lot of issues here.
I have a JSON file that I am using as a datasource. I'm converting each date string into a date object.
Sorting seems to work on this column, but I'm having issues with any kind of gte/lte operators, they don't seem to work at all.
This is the config I have for the specific column, I'm not very familiar with Kendo and haven't found a forum that uses Kendo grid with pure javascript that utilizes a date range picker on just one column. Any help would be much appreciated, thanks!
{
field: '["Status Date"]',
title: "Status Date",
type: "date",
format: "{0: MM/dd/yyyy}",
filterable: {
operators: {
string: {
lt: "Is before",
gt: "Is after"
}
},
ui: function(element) {
element.kendoDatePicker({
format: "{0: MM/dd/yyyy}",
});
},
extra: true,
messages: {
"info": "Show items between dates:"
}
}
}
hi,
i can get the group footer to show, but the total client footer. below is the code. any ideas? thanks.
@(Html.Kendo().Grid<ClientReporting.ViewModels.Reports.VolumeViewModel>
()
.Name("ReportGrid")
.Columns(columns =>
{
columns.Bound(o => o.Firm).Width(130).Locked(true);
columns.Bound(o => o.Collat).Width(70);
columns.Bound(o => o.UserName).Width(100).Title("User");
columns.Bound(o => o.Product).Title("Product Type").Width(110);
columns.Bound(o => o.Symbol).Title("Symbol").Width(100);
columns.Bound(o => o.Volume).Title("Amount (USD)").Width(150).Format("{0:n0}")
.ClientGroupFooterTemplate("Sub-total: #= kendo.toString(sum, \"n2\")#")
.ClientFooterTemplate("Period Total: #= kendo.toString(sum, \"n2\")#");
})
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
.FileName("RevenueReport.xlsx")
.Filterable(true)
.AllPages(true)
.ProxyURL(Url.Action("ExcelExportSave", "ReportGrid"))
)
.Sortable()
.AllowCopy(true)
.ColumnMenu()
.Groupable(group => group.ShowFooter(true))
.Resizable(resize => resize.Columns(true))
.Scrollable(scrollable => scrollable.Virtual(true))
.Scrollable(s => s.Height("500px"))
.Filterable(filterable => filterable
.Extra(true)
.Operators(operators => operators
.ForNumber(n => n.Clear()
.IsEqualTo("Is Equal To")
.IsGreaterThan("Is Greater Than")
.IsGreaterThanOrEqualTo("Is Greater Than Or Equalt To")
.IsLessThan("Is Less Than")
.IsLessThanOrEqualTo("Is Less Than Or Equal To")
)
.ForDate(d => d.Clear()
.IsEqualTo("Is Equal To")
.IsGreaterThan("Is Greater Than")
.IsGreaterThanOrEqualTo("Is Greater Than Or Equal To")
.IsLessThan("Is Less Than")
.IsLessThanOrEqualTo("Is Less Than Or Equal To"))
)
)
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple)
.Type(GridSelectionType.Row)
)
.AutoBind(false)
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.Model(model =>
{
model.Id(p => p.Firm);
model.Field(p => p.Collat).Editable(false);
model.Field(p => p.UserName).Editable(false);
model.Field(p => p.Product).Editable(false);
model.Field(p => p.Symbol).Editable(false);
model.Field(p => p.Volume).Editable(false);
})
.Read(read => read.Action("Volume", "ReportGrid")
.Data("GetGridData"))
.Group(groups =>
{
groups.Add(model => model.Firm);
groups.Add(model => model.Collat);
groups.Add(model => model.UserName);
groups.Add(model => model.Product);
groups.Add(model => model.Symbol);
})
.Aggregates(aggregates =>
{
aggregates.Add(model => model.Volume).Sum();
})
.Events(events => events.Error("onError").Change("onChange"))
))
