We are loading 600-1000 records in a grid in a popup window. Without using virtualization, grid performance in IE10+ is very slow but excellent in Chrome. Currently we have virtualization turned on so we can get descent performance in IE. In an upcoming application we are not going to be able to use virtualization because of it's restrictions but will be fetching around the same number of records. I have attached the html used for the popup window and the grid. The grid is defined at line 121. I have also attached the controller where the grid options are defined, line 688 and the datasource used, line 648. Any advice on this would be very helpful.
Customer ID:XJ1552164
I'm facing a problem when I try to change the Radial Gauge value with the code below in my TypeScript project.
var gauge = $("#gauge").data("kendoRadialGauge");gauge.options.pointer[0].value = Math.random() * 100;
The property 'value' is updated with the new value, but the pointer doesn't move.
What I'm doing wrong?
Thanks!
Hi there,
I'm using a Kendo UI Grid for MVC, with an excel export option. One column is HTML straight from the database as comes into the excel as raw HTML so I'd like to hide this column. I've tried adapting the code from a separate thread (http://www.telerik.com/forums/export-to-grid-hide-columns) for standard UI rather than MVC but it isn't achieving what I want (see code below) - this is what happens :-
a) On the 1st click of Export to Excel it does nothing
b) On the second click it hides the column on the page but doesn't do the excel export
c) on the 3rd click it shows the column on the page again and does the excel export, but without the column removed
Any help would be appreciated :)
This is my view code :-
<script>
// setup the page
$(window).load(function () {
var grid = $("#grid").data("kendoGrid");
var exportFlag = false;
grid.bind("excelExport", function (e) {
if (!exportFlag) {
alert(1);
e.sender.hideColumn(1);
e.preventDefault();
exportFlag = true;
setTimeout(function () {
e.sender.saveAsExcel();
});
} else {
alert(2);
e.sender.showColumn(1);
exportFlag = false;
}
});
})
</script>
@( Html.Kendo().Grid<TEAMSPortalV2.Models.SiteViewModel>()
.Name("grid")
.DataSource(datasource => datasource
.Ajax()
.Read(read => read.Action("GetSites", "Site"))
.Sort(sort => sort.Add("AddressWithPostcode").Ascending())
)
.Columns(columns =>
{
columns.Bound(site => site.UPRN).Title("UPRN");
columns.Bound(site => site.AddressWithPostcode).Title("Address");
columns.Bound(site => site.Contact).Title("Contact");
columns.Bound(site => site.Telephone).Title("Telephone");
columns.Bound(site => site.SampleResultsOverview).Title("Rec. Action").Encoded(false);
columns.Template(site => { }).ClientTemplate(" ").Title("Site Documents");
})
.ClientRowTemplate(Html.Partial("~/Views/Site/SiteTemplate.cshtml").ToHtmlString())
.Sortable()
.ToolBar(tools =>
{
tools.Template(@<text>
<div class="toolbar">
<a class="k-button k-button-icontext k-grid-excel" href="#"><span class="k-icon k-i-excel"></span>Export to Excel</a>
<a href="#" onclick="alert('filter!');"><img src="~/Content/images/icons/filter.png" class="floatright" style="padding: 3px;" /></a>
</div>
</text>);
})
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Excel(excel => excel
.FileName("sites.xlsx")
.AllPages(true))
)
Hello,
I want to use the virtualization feature of the DropDownList component but it does not work correctly. In the attached screenshot you see that there is not scrollbar in the dropdown and the list of elements is larger than the dropdown box. Furthermore, the gap between the elements is too large (I used the settings for itemHeight and height as specified on your example page).
Here is my code:
$(document).ready(function() { $("#select14349870649078014764761").kendoDropDownList({ filter: 'contains', dataTextField: 'project_title', dataValueField: 'project_id', virtual: { valueMapper: function(options) { $.ajax({ url: '/project/getRowNumber', type: 'GET', data: { filterValue: options.value }, success: function(data) { options.success(data); } }); } }, dataSource: { pageSize: 80, serverPaging: true, serverFiltering: true, transport: { read: { url: '/project/select?filterProperty=title' } }, schema: { model: { fields: { project_title: {type: 'string'}, project_id: {type: 'number'} } } } } });});Regards
Sebastian
Hi,
Our app locks into portrait mode. We would like to have a chart that displays a lot of data horizontally and wondering if there is a way for us to enable horizontal scrolling of the chart area in the app, assume a simple bar chart for 12 months, where 3 can be shown on the screen at a time, but scrolling will allow the user to see other months data.
(We are aware that we can have a vertical scrolled chart, we are just exploring the other alternative)\
Thanks,
Ron.
Hi,
I have a kendo grid with a detail template for each row that holds another grid. On the nested grid I will have three custom toolbar buttons. I can access the click event of the custom button in general, but it does not seem to tie to a specific nested grid. Clicking on the button on one grid will give me access to the grid's contents, but when I click on the custom button from a different nested grid I get the data from the first one. Is there a way to add a unique id to the button so I can get the data for each specific grid on the click of the corresponding button? Here is the code I am using so far:
Grid: toolbar: [ { name: "custom", text: "Custom" }
],
Event Handler: $(".k-grid-custom").click(function (e) {
debugger
var ledgerGrid = $(".ledger").data("kendoGrid");
var selected = ledgerGrid._data[0].account_id;
});
Hello,
I've noticed in version 2014 Q3 combobox doesn't scroll top after read new data, in version 2015 Q1 always after read scroll is on top. I need the same solution in version 2015 Q1 as this (topic from forum).
01.(function ($, kendo) {02. var ExtendedComboBox = kendo.ui.ComboBox.extend({03. 04. _pager: null,05. _scrollTop: null,06. 07. init: function (element, options) {08. var that = this;09. 10. //set combobox defaults11. that.options.placeholder = "Select";12. that.options.autoBind = false;13. that.options.highlightFirst = true;14. that.options.suggest = true;15. that.options.filter = "contains";16. 17. kendo.ui.ComboBox.fn.init.call(that, element, options);18. 19. if (options.loadOnDemand) {20. var that = this;21. 22. if (options.itemsPerRequest != null) {23. this.options.itemsPerRequest = options.itemsPerRequest;24. }25. 26. that.dataSource.options.serverFiltering = true;27. that.dataSource.options.serverPaging = true;28. that.dataSource.options.serverSorting = true;29. that.dataSource._take = this.options.itemsPerRequest;30. 31. if (this.options.virtualScrolling == true) {32. $('ul', this.list).scroll(this, this.scroll);33. }34. 35. $('a.k-link', this._pager).css({36. cursor: 'pointer'37. }).click(function (e) {38. e.preventDefault();39. var items = that.dataSource.view().length;40. var total = that.dataSource.total();41. if (total != items) {42. that._scrollTop = $('ul', that.list).scrollTop();43. that.dataSource.pageSize(that.dataSource.pageSize() + that.options.itemsPerRequest);44. }45. });46. this.list.append(this._pager);47. 48. }49. },50. options: {51. name: "ExtendedComboBox",52. loadOnDemand: false,53. itemsPerRequest: 20,54. virtualScrolling: false55. },56. refresh: function () {57. kendo.ui.ComboBox.fn.refresh.call(this);58. 59. if (this._scrollTop != null) {60. $('ul', this.list).scrollTop(this._scrollTop);61. this._scrollTop = null;62. }63. },64. open: function () {65. this.refresh();66. kendo.ui.ComboBox.fn.open.call(this);67. },68. scroll: function (e) {69. var scrollTop = $(e.currentTarget).scrollTop();70. if (e.data._scrollTop != null) return;71. if (scrollTop + $(e.currentTarget).height() >= $(e.currentTarget)[0].scrollHeight - 1) {72. var items = e.data.dataSource.view().length;73. var total = e.data.dataSource.total();74. if (total != items) {75. e.data._scrollTop = scrollTop;76. e.data.dataSource.pageSize(e.data.dataSource.pageSize() + e.data.options.itemsPerRequest);77. }78. }79. }80. });81. 82. kendo.ui.plugin(ExtendedComboBox);83. })(window.kendo.jQuery, window.kendo);Thanks.
I have a scheduler which allows to add attendees
@(Html.Kendo().Scheduler<AGAT.TSSM.Web.Models.Schedule.ScheduleViewModel>() .Name("scheduler") .Date(DateTime.Today) .StartTime(DateTime.Today.AddHours(7)) .EndTime(DateTime.Today.AddHours(21)) .WorkDayStart(8, 0, 0) .WorkDayEnd(21, 0, 0) .WorkWeekStart(1) .WorkWeekEnd(0) .Timezone("Etc/UTC") .EventTemplateId("customEventTemplate") .AllDayEventTemplateId("customAllDayTemplate") .Views(views => { views.DayView(d => d.DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'ddd dd/M')#</span>")); views.WeekView(weekView => weekView.Selected(true).DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'ddd dd/M')#</span>")); views.MonthView(); views.AgendaView(); }) .Editable(editable => { editable.TemplateName("_ScheduleWindowTemplate"); }) .DataSource(d => d .Model(m => { m.Id(f => f.Id); }) .Events(e => e.Error("error_handler")) .Read("Read", "Schedule") .Create("Create", "Schedule") .Update("Update", "Schedule") .Destroy("Delete","Schedule") ))A pop up window comes from a template
@using AGAT.TSSM.Logic.Domain.Model.Schedule;@using AGAT.TSSM.Web.Models.User;@model AGAT.TSSM.Web.Models.Schedule.ScheduleViewModel@{ //required in order to render validation attributes ViewContext.FormContext = new FormContext();}@functions{ public Dictionary<string, object> generateDatePickerAttributes( string elementId, string fieldName, string dataBindAttribute, Dictionary<string, object> additionalAttributes = null) { Dictionary<string, object> datePickerAttributes = additionalAttributes != null ? new Dictionary<string, object>(additionalAttributes) : new Dictionary<string, object>(); datePickerAttributes["id"] = elementId; datePickerAttributes["name"] = fieldName; datePickerAttributes["data-bind"] = dataBindAttribute; datePickerAttributes["required"] = "required"; datePickerAttributes["style"] = "z-index: inherit;"; return datePickerAttributes; }}<div class="k-edit-label"> @(Html.LabelFor(model => model.Title))</div><div data-container-for="title" class="k-edit-field"> @(Html.TextBoxFor(model => model.Title, new { @class = "k-textbox", data_bind = "value:title" }))</div><div class="k-edit-label"> @(Html.LabelFor(model => model.Location))</div><div data-container-for="title" class="k-edit-field"> @(Html.TextBoxFor(model => model.Location, new { @class = "k-textbox", data_bind = "value:Location" }))</div><div class="k-edit-label"> @(Html.LabelFor(model => model.IsAllDay))</div><div data-container-for="isAllDay" class="k-edit-field"> <input data-bind="checked: isAllDay" data-val="true" id="IsAllDay" name="IsAllDay" type="checkbox" /></div><div class="k-edit-label"> @(Html.LabelFor(model => model.Start))</div><div data-container-for="start" class="k-edit-field"> @(Html.Kendo().DateTimePickerFor(model => model.Start) .HtmlAttributes(generateDatePickerAttributes("startDateTime", "start", "value:start,invisible:isAllDay"))) @(Html.Kendo().DatePickerFor(model => model.Start) .HtmlAttributes(generateDatePickerAttributes("startDate", "start", "value:start,visible:isAllDay"))) <span data-bind="text: startTimezone"></span> <span data-for="start" class="k-invalid-msg"></span></div><div class="k-edit-label"> @(Html.LabelFor(model => model.End))</div><div data-container-for="end" class="k-edit-field"> @(Html.Kendo().DateTimePickerFor(model => model.End) .HtmlAttributes(generateDatePickerAttributes( "endDateTime", "end", "value:end,invisible:isAllDay", new Dictionary<string, object>() { { "data-dateCompare-msg", "Окончание должно быть позднее начала" } }))) @(Html.Kendo().DatePickerFor(model => model.End) .HtmlAttributes(generateDatePickerAttributes( "endDate", "end", "value:end,visible:isAllDay", new Dictionary<string, object>() { { "data-dateCompare-msg", "Окончание должно быть позднее начала" } }))) <span data-bind="text: endTimezone"></span> <span data-for="end" class="k-invalid-msg"></span></div><div class="k-edit-label"> @(Html.LabelFor(model => model.RecurrenceRule))</div><div data-container-for="recurrenceRule" class="k-edit-field"> @(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule) .HtmlAttributes(new { data_bind = "value:recurrenceRule" }))</div><div class="k-edit-label"> @(Html.LabelFor(model => model.ScheduleType))</div><div data-container-for="ScheduleType" class="k-edit-field"> @* @Html.DropDownListFor(m => m.ScheduleType, Model.ScheduleTypeList)*@ @(Html.Kendo().DropDownListFor(model => model.ScheduleType) .HtmlAttributes(new { data_bind = "value:ScheduleType", style = "width: 200px" }) .DataTextField("Text") .DataValueField("Value") .OptionLabel("None") .ValuePrimitive(true) .Template("<span class='k-scheduler-mark' style='background-color:\\#= data.Color?Color:'' \\#'></span>\\#=Text\\#") .Events(e => e.Change("scheduleTypeChange")) .BindTo(new[] { new { Text = "Обычное событие", Value = ScheduleType.GeneralSchedule, Color = "\\#6eb3fa" }, new { Text = "Работа над заявкой", Value = ScheduleType.WorkOnRequest, Color = "\\#D9534F" }, new { Text = "Работа над задачей", Value = ScheduleType.WorkOnTask, Color = "\\#5CB85C" }, new { Text = "Работа над проектом", Value = ScheduleType.WorkOnProject, Color = "\\#F0AD4E" }, new { Text = "Собрание", Value = ScheduleType.GroupMeeting, Color = "\\#f58a8a" } }).ToClientTemplate() )</div><div id="item-reference" style="display: none;"> <div class="k-edit-label"> @(Html.LabelFor(model => model.ItemReference, new { id = "ref-label" })) </div> <div data-container-for="title" class="k-edit-field"> @(Html.TextBoxFor(model => model.ItemReference, new { @class = "k-textbox", data_bind = "value:ItemReference" })) </div></div><div id="item-invitees"> <div class="k-edit-label"> @(Html.LabelFor(model => model.ScheduleInvitees, new { id = "ref-label" })) </div> <div data-container-for="title" class="k-edit-field"> @(Html.Kendo().MultiSelectFor(m => m.ScheduleInvitees) .Name("ScheduleInvitees") .HtmlAttributes(new { data_bind = "value:ScheduleInvitees" }) .DataTextField("Name") .DataValueField("Id") .TagTemplateId("tagTemplate") .ItemTemplateId("itemTemplate") .Filter("contains") .AutoBind(true) .ValuePrimitive(true) .DataSource(source => { source.Read(read => { read.Action("GetInvitees", "Base"); }) .ServerFiltering(true); }) .Value(Model.InvitedUsers) ) </div></div>My problem is that the multiselect sets new attendees but not reading them when I want to edit it
.DataSource(source => { source.Read(read => { read.Action("GetInvitees", "Base"); }) .ServerFiltering(true); }) .Value(Model.InvitedUsers)InvitesUsers come from my model and it is a SelectList and I set it like this:
InvitedUsers = users.ToSelectList(x => new ExtSelectItem
{
Selected = true,
Text = x.Name,
Value = x.Id.ToString()
}