I made a kendo grid with a toolbar to create new records, but when the update button is pressed the create function in the data source I expect to be called isn't being called. I took this code from another page in the code where it works perfectly fine and I scanned both page to make sure I'm not missing any sort of library and on top of that the debugger isn't outputting anthing either.
var RegionalMappingDataSource = new kendo.data.DataSource({
transport: {
read: function(options) {
$.ajax({
url: siteRoot + '/Admin/RegionMapping/GetRegionMappings',
type: 'GET',
success: function(result) {
options.success(result);
},
error: function(result) {
options.error(result);
}
});
},
create: function () { // This is the method I expected to be called
console.log("it hits create");
},
save: function () { // Checked to make sure this method isn't called
console.log("it hits save");
}
}
});
$("#Regionmappinggrid").kendoGrid({
dataSource: RegionalMappingDataSource,
groupable: false,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
editable: "inline",
toolbar: [{ name: "create", text: "Update Other Region Name" }], // where I tried to bind to method
columns: [
{
title: "Country Name",
field: "CountryCode",
editor: function(container, options) {
var input = $('<input required id="mapping" name="' + options.field + '"/>');
input.appendTo(container);
input.kendoDropDownList({
autoBind: true,
optionLabel: 'Please Select Country....',
dataTextField: "Value",
dataValueField: "Key",
dataSource: getCountryName,
value: options.model.Key,
text: options.model.Value
}).appendTo(container);
}
},
{
title: "Region Name",
field: "RegionName",
editor: function(container, options) {
var input = $('<input required id="mapping1" name="' + options.field + '"/>');
input.appendTo(container);
input.kendoDropDownList({
autoBind: false,
optionLabel: 'Please Select Region....',
dataTextField: "Value",
dataValueField: "Key",
dataSource: getRegionName,
value: options.model.Key,
text: options.model.Value
}).appendTo(container);
}
},
{
title: "Region ID",
field: "RegionId",
hidden: true
},
{
title: "Other Name",
field: "Name"
},
{
title: "Updated On",
field: "UpdatedDate",
format: "{0: yyyy-MM-dd HH:mm:ss}",
editable: function() { return false; }
},
{
command: ["edit", "destroy"]
}
]
});
The Create function of the DataSource is called when the user presses the "Update" button that is rendered on the row of the new item. Can you confirm that upon pressing the "Update" button, the function is executed as expected?
As per automatically calling the Create function after the "Add new item" button is clicked, you should set the AutoSync property of the DataSource to "true". This would cause it to update automatically right after every change.
[https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/autosync][AutoSync property]
Related
I am trying to edit a row in jquery kendo grid popup editor. But when I click on update button it does not submit selected dropdown values to the controller while it submits the other properties without any issues. I have tried many examples but nothing works well.
This is my code
var element = $("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: '/controller/GetEmployees',
update: {
url: "/controller/UpdateEmployee",
dataType: "json"
},
},
pageSize: 10,
serverPaging: true,
serverSorting: false,
schema: {
model: {
id: "EmployeeID",
fields: {
EmployeeID: { type: "number", editable: false },
EmployeeName: { type: "string", editable: true },
EmployeeStatus: { defaultValue: { ID: 1, Name: "Active" }, editable: true }
}
}
}
},
height: 500,
sortable: false,
pageable: false,
editable: "popup",
toolbar: ["create"],
columns: [
{
field: "EmployeeName",
title: "Employee Name",
width: "110px"
},
{
field: "EmployeeStatus",
title: "Status",
width: "110px",
editor: activeInactiveDropDownEditor,
template: "#=EmployeeStatus.Name#"
},
{
command: "edit",
width: "80px"
}
]
});
});
}
function activeInactiveDropDownEditor(container, options) {
$('<input required name="' + options.field + '" data-bind="ID"/>')
.appendTo(container)
.kendoDropDownList({
//autoBind: true,
dataTextField: "Name",
dataValueField: "ID",
dataSource: {
type: "json",
transport: {
read: "/controller/GetStatusList"
}
}
});
}
could anyone found the fault here please ?
Finally I found a solution. I just modified update request with a type property and it works well now.
update: {
type: 'post', // just added this and works well
url: "/controller/UpdateEmployee",
dataType: "json"
},
I think your problem is with the binding, I mean, it is not just add a data attribute bind with the field name, sometimes binding models to widgets needs some level of complexity. As I can't reproduce your whole snippet, I would suggest you to use options.model to set the input value, hence the widget can initialize with the right value:
function activeInactiveDropDownEditor(container, options) {
$('<input required name="' + options.field + '" value="' + options.model.ID + '" />')
If that doesn't works, set the value init parameter or anything like that.
I searched Over the Google. I didn't get any source for my requirement.
My output is like
If I click the 1st column linkbutton eFocus011 or other rows linkbutton means it will go to new web bage, but the toolbar Add new record was not working, because I used template for System Name columns field. How to get the correct output?
My code:
var grid= $("#DivGrid").kendoGrid(
{
dataSource: DataSource4,
scrollable: true,
sortable: true,
filterable: false,
reorderable: true,
resizable: true,
pageable: true,
toolbar: [ { text : "Add new record",name: "popup",iconClass: "k-icon k-add"} ],
editable : {
mode : "inline"
// template: kendo.template($("#customPopUpTemplate").html())
},
navigable: true,
columns:
[
{
field: "SystemName",
title: "System Name",
width:"130px",
// template: '<a href >#: SystemName # </a>'
template:"<a onclick='NewWindow(this.id)' id=\"#= SystemId #\" href='\\#'>#= SystemName #</a>"
// template:'<a href class="list k-Linkbutton" onclick="NewWindow(this.id)" id="#= SystemId#" >#= SystemName #</a>'
// template: '<a href="\\#" onclick="NewWindow(this.id)" id="#= SystemId#" >#= SystemName #</a>'
},
{
field: "SystemIP",
title: "System IP",
width:"100px"
},
{
field: "SystemType",
title: "Type",
width:"80px",
editor: function (container, options) {
$("<input />")
.attr("data-bind", "value:SystemType")
.appendTo(container)
.kendoDropDownList({
dataSource: [ { text: "--Select--" ,value: "0"},{ text: "PC" ,value: "1"},{ text: "LAPTOP" ,value: "2" }],
dataTextField: "text",
dataValueField: "text"
});
}
},
{
field: "OSKey",
title: "OS Key",
width:"200px"
},
{
command: ["edit","destroy"],
title: " ",
width: "190px"
}
]
}).data("kendoGrid");
$(".k-grid-popup", grid.element).on("click", function ()
{
var popupWithOption =
{
mode: "popup",
template: kendo.template($("#customPopUpTemplate").html()) ,
window: {
title: "Add New Record"
}
};
grid.options.editable = popupWithOption ;
grid.addRow();
$(".k-window-action")
{
//visibility: hidden ;
}
grid.options.editable = "inline";
});
};
</script>
Also I used two types of editing. If I click toolbar, means I used popup Kendo editing edit and Delete means inline editing?
I think error is in
template:"<a onclick='NewWindow(this.id)' id=\"#= SystemId #\" href='\\#'>#= SystemName #</a>"
If I changed this line to:
template:"<a onclick='NewWindow(this.id)' id=\"#= SystemId=0 #\" href='\\#'>#= SystemName #</a>"
It will work only toolbar, columns linkbutton is not working.
Thanks in advance!!!
Your code is looking good to me
Confirm whether SystemId is present in models, if not then Rectify "SystemId" to "SystemIP"
and make a check
template:"<a onclick='NewWindow(this.id)' id=\"#= SystemIP#\" href='\\#'>#= SystemName #</a>"
I searched Over the Google, i didnt get my Requirement, My Screen Like
if i click the System Name Means i want to display the row details in another Web page how to do it?
My COde Like'
var grid= $("#DivGrid").kendoGrid(
{
dataSource: DataSource4,
scrollable: true,
sortable: true,
filterable: false,
reorderable: true,
resizable: true,
pageable: true,
toolbar: [ { text : "Add new record", name: "popup", iconClass: "k-icon k-add"} ],
editable : {
mode : "inline"
// template: kendo.template($("#customPopUpTemplate").html())
},
navigable: true,
columns:
[ {
field: "SystemName",
title: "System Name",
width:"130px",
// template: '<a href="\\#" id="Link1" onclick="NewWindow()" class="k-Linkbutton" >#= SystemName #</a>'
template:'<a href class="list k-Linkbutton" id="#= SystemId#" >#= SystemName #</a>'
// headerTemplate: ' <asp:linkbutton id="LinkButton2" Text="System Name">System Name</asp:linkbutton>'
},
{
field: "SystemIP",
title: "System IP",
width:"100px"
},
{
field: "SystemType",
title: "Type",
width:"80px",
editor: function (container, options) {
$("<input />")
.attr("data-bind", "value:SystemType")
.appendTo(container)
.kendoDropDownList({
dataSource: [ { text: "--Select--" ,value: "0"},{ text: "PC" ,value: "1"},{ text: "LAPTOP" ,value: "2" }],
dataTextField: "text",
dataValueField: "text"
});
}
},
{
field: "OSKey",
title: "OS Key",
width:"200px"
},
{
command: ["edit","destroy"],
title: " ",
width: "190px"
}
]
}).data("kendoGrid");
I want to display the Row details in another wen page i don't have any idea ? i searched Google But i didn't Get,
help me how to do ?
thanks in advance!!!
here i have developed a web application in mvc4 razor using some kendo ui widgets.in my appication there is a kendo grid which has used to view, update and insert records.
when i press the "add new record" button in grid, inserting a new record will available and with the press of "enter key" i can go to next cell(next column) of the current row.
it will help to insert data in each cell and go to next cell just pressing enter key without clicking each column(with the low number of mouse clicks).
but my next challenge is i need to go to next row(a new record) when i press the enter key at the last cell(last column) of the current row.
here is the code of grid and script i'm using.
<button class="k-button" id="batchGrid">
Batch Edit</button>
<div id="example" class="k-content">
<div id="batchgrid">
</div>
</div>
<script>
$("#batchGrid").click(function () {
var crudServiceBaseUrl = "http://demos.kendoui.com/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true} },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
UnitsInStock: { type: "number", validation: { min: 0, required: true} }
}
}
}
});
$("#batchgrid").kendoGrid({
dataSource: dataSource,
dataBound: onDataBound,
navigatable: true,
filterable: true,
pageable: true,
height: 430,
width: 300,
toolbar: ["create", "save", "cancel"],
columns: [
{ field: "ProductID", title: "No", width: "90px" },
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" },
{ command: ["destroy"], title: " ", width: "175px" }
// { field: "", title: "No", template: "#= ++record #", width: "30px" },
],
editable: { mode: "incell", createAt: "bottom" }
});
});
</script>
<script type="text/javascript">
function onDataBound(e) {
$("#batchgrid").on("focus", "td", function (e) {
var rowIndex = $(this).parent().index();
var cellIndex = $(this).index();
$("input").on("keydown", function (event) {
if (event.keyCode == 13) {
$("#batchgrid")
.data("kendoGrid")
.editCell($(".k-grid-content")
.find("table").find("tbody")
.find("tr:eq(" + rowIndex + ")")
.find("td:eq(" + cellIndex + ")")
.next()
.focusin($("#batchgrid")
.data("kendoGrid")
.closeCell($(".k-grid-content")
.find("table")
.find("tbody")
.find("tr:eq(" + rowIndex + ")")
.find("td:eq(" + cellIndex + ")")
.parent())));
return false;
}
});
});
}
</script>
but the problem is when i press the enter key at the last cell of any row it will not give me a new record(new line).
please help me here..
I'm having same issue, I was able to create new row with enter key press, but the problem is on the page, when ever I press enter key, its creating a new row in the grid, which is not desired. I need to filter the event say for example when the grid is in focus. but I'm not being able to do that yet. Here is my code:
$(document.body).keypress(function (e) {
if (e.keyCode == 13) {
var grid = $("#grid").data("kendoGrid");
grid.addRow();
}
});
If you can set the filter, it will work fine. Let me know if you can sort it out. Thanks.
Is there an event equivalent to onEditComplete for Kendo Grid where the event fires only after the content of the cell has been edited?
Documentation mentions "edit" event, but this fires as soon as the cell goes into edit mode (So this is equivalent to onBeginEdit).
The closest event with the desired behavior I found was the "save" event, but this event only fires when the content of the cell has been changed. I want an event that fires as soon as the cell goes out of the edit mode.
The grid's editmode is set to incell.
Use the Save event
(fired when the focus is moved outside of the cell being edited and
before the cell is closed)
http://www.kendoui.com/forums/kendo-ui-web/grid/is-there-an-event-that-first-after-a-user-edits-a-cell-but-before-they-save-in-a-grid-with-batch-edit-and-incell-editing-.aspx.
So due to the comment i've removed my previous answer - using the blur event on the input boxes (or other elements) seems to work :
On the grid.edit event, use jquery to bind to the textbox (or any other inline edit control)'s blur event which is fired when focus is lost. Append this to the grid definition...and obviously replace the alert with your code.
edit: function (e) {
alert('Edit Fired');
$('input.k-input.k-textbox').blur(function () {
alert('blur event called');
});
},
I've tested this by modifying the sample inline edit code here
My full local source of the edit - see only the edit event on the grid def:
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.kendoui.com/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1 } },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
toolbar: ["create"],
// added in hook to here to bind to edit element events.
// blur is fired when an element loses focus
edit: function (e) {
alert('Edit Fired');
$('input.k-input.k-textbox').blur(function (e) {
alert('blur event called');
});
},
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "100px" },
{ field: "Discontinued", width: "100px" },
{ command: ["edit", "destroy"], title: " ", width: "172px" }],
editable: "inline"
});
});
</script>
</div>
Why are you not using the "blur" event?
http://www.kendoui.com/forums/ui/window/possible-to-close-window-when-it-loses-focus-.aspx
$("#window").blur(function(){
if ($(document.activeElement).closest(".k-window").length == 0) {
$("#window").data("kendoWindow").close();
}
});
http://api.jquery.com/blur/
Have you tried the Change Event
"change
Fired when the user selects a table row or cell in the grid."
Example - get the selected data item(s) when using cell selection
<div id="grid"></div>
<script>
function grid_change(e) {
var selectedCells = this.select();
var selectedDataItems = [];
for (var i = 0; i < selectedCells.length; i++) {
var dataItem = this.dataItem(selectedCells[i].parentNode);
if ($.inArray(dataItem, selectedDataItems) < 0) {
selectedDataItems.push(dataItem);
}
}
// selectedDataItems contains all selected data items
}
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
selectable: "multiple, cell"
});
var grid = $("#grid").data("kendoGrid");
grid.bind("change", grid_change);
</script>