Related
I want to have an button in every row which opens an Dialog.
I already could do that but the perfomance was very very poor. So I think it was wrong.
Can anybody make a suggestion? that would be great.
The button should be in Column "EDIT"
const columns = [
{ title: "ID", field: "id" },
{ title: "TIMESTAMP", field: "TIMESTAMP", minWidth: 150 },
{ title: "POS_NR", field: "POS_NR", minWidth: 150 },
{
title: "EDIT",
field: "EDIT",
minWidth: 400,
},
];
I want to print a boolean value from JSON into a table, if I access directly to the status field, an empty value is displayed
here is an example of json file:
{
'name':'client'
'status':true,
'method':'masterCard',
'amount':'1700',
}
jsx file :
const columns = [
{
title: "name",
dataIndex: "name",
key: "name",
width: "20%"
},
{
title: "status",
dataIndex: "status",
key: "status",
width: "20%"
},
{title: "Method Paiment",
dataIndex: "method",
key: "method",
width: "20%",
}]
The solution i found is to do a condition (is true or false ):
const columns = [
{
title: "name",
dataIndex: "name",
key: "name",
width: "20%"
},
{
title: "status",
dataIndex: "status",
key: "status",
width: "20%",
render: statut => {
if (statut == true) {
return (
<Tag color="#1890ff" key={statut}>
Is True
</Tag>
);
}
return (
<Tag color="#d48806" key={statut}>
Is False
</Tag>
);
}
},
{title: "Method Paiment",
dataIndex: "method",
key: "method",
width: "20%",
}]
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.
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");
}
}
});
})()
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);
}