Hi, I have a grid with column templates where each column hold two or more values.I'm trying to achieve 'in cell' edit for such templates.
I would like to request if post any sample here to achieve in cell editing for a column template.I'm attaching a snapshot of how my grid looks like. Thanks
7 Answers, 1 is accepted
Rank 1
Rank 1
Rank 1
I can assume that there was an issue with attaching the Grid code if possible please try again as there was probably an issue with the server or the internet connection.
As for editing the Grid with the template, please have in mind that the column template is only a presentation layer. When the Grid is in edit mode it will render one editor based on the field bound to the edited column.
Please provide more details for the desired result and we will try to provide a suggestion best suited for it.
Regards,
Stefan
Progress Telerik
Rank 1
Hi Stefan,
Thanks for your response.My code looks something like below.I want to apply in cell editing to the columns QUANTITY and SALES which use a column template and each cell holds two values. I want to achieve two things
a.I would like to apply in cell edit to both the values contained in each cell.
b.Also would like to know the events that i can use inside a text box so that the change in value of one text box can impact the value of another text box .For example: when i change a value in the QUANTITY column, it should effect the value in SALES column as well.
$("#quantity").kendoGrid({
dataSource: {
transport: {
update: {
url: "/api/Quantity",
type: "POST",
dataType: "json"
},
create: {
url: "/api/Quantity",
type: "PUT",
dataType: "json"
}
},
parameterMap: function(options, operation) {
},
schema: {
model: {
fields: {
SALES: { type: "Number", defaultValue: 0, editable: true, nullable: false, validation: { required: true, min: -99999999999999.99, max: 99999999999999.99 } },
QUANTITY_PREVIOUS: { type: "Number", defaultValue: 0, editable: false, nullable: false, validation: { required: true, min: -99999999999999.99, max: 99999999999999.99 } },
SALES_PREVIOUS: { type: "Number", defaultValue: 0, editable: false, nullable: false, validation: { required: true, min: -99999999999999.99, max: 99999999999999.99 } },
QUANTITY: { type: "Number", defaultValue: 0, editable: false, nullable: false, validation: { required: true, min: -99999999999999.99, max: 99999999999999.99 } },
}
},
},
toolbarTitle: "Total Sales",
toolbar:["save","cancel"],
groupable: false,
sortable: true,
height: 500,
editable: true,
autoSync:true,
columns: [
{ field: "", title: "", lockable: true, width: 30,
template: "<div>Current:</div><div>Previous:</div>", format: null, attributes: { class: " text" } },
{ field: "QUANTITY", title: "Actual Qty", lockable: true,editable:true, width: 40,
template: "<div><input type='text' id='Test' name='Act_Qty' value='#=(QUANTITY_PREVIOUS+QUANTITY)#'/></div>
<div><input type='text' name='Prev_Qty' value='#=(QUANTITY_PREVIOUS)#'/></div>", format: null, attributes: { class: " text-right "}},
{ field: "SALES", title: "Actual Sales", lockable: true,editable:true, width: 40,
template: "<div><input type='text' id='Test' name='Act_sales' value='#=(SALES_PREVIOUS+SALES)#'/></div>
<div><input type='text' name='Prev_Sales' value='#=(SALES_PREVIOUS)#'/></div>", format: null, attributes: { class: " text-right"
}},
],
});
Thank you for the provided code.
Regarding the questions:
1) One column will make only one editor for the field, if there are two fields shown in the template, only the main one could be edited, using the built-in editing of the Grid. A custom editor can be added, and the binding has to be done manually:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.editor
2) I can suggest using the built-in Edit event of the Grid, then use the e.contaier, to find the input inside the container and attach an event listener to it:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit
Regards,
Stefan
Progress Telerik
Rank 1