Develop Reference

Kendo UI Grid Item Create Function Not Being Called

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]


Kendo grid generate dynamic html in a column based on column value?

I'm using kendo grid,where i have a requirement to generate dynamic HTML based on value of a column which will be returned by another function.I have the following code
$("#divGenerateLogin_kendogrid").kendoGrid({
dataSource: {
data: data,
pageSize: 10
},
sortable: true,
reorderable: true,
pageable: {
pageSizes: true,
buttonCount: 5
},
filterable: true,
// selectable: true ,
// dataBound: onDataBound,
columns: [
{
field: "StudentName",
title: "Student Name",
type: "string"
},
{
field: "Class",
title: "Class",
type: "string"
},
{
title: "Login",
template: "#: LoginColHtml(IsLoginAvilable==1) #"
}
]
});
function LoginColHtml(isLoginAvilable) {
var html = "";
if (isLoginAvilable == true) {
html = "<button type='button' class='btn-ressetpwd'><i class='fa fa-key'></i> reset password</button>";
} else {
html = "<button type='button' class='btn-generatelogin'><i class='fa fa-user'></i> generate login</button>";
}
// "<div>#: (IsGuardianLoginAvilable==1) #</div>";
return html;
}
Instead of returning actual html in a column its returning as a string. How can i add actual HTML to the column instead of as a string ?
FYI

I have tried with this and it worked
{
title: "Guardian Login",
template: "#= LoginColHtml(IsLoginAvilable==1) #"
}

how to control check box and show on grid kendo ui

I am new on kendo ui. I need your help, please. I need to use checkbox somewhere. My problem is when I edit any record, checkbox which is on popup menu can show status of attribute but grid doesn't show. I want to show attribute of the record show in checkbox on grid.
I try to this sample :http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Templates/grid-with-checkbox-column but It doesn't work for my expected.
Here is my code:
{
field: "isWorking",
title: "Çalışıyor",
editor: '<input type="checkbox" #= isWorking ? \'checked="checked"\' : "" # class="chkbx" />'
},
{
command: [
{
name: "edit",
text: {
edit: "",
update: "Tamam",
cancel: "İptal"
},
className: "grid-command-iconfix"
},
{
name: "destroy",
text: "",
className: "grid-command-iconfix"
}
],
title: " ",
width: "120px"
}
],
editable: {
mode: "popup",
window: {
title: "Kayıt".i18n()
},
confirmation: "Silmek istediğinizden emin misiniz?".i18n(),
confirmDelete: "Yes"
},
edit: function (e) {
console.log(e);
$("#maritalStatus").data("kendoDropDownList");
}
});
}
});
$("personGrid.k-grid-content").on("change","input.chkbx",function(e){
var grid = $("#personGrid").data("kendoGrid"),
dataItem = grid.dataItem($(e.target).closest("tr"));
dataItem.set("isWorking", this.checked);
});
And screenshots of how it works. Please follow the ss.
From here this is solution from linke where is given by me up of issue.
Here code is my first work:
{
field: "isWorking",
title: "Çalışıyor",
template: "<input type='checkbox' id='isWorking'/>"
},
{
command: [
{
name: "edit",
text: {
edit: "",
update: "Tamam",
cancel: "İptal"
},
className: "grid-command-iconfix"
},
{
name: "destroy",
text: "",
className: "grid-command-iconfix"
}
],
title: " ",
width: "120px"
}
],
editable: {
mode: "popup",
window: {
title: "Kayıt".i18n()
},
confirmation: "Silmek istediğinizden emin misiniz?".i18n(),
confirmDelete: "Yes"
},
edit: function (e) {
console.log(e);
$("#maritalStatus").data("kendoDropDownList");
}
});
}
});
And here how is work ss. It's show status on popup edit menu but it doesn't show on grid.
please could you help me?

You're setting the checkbox in the template but not its value. It will have always the initial state. Try this template:
template: "<input type='checkbox' id='isWorking' # if (isWorking) { # checked=\"checked\" # } # />"
Demo

how to open new Web page with that Row details when click that Row's Link button inside the Kendo UI Grid Field in Asp?

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!!!

Change Button text in Kendo Ui Grid Popup Window

I've got a Kendo UI Grid that loads a popup when creating a new or editing an existing record.
I struggling to find a way to change the change the text of the Update button to "Save" when I'm creating a new record (it currently says "Update" - and its not correct).
I was able to change the title of the popup window, but my question is: how do I change the button text?
This is the code:
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
sortable: true,
groupable: true,
height: resizeGrid(),
filterable: true,
toolbar: ["create"],
columns: [
{ field: "OfficeName", title: "Office Name" },
{ field: "SupportNo", title: "Phone No.", width: "100px" },
{ field: "SupportEmail", title: "Email Address", width: "130px" },
{ field: "SupportFax", title: "Fax No.", width: "100px" },
{ field: "SupportFtp", title: "Ftp Url", width: "150px" },
{ command: ["edit", "destroy"], title: "Actions", width: "160px" }],
editable: "popup",
edit: function (e) {
var editWindow = e.container.data("kendoWindow");
if (e.model.isNew()) {
e.container.data("kendoWindow").title('Add New Office');
$(".k-grid-update").text = "Save";
}
else {
e.container.data("kendoWindow").title('Edit Office');
}
}
});

You should define command as:
command: [
{
name: "edit",
text: {
edit: "Edit", // This is the localization for Edit button
update: "Save", // This is the localization for Update button
cancel: "Cancel changes" // This is the localization for Cancel button
}
},
{
name: "destroy",
text: "Delete Office" // This is the localization for Delete button
}
]
In addition, if you also want to change the text Edit in the popup window, you should use:
editable : {
mode : "popup",
window : {
title: "Edit Office", // Localization for Edit in the popup window
}
}

This will update the text in the button of the PopUp Editor:
if (e.model.isNew()) {
$("a.k-grid-update")[0].innerHTML = "<span class='k-icon k-update'></span>Activate";
}
else {
$("a.k-grid-update")[0].innerHTML = "<span class='k-icon k-update'></span>Save";
}

edit: function (e) {
if (e.model.isNew()) {
$(".k-window-title")[0].innerHTML = "Add";
}
}