I have a problem with the datasource, when binding it to an asp.net MVC backend controlller for READ and UPDATE.
The READ function works when using the parameterMap like :
if (operation == "read") {
return options;
};
The UPDATE function, however, does NOT:
if (operation != "read" && options.models) {
return { models: kendo.stringify(options.models) };
};
When saving the grid back to the backend controller, an error occurs in kendo.all.js.
This i my Datagrid - sourcecode:
var gridDatasource = new kendo.data.DataSource({ transport: { read: { url: "@Url.Action("GetBudgetData","Dagsbudget")", dataType: "json", type: "POST", data: { butik: $("#location").data("kendoDropDownList").value(), budgetyear: periodeSelector.getFullYear(), budgetmonth: periodeSelector.getMonth() + 1 } }, update: { url: "@Url.Action("PutBudgetData","Dagsbudget")", type: "POST", dataType: "json", }, parameterMap: function (options, operation) { if (operation != "read" && options.models) { return { models: kendo.stringify(options.models) }; }; if (operation == "read") { return options; }; }, success: function (e) { alert("Get budget data success"); }, error: function (xhr, status, error) { debugger; alert(error); }, schema: { model: { fields: { location: { type: "text", ediable: false }, date: { type: "date", editable: false, format: "dddd, 'd.' dd-MM-yyyy" }, lastYear: { type: "number", editable: false }, budget: { type: "number", editable: true }, fontcolor: { type: "text", editable: false } } } }, batch: true } });My Grid definition:
$("#budgetGrid").kendoGrid({ dataSource: gridDatasource, toolbar: ["save","cancel"], pageable: false, editable: "inline", navigatable: true, groupable: false, sortable: false, pageable: false, columns: [ { field: "location", hidden: true }, { field: "date", title: "Day", width: 180, template: "<span style='color:#=fontColor#'>#= kendo.toString(date, 'dddd, dd-MM-yyyy') #</span>" }, { field: "lastYear", title: "Sidste års oms.", width: 80, format: "{0:c0}", attributes: { style: "text-align:right;" } }, { field: "budget", title: "Budget", width: 80, format: "{0:c0}", attributes: { style: "text-align:right;", class: "budgetamount" } } ]});My backend controller actions:
[HttpPost]public JsonResult GetBudgetData(string butik, int budgetyear, int budgetmonth){ return Json(db.GetDailyBudget(butik, new DateTime(budgetyear, budgetmonth, 1)));}[HttpPut]public JsonResult PutBudgetData(IEnumerable<DailyBudget> budgets){ foreach (DailyBudget item in budgets) { // Do something.... } return Json(null);}
Either the update-routine of the grid doesn't fire or an error occurs in the kendo-all.js file...
I have tried all the tricks, tips and workarounds I can find or think of, but nothing seems to be working...
Hello,
We were advised by Kendo support to use a kendo.ui.progress control to display on-screen during a save process (which may take 5-10 seconds), but it seems like the Progress control isn't able to display before the save process begins. In fact, it is only drawn after the save process completes, which renders it pointless.
I've mocked up an example here:
http://dojo.telerik.com/OLiGUz
It's clear from the display of the button that the delay has occurred (as it's unresponsive during this period). Additionally, if you comment out the line which hides the Progress control, and re-run it, you can see that the Progress control is only displayed after the long process has completed.
So how do we get the progress control to display before the long process begins?
We urgently require a solution to this problem, so would appreciate a recommendation ASAP.
Thanks.

I use the script like 'ex1' but it will very slow when the event is too much,so I want use pushDestroy to remove events from another datasource like 'ex2' but not useful
ex1:
function remove(ownerId){
var raw = $("#scheduler").data("kendoScheduler").dataSource.data();
var length = raw.length;
var item, i;
for(i=length-1; i>=0; i--){
item = raw[i];
if (item.ownerId==ownerId)
{ $("#scheduler").data("kendoScheduler").dataSource.remove(item); }
}
}
ex2:
var sharableDataSource = new kendo.data.SchedulerDataSource({
transport: {
read: {
url: "/api/tasks",
data: { id: id }
}
},
schema: {
model: {
id: "TaskID",
fields: {
eventID: { from: "EventID" },
taskID: { from: "TaskID" },
title: { from: "Title", validation: { required: true } },
location: { from: "Location" },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
ownerId: { from: "OwnerID"},
isAllDay: { type: "boolean", from: "IsAllDay" },
alert: { from: "Alert", type: "object", defaultValue: "" },
showfor: { from: "Showfor", type: "object", defaultValue: "busy" },
}
}
}
});
$("#scheduler").data("kendoScheduler").dataSource.pushDestroy(sharableDataSource.data().toJSON());
I'm having issue for display listview template vertically.
<div class="mainsortable">
@(Html.Kendo().ListView<KendoUI_MVC.ViewModel.Product>()
.Name("listView")
.TagName("div")
.ClientTemplateId("template")
.DataSource(dataSource =>
{
dataSource.Read(read => read.Action("ProductGrid_Read", "ListView"));
})
)
@(Html.Kendo().Sortable()
.For("#listView")
.Ignore(".order")
.Filter(">div.product")
.Cursor("move")
.PlaceholderHandler("placeholder")
.HintHandler("hint")
)
</div>
</div>
<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<div class="panel panel-default">
<div class="panel-heading">#=ProductID# #:ProductName#</div>
<div class="panel-body">
<div class="partialsortable">
@(Html.Kendo().ListView<KendoUI_MVC.ViewModel.Order>()
.Name("OrderlistView_#=ProductID#")
.TagName("div")
.ClientTemplateId("ordertemplate")
.DataSource(dataSource =>
{
dataSource.Read(read => read.Action("Order_Read", "ListView", new { ProductID = "#=ProductID#" }));
})
.ToClientTemplate()
)
@(Html.Kendo().Sortable()
.For("#OrderlistView_#=ProductID#")
.Filter(">div.order")
.Cursor("move")
.PlaceholderHandler("placeholder")
.HintHandler("hint")
.ToClientTemplate()
)
</div>
</div>
</div>
</div>
</script>
<script type="text/x-kendo-tmpl" id="ordertemplate">
<div class="order">
Unit Price : #:UnitPrice#<br />
Quantity : #:Quantity#<br />
Discount : #:Discount#
</div>
</script>
<script>
function placeholder(element) {
return element.clone().addClass("placeholder");
}
function hint(element) {
return element.clone().removeClass("k-state-selected");
}
</script>
<style>
.mainsortable {
min-width: 1120px;
}
.order {
margin: 10px;
padding: 10px;
border: 2px solid #000;
}
.panel{
margin-left:10px;
margin-right:10px;
}
.tabstrip{
margin-bottom:10px;
}
.frame{
padding:10px;
}
#listView {
padding: 10px 5px;
margin-bottom: -1px;
min-height: 400px;
min-width:1120px;
}
.product {
float: left;
position: relative;
width: 400px;
min-height: 100px;
cursor: default;
}
.k-listview:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
In css, #listView min-width property does not working properly.I attached following the screenshot of expected listview (Expected.png) and Issued listview (Issue.png).

I
<div class="panel-body">
@(Html.Kendo().Grid<CdsAdmin.ViewModels.TravelPreferenceVM>()
.Name("gridTravelPreference")
.Columns(columns =>
{
columns.Bound(c => c.TPF_ID).Hidden();
columns.Bound(c => c.TPO_ID).Hidden();
columns.Bound(c => c.TPF_NAME).Filterable(true).Width(200);
columns.Bound(c => c.TPF_DESC).Filterable(false).Width(250);
columns.Bound(c => c.TPF_STATUS).ClientTemplate("# if (TPF_STATUS == 1 ) {# Active #} else {# Inative #}#").Filterable(false).Width(100);
columns.Bound(c => c.TPF_PREFERENCE).ClientTemplate("# if (TPF_PREFERENCE == 1 ) {# <i class='fa fa-heart'></i><i class='fa fa-heart'></i> #} " +
"else if (TPF_PREFERENCE == 2 ) {# <i class='fa fa-heart'></i><i class='fa fa-heart'></i><i class='fa fa-heart'></i> #} " +
"else if (TPF_PREFERENCE == 3 ) {# <i class='fa fa-stars'></i> Exclusive #} " +
"else if (TPF_PREFERENCE == 0 ) {# Neutral #} " +
"else if (TPF_PREFERENCE == -1 ) {# Hidden #} " +
"else {# TPF_PREFERENCE #}#").Filterable(false).Width(200);
columns.Bound(c => c.HTL_CD).Filterable(false);
columns.Bound(c => c.HCH_ID).Filterable(false);
columns.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); }).Width(150);
})
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
<a class='k-button k-button-icontext k-grid-excel' href='#'><span class='k-icon k-i-excel'></span>Export Excel</a>
<a class='k-button k-button-icontext k-grid-pdf' href='#'><span class='k-icon k-i-pdf'></span>Export PDF</a>
<a class='k-button k-button-icontext k-grid-add' href='#'><span class='k-icon k-i-add'></span>Add</a>
<a class="k-button k-button-icontext" onclick="addMultiHotels()" style="width:200px;"><span class='k-icon k-i-add'></span>Add multi</a>
</text>);
})
.Editable(editing =>
{
editing.Mode(GridEditMode.PopUp).TemplateName("PopupEditors/PopupTravelPreference")
.Window(w => w.Title("Management preferred hotels").AutoFocus(true));
editing.DisplayDeleteConfirmation("Are you sure ?");
})
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(false)
.ButtonCount(10))
.Excel(excel => excel.FileName("HotelExcel.xlsx")
.Filterable(true)
.AllPages(true)
.ProxyURL(Url.Action("ExcelExport", "TravelPreference")))
.Pdf(pdf => pdf.AllPages()
.AvoidLinks()
.PaperSize("A4")
.Scale(0.8)
.Margin("2cm", "1cm", "1cm", "1cm")
.Landscape()
.RepeatHeaders()
.TemplateId("pdf-template")
.FileName("HotelPdf.pdf")
.ProxyURL(Url.Action("PdfExport", "TravelPreference")))
.Scrollable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple)
.Type(GridSelectionType.Cell))
.Navigatable()
.AllowCopy(true)
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.NoRecords(n => n.Template("Il n'y a pas des hôtels préféré pour cette compagnie."))
.HtmlAttributes(new { style = "height:650px;" })
.Events(events => events.Edit("onKendoGridEdit"))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.ServerOperation(true)
.Events(events => events.Error("KendoGridErrorHandler").RequestStart("onRequestStart").RequestEnd("onRequestEnd"))
.Model(model =>
{
model.Id(p => p.TPF_ID);
model.Field(p => p.TPF_ID).Editable(false);
model.Field(p => p.HOTEL).Editable(false);
})
.Create(update => update.Action("Create", "TravelPreference"))
.Read(read => read.Action("Read", "TravelPreference").Data("additionalInfo"))
.Update(update => update.Action("Update", "TravelPreference"))
.Destroy(update => update.Action("Destroy", "TravelPreference"))
))
</div>
My controller
[HttpPost]
public ActionResult ExcelExport(string contentType, string base64, string fileName)
{
var fileContents = Convert.FromBase64String(base64);
return File(fileContents, contentType, fileName);
}
My js
function additionalInfo() {
return {
companyId: CmpId
}
}

When you have selectable on and can click and highlight and select time cells in the scheduler, you can use the arrow keys to move that selection and shift + arrow keys to increase your selected slots.
If you user the right or left arrow keys and move to the last day of the view, then press over again, it will move to the next date range for that view, but will not fire a navigate event, only a change event that I could see.
This is with 1.118 I believe.
Has this been fixed, or is there someway to detect when navigation has occurred with this shortcut?

What is the difference between the following theme files in 2017.2? kendo.mobile.nova.min.css and kendo.nova.mobile.min.css
<link rel="stylesheet" href="../inc/kendoui/styles/kendo.common-nova.min.css"/> <link rel="stylesheet" href="../inc/kendoui/styles/kendo.nova.min.css"/> <link rel="stylesheet" href="../inc/kendoui/styles/kendo.mobile.nova.min.css"/>
I've included the nova desktop theme because I'm making usage of the kendoDropDownList and wanted it styled.
Hello,
We have a grid with filter row mode enabled. The filters are either drop down lists, or autocomplete fields. When the grid is first initialized, the autocompletes are initialized correctly with their list of possible suggestions based on the data present in the grid (server side filtering is not enabled). On the grid we have a button which changes the datasource url of the grid and refreshes the data :
//change the URL of the datasourcegrid.dataSource.options.transport.read.url = Worklist.buildWorklistUrl();grid.dataSource.page(1);grid.dataSource.read();grid.refresh();
When we do this, the grid is updated and the new data set is shown like we want. However, it seems that the autocomplete filter field values are based on the old grid and don't reflect the new data.
I've tried to refresh the autocompletes manually after refreshing the grid to get them to reflect the new values, but no luck:
var inputs = grid.thead.find("tr").eq(1).find(".k-input");$.each(inputs, function(idx, input) { var autocomplete = $(input).data("kendoAutoComplete"); if (autocomplete) { autocomplete.refresh(); }});Are there any suggestions about how to get those autocompletes to update when the grid contents are updated?
Thanks for the help
