We Keep Coding

Telerik Kendo grid get row details from template

I am using kendo grid with MVC in a .NET project. Two columns of my grid are templates and those have an input text inside of the template. That way every time the grid loads the input texts are always visible and available for change.
When the user clicks on save, I need to check all the rows of the grid, at client side and get the values of those two columns (the only two have templates) and get the values of the input box. So the result I am expecting is a list with two columns that have the last values inserted by the user in the input boxes and not the original value.
Here is my code:
//Grid Data source
var dataSource = new kendo.data.DataSource({
transport: {
read: { url: "/CsmForecastRegistration/GetForecast", cache: false }
},
error: function (e) {
openDialog(e.errorThrown);
},
batch: true,
pageSize: 20,
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "ForecastItemId",
fields: {
ForecastItemId: { editable: false },
RecordId: { editable: false },
SaleId: { editable: false },
IsUpSell: { editable: false },
BusinessName: { editable: false },
HealthScore: { editable: false },
CurrencySymbol: { editable: false },
ForecastWeekTotalContractValue: { editable: true },
ForecastWeekMonths: { editable: true },
ForecastWeek12Months: { editable: false }
}
}
}
});
$("#grdCsmForecast").kendoGrid({
dataSource: dataSource,
scrollable: true,
dataBound: onDataBound,
toolbar: ["excel"],
excel: {
allPages: true,
fileName: "CSMForecast.xlsx"
},
pageable: true,
columns: [
{ title: "", width: "80px", template: $("#comments-template").html(), attributes: { style: "text-align:center; background-color: white;" } },
{
title: "Contract Details",
columns: [
{ field: "RecordId", title: "RecordId", width: "90px", attributes: { "class": "contractDetailGridStyle" } },
{ field: "SaleId", title: "SaleId", width: "90px", attributes: { "class": "contractDetailGridStyle" } },
{ field: "IsUpSell", title: "Upsell?", width: "75px", attributes: { "class": "contractDetailGridStyle" } },
{ field: "BusinessName", title: "Business Name", width: "250px", attributes: { "class": "contractDetailGridStyle"} },
{ field: "HealthScore", title: "Health Score", width: "95px", attributes: { "class": "contractDetailGridStyle"} },
{ field: "CurrencySymbol", title: "CCY", width: "50px", attributes: { "class": "contractDetailGridStyle" } }
]
},
{
title: "Forecast Week",
columns: [
{ field: "ForecastWeekTotalContractValue", title: "TCV", width: "75px", template: $("#forecast-week-tcv").html(), attributes: { "class": "forecastWeekGridStyle" }, footerTemplate: "#: sum # " },
{ field: "ForecastWeekMonths", title: "Months", width: "70px", template: $("#forecast-weekMonths").html(), attributes: { "class": "forecastWeekGridStyle" } },
{ field: "ForecastWeek12Months", title: "12Month", width: "75px", attributes: { "class": "forecastWeekGridStyle" }, footerTemplate: "#: sum # " }
]
}
]
});
And the templates:
<script id="forecast-week-tcv" type="text/x-kendo-template">
# if(IsNewContract === true ){ #
<span>#=ForecastWeekTotalContractValue#</span>
#}
else{#
<input type="text" value="#=ForecastWeekTotalContractValue#" />
#}#
</script>
<script id="forecast-weekMonths" type="text/x-kendo-template">
# if(IsNewContract === true ){ #
<span>#=ForecastWeekMonths#</span>
#}
else{#
<input type="text" value="#=ForecastWeekMonths#" />
#}#
</script>
So I would like to have a list and send to my MVC the controller all the values of these two inputs:
<input type="text" value="#=ForecastWeekTotalContractValue#" />
<input type="text" value="#=ForecastWeekMonths#" />
Thanks

Try something like this:
function getInputValues() {
let result = [];
$('#grid tbody tr').each((i, tr) => {
let row = {};
$(tr).find('input[type="text"]').each((index, input) => {
row[(index ? "ForecastWeekTotalContractValue" : "ForecastWeekMonths")] = $(input).val();
});
result.push(row);
});
return result;
}
Demo
It just iterates over the elements and adds to an array of objects.

Kendo grid: How to create perform some taks on Add new row and not on Edit

In my KendoGrid I want to add default value for input field in my popup form.
I have created a function that I intend to call on clicking Create button, but the following function does not work. I searched a lot but could not find any help, so it would nice if someone can give me a hint where the problem is.
function add_m(e) {
debugger;
$("#DeviceIP").val("123");
}
$("#turbingrid").kendoGrid({
// debugger;
dataSource: dataSource,
scrollable: false,
//toolbar: ["create"],
toolbar: [
{name: "create",text: "add new turbine"}
],
columns: [
{ field: 'DeviceIP', title: 'DeviceIP', width: '100px', id: 'DeviceIP' },
{ field: 'Producer', title: 'Producer', width: '80px', id:'Producer'},//editor: ProductNameDropDownEditor,
{ field: 'Model', title: 'Model', width: '220px',id:'Model' },
{ field: 'DeviceType', title: 'DeviceType', width: '100px', editor: deviceTypesList },
{ field: 'Description', title: 'Description', width: '220px' },
{ field: 'Username', title: 'Username', width: '120px' },
{ field: 'Password', title: 'Password', width: '100px' },
{ field: 'PublicIP', title: 'PublicIP', width: '120px' },
{ field: 'TurbineId', title: 'TurbineId', width: '120px', hidden: true },
{ field: 'device_id', title: 'device_id', width: '120px', hidden: true },
{ field: 'ModelProducer', title: 'Producer/Model', hidden: true, editor: modelProducer },
{command: ["edit"], title: " "}
],
//{
// command: [
// {
// name: "Edit",
// click: function (e) {
// temp = $(e.target).closest("tr"); //get the row
// }
// }
// ]
//}
editable: "popup",
create:add_m,

to assign val or attribute dynamically use
edit:
edit: function(e) {
if (e.model.isNew()) {
e.container.find("input[name=test]").val(5555); // name changed, but worked for me
// e.container.find("input[name=device_id]").val(123);
}
}
or
beforeEdit:
beforeEdit: function(e) {
if (e.model.isNew()) {
$("#DeviceIP").val("123");
}
}

You can use the beforeEdit event, not create. It fires when the create button is clicked in the toolbar.

Here is the working DEMO.
Below is the code snippet that pastes the default value for DeviceIP on Add row event.
$("#turbingrid").kendoGrid({
....
.........
//ON CLICK ADD/EDIT BUTTON FOR PRODUCT ITEM
edit: function(e) {
// CHANGE ADD/EDIT PRODUCTITEM POPUP FORM TITLE
if (e.model.isNew()) //ON ADD NEW
{
$(".k-window-title").text("Add New Turbine");
// HERE e.container IS THE ADD/EDIT POPUP FORM ELEMENT
e.container
.find("[name=DeviceIP]") // get the span element for the field
.val("123") // set the value
.change(); // trigger change in order to notify the model binding
}
else // ON EDIT
{
$(".k-window-title").text("Edit Turbine");
}
}
........
....
});
Here is the complete code from the DEMO fiddle.
(function () {
var dataSource = new kendo.data.DataSource({
data: {
id: 1,
DeviceIP: "192.168.1.1",
Producer: 'Producer',
Model: 'Model',
DeviceType: 'DeviceType',
Description: 'Description',
Username: 'Username',
Password: 'Password',
PublicIP: '216.168.123.156',
TurbineId: 1,
device_id: 2,
ModelProducer: 'ModelProducer',
},
schema: {
model: {
id: 'id',
fields: {
DeviceIP: {},
Producer: {},
Model: {},
DeviceType: {},
Description: {},
Username: {},
Password: {},
PublicIP: {},
TurbineId: {},
device_id: {},
ModelProducer: {},
}
}
}
});
$('#grid').kendoGrid({
dataSource: dataSource,
scrollable: false,
//toolbar: ["create"],
toolbar: [
{name: "create",text: "add new turbine"}
],
columns: [
{ field: 'DeviceIP', title: 'DeviceIP', width: '100px', id: 'DeviceIP' },
{ field: 'Producer', title: 'Producer', width: '80px', id:'Producer'},//editor: ProductNameDropDownEditor,
{ field: 'Model', title: 'Model', width: '220px',id:'Model' },
{ field: 'DeviceType', title: 'DeviceType', width: '100px' },
{ field: 'Description', title: 'Description', width: '220px' },
{ field: 'Username', title: 'Username', width: '120px' },
{ field: 'Password', title: 'Password', width: '100px' },
{ field: 'PublicIP', title: 'PublicIP', width: '120px' },
{ field: 'TurbineId', title: 'TurbineId', width: '120px', hidden: true },
{ field: 'device_id', title: 'device_id', width: '120px', hidden: true },
{ field: 'ModelProducer', title: 'Producer/Model', hidden: true },
{command: ["edit"], title: " "}
],
editable: 'popup',
//ON CLICK ADD/EDIT BUTTON FOR PRODUCT ITEM
edit: function(e) {
// CHANGE ADD/EDIT PRODUCTITEM POPUP FORM TITLE
if (e.model.isNew()) //ON ADD NEW
{
$(".k-window-title").text("Add New Turbine");
// HERE e.container IS THE ADD/EDIT POPUP FORM ELEMENT
e.container
.find("[name=DeviceIP]") // get the span element for the field
.val("123") // set the value
.change(); // trigger change in order to notify the model binding
}
else // ON EDIT
{
$(".k-window-title").text("Edit Turbine");
}
}
});
})()

How to set Kendo editor as cell template?

Requirement 1:
I need the user to the ability to edit content of the grid all the time, meaning as a template, the user should not be required click on the field and then the editor appears.
Requirement 2: I want a kendo editor for the user to enter/edit values.
The following is what I tried, since I don't know how to do this using template I tried out using editor
Grid setup:
dataSource: {
data: $scope.planOverviewModel,
sort: {
field: "TermName",
dir: "asc"
},
schema: {
model: {
fields: {
TermName: { type: "string", editable: false },
InNetwork: { type: "string", editable: true },
OutNetwork: { type: "string", editable: true }
}
}
},
},
columns: [
{ field: "TermName", title: "Term" },
{
field: "InNetwork",
title: "In-Network",
editor: $scope.setupTextBox
},
{
field: "OutNetwork",
title: "Out-Network",
editor: $scope.setupTextBox
}
],
editable: true,
change: function (e) {
console.log("changed");
if (e.action == "itemchange") {
this.sync();
}
}
Editor setup:
$scope.setupTextBox = function(container, options) {
$('<textarea class="form-control" type="text" data-bind="value:' + options.field + '"> </textarea>')
.appendTo(container).kendoEditor({
resizable: {
content: true,
toolbar: true
}
});
};

Kendo UI Grid: how to make cell read only on condition

in Kendo UI Grid (with Angularjs) i have the following grid:
<div kendo-grid k-data-source="Table" k-options="thingsOptions" style="height: 365px">
$scope.thingsOptions = {
sortable: "true",
scrollable: "true",
toolbar: [{ name: "create", text: "Aggiungi Prodotto" }],
columns: [
{ field: "Name", title: "Name", width: "50px" },
{ field: "Description", title: "Description", width: "50px" },
{ field: "Price", title: "Price", width: "50px" },
{ field: "Active", title: "Active", template: '<input type="checkbox" disabled="disabled" #= Active ? checked="checked":"" # class="chkbx" />', width: "20px" },
{ command: [{ name: "edit", text: "Modifica" }], title: "", width: "172px" }
],
editable: "inline"
};
How can i make the "Price" field readonly on some condition? I must test a variable and if it is true i want the Price field readonly otherwise writable.
I have tried to add in the "thingsOptions" function:
edit: function (e) {
if(myvar == true)
e.container.find("input[name=Price]").enable(false);
}
But id doesn't work (undefined reference).

Try to use:
edit: function (e) {
if(myvar == true)
$("input[name=Price]").attr("readonly", true);
} else {
$("input[name=Price]").attr("readonly", false);
}
}

Inside the edit function of the grid just manipulate the condition the way you want to use. For closing the cell you can use this.closeCell();
edit: function (e) {
//Size will be editable only when the Area is not empty
if(e.container.find(“input”).attr(“name”) == ‘Price’) {
//Below statement will close the cell and stops the editing.
if(myvar == true){
this.closeCell();
}
}
}
For more info have a look here

columns: [{
editable: false,
field: "Id",
title: "Id",
width: 50,
editor: idEditor,
}, {
title: "Name",
field: "Name",
width: 100
}, {
command: ["edit", "destroy"],
title: " ",
width: "250px"
}]
function idEditor(container, options) {
container.append(options.model.Id);
}

KendoUI Grid/Datasource. When "create", empty POST request, no parameters

When I add a record in my Grid, "create" url is hit using POST, but checking in the httpd logs, POST parameters are empty.
This is my Grid & Datasource definition:
$(function() {
$("#grid").kendoGrid({
dataSource: {
transport:{
read:"libyMsg.php?way=getUsrMsgList",
create:{
url :"libyMsg.php?way=createMsg",
type:"POST"
},
update:{
url :"libyMsg.php?way=updateeMsg",
type:"POST"
},
destroy:{
url :"libyMsg.php?way=destroyMsg",
type:"POST"
}
},
batch: true,
pageSize: 10,
schema: {
data: "data",
model: {
id: "msg_id",
fields: {
msg_id: { editable: false, nullable: true },
msg_title: { validation: { required: true } },
msg_content: { validation: { required: true } },
msg_type: { type: "number", validation: { min: 0, required: true }},
msg_date: { type: "date", validation: { required: true } },
msg_status: { type: "number", validation: { min: 0, required: true } }
}
}
}
},
columns: [{ field: "msg_id", width: 40,title: "ID" },
{ field: "msg_title",width: 230, title: "Title" },
{ field: "msg_content", width: 370,title: "Content" },
{ field: "msg_type", width: 40,title: "Type" },
{ field: "msg_date", width: 300,title: "Date" },
{ field: "msg_status", width: 40,title: "Status" }],
scrollable: true,
sortable: true,
editable:"popup",
pageable: {
refresh: true,
pageSizes: true
},
toolbar: ["create", "save", "cancel"],
});
});
I wonder why, when i add a new record, it actually POSTs but withouht any parameters.
Any idea?
Thanx/M

Hello the code you pasted is working fine. Here is a JsBin which demonstrates it - I can see in the network tab of my browser that the values as send like this.
models[0][msg_id]:23
models[0][msg_title]:foo
models[0][msg_content]:bar
models[0][msg_type]:2323
models[0][msg_date]:Sun Nov 25 2012 01:05:03 GMT+0200 (FLE Standard Time)
models[0][msg_status]:563
Probably the way you try to access these values on the server is not right. I would suggest you to share your server code.