I'm having some issues trying to call the update from my DataSource when the text inside a binded textarea is changed and the Save button is clicked which has the class of "k-update-button".
I'm not sure what I'm doing wrong here.
Here is my observable model:
var sectionViewModel = kendo.observable({ sectionId: $("#Id").val(), sectionDataSource: new kendo.data.DataSource({ transport: { read: { url: "/policy/policy/GetSectionsByPolicyId", dataType: "json", type: "GET", data: { Id: $("#Id").val() },update: { url: "/policy/policy/SectionEdit", type: "POST", dataType: "json", data: function (data) { return kendo.getAntiForgeryTokens(); } } }, schema: { model: { id: "Id", fields: { Id: { type: "number", editable: false, nullable: true }, PolicyId: { type: "number", editable: false }, Title: { type: "string" }, Body: { type: "string" }, DisplayOrder: { type: "number", editable: false }, Finalized: { type: "boolean", editable: false }, Active: { type: "boolean", editable: false }, CreateDate: { type: "date", editable: false }, CreateByDisplay: { type: "string", editable: false }, LastModDate: { type: "date", editable: false }, LastModByDisplay: { type: "string", editable: false } } }, errors: "errorMsg" }, error: function (e) { toastr.options = { "positionClass": "toast-bottom-full-width" }; toastr.error("There was an error: " + e.errors, "Uh, Oh!"); this.cancelChanges(); } }) }); kendo.bind($("#policySectionListView"), sectionViewModel);
And here is the kendo editor template that I am currently using:
<div id="policySectionListView" data-role="listview" data-template="policySectionTemplate" data-edit-template="policySectionEditTemplate" data-bind="source: sectionDataSource"></div><script type="text/x-kendo-tmpl" id="policySectionEditTemplate"> <div class="panel panel-default policy-section-panel" data-id="#:Id#"> <div class="panel-heading"> <div class="btn-group pull-right" style="margin-top: -10px;" role="group" aria-label="..."> <button id="testbutton" type="button" class="btn btn-link btn-link-alt k-update-button" data-toggle="tooltip" title="Save Changes"> <span class="fa fa-floppy-o"></span> Save </button> <button type="button" class="btn btn-link btn-link-alt k-cancel-button" data-toggle="tooltip" title="Cancel"> <span class="fa fa-close"></span> Cancel </button> </div> <h3 class="panel-title"> #: Title # </h3> </div> <div class="panel-body"> <div class="policy-section-content"> <input type="text" class="k-textbox" style="width: 100%" data-bind="value:Title" /> <textarea class="k-textbox" name="Body" data-role="editor" data-bind="value:Body" style="height: 400px;"></textarea> </div> </div> <div class="panel-footer"> <div style="display: inline-block;"> Last Modified by #: LastModByDisplay # on #= kendo.toString(LastModDate, "G") # </div> </div> </div> </script>
From what I have seen online, when the button with a class of 'k-update-button' is clicked then the update should be called automatically if any of the binded elements have been changed. However, that doesn't seem to be working here or I am doing something wrong.
I have the following set up:
var documentListDataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
debugger;
var fnum = editData != null ? editData.Number : '';
var vrid = editData != null ? editData.FormVersionId : 0;
$.ajax({
url: '@Url.Action("GetFormDocumentList", "Form")',
dataType: "json",
async: false,
type: "POST",
data: { formNumber: fnum, formVersionId: vrid },
success: function (data) {
options.success(data);
}
});
}
}
});
function initDocumentGrid() {
$("#DocumentGrid").kendoGrid({
dataSource: documentListDataSource,
navigatable: true,
selectable: "row",
columns: [{
field: "Format",
title: "Format",
width: 150
}, {
field: "Name",
title: "File Name",
width: 150
}, {
title: "Actions",
template: function (dataItem) {
return BuildDocumentActionButtons(dataItem);
}
}]
});
}
function BuildDocumentActionButtons(dataItem) {
var retval = '';
if (dataItem.Extension == "xpd") {
// interactive mapping button
//retval += "<button class='k-button k-button-icontext' onclick='OpenMappingWindow();'>Conversion Map</button>"
}
if (retval.length > 0) retval += ' ';
// upload document button - always rendered
retval += "<button class='k-button k-button-icontext' onclick='OpenUploadWindow(" + datItem.Extension + ");'>Upload</button>"
//if (dataItem.Name != "") {
// retval += ' ';
// // toggle availability button
// retval += "<button class='k-button k-button-icontext' onclick='ToggleAvailability(" + datItem.Name + ");'>Availability</button>"
// retval += ' ';
// // remove document button
// retval += "<button class='k-button k-button-icontext' onclick='RemoveDocument(" + datItem.Name + ");'>Remove</button>"
//}
return retval;
}
When retval returns button definitions, the following call fails with no error:
$("#DocumentGrid").data("kendoGrid").dataSource.read();
I am doing something wrong, but am missing it.
Any assistance would be most appreciated.
I have a requirement that I need to be able to "paste" a value (via key event) into a grid cell that contains a dropdown list. Then I need to do a lookup for that value in the display text of the list (the "search" function I believe) and set the dropdown list accordingly.
I have trapped the keydown event for ctrl-v and have found the currentCell. I am trying to do something like this:
var dropDownList = currentCell$.find("input").data("kendoDropDownList");
dropdownList.search("K2");
However, this does not seem to work. It seems like the search function only works if the dropdown list is actually open rather than just the cell being selected. Not sure what I am missing. Also tried adding grid.editCell(currentCell) before it without much luck.
Can you tell me where I am going wrong?
Hi! I need to be able to create graphs in multiple panes. But when I define an area chart in a second pane the colors stay above the line. I need it to stay under so that it makes more sense.
I'll leave an atachment with an example
Any help?

Hello,
I would like to select a row by his model ID :
model : { id: "ID" }.
I also need the grid to focus the selected row's page (the page size is 20).
The case is :
I have 2 grids, when I click in a row of the second grid, the selected row of the second grid should be selected and focused on the first grid (they got the same id).
Is it possible?
Thank you.

I have made this very simple example which refuses to work: http://dojo.telerik.com/OtIhA
I keep getting "Uncaught TypeError: Cannot read property 'toLowerCase' of undefined".
Curiously, changing 'kendoDiagram' to 'kendoGrid' works perfectly. So why does this data source work with Grid but not Diagram, and how can I get it to work?
Hello,
I am trying to find a way to make Datapoint drag and dropable with the Scatter Chart.
http://docs.telerik.com/kendo-ui/controls/charts/chart-types/scatter-charts
I would like to have the following scenario:
Scatter Chart is rendered. A User chooses a data point and drags it somewhere on the chart. The user drops the data point and this datapoint is then saved to the underlying data source (in this case a SharePoint list).
Is this possible to achieve? I think there is not standard functionality included but I would like to know if there is a proper approach to develop this myself.
Basically, setting
<p>Filterable(ftb => ftb.Mode(GridFilterMode.Row)</p><p></p>at the grid makes
<p>columns.Bound(x => x.ID).Filterable(x => x.UI("numericFilter"));</p><p></p>not work.
<p>Filterable(ftb => ftb.Mode(GridFilterMode.Menu)</p><p></p>does work but is not the intended functionality.
