I have a grid and I am editing most of the fields inline. However I have
a field, the way I envision to modify this field is to open a popup
window when clicked ( this will be a hyperlink field in the grid). Once
the value is modified in the Popup the change will be saved in the
database and the same change should also reflect in the grid. The grid
should be refreshed once the popup is closed. Can you please suggest me
as to how to accomplish this. Also can you provide me samples as to how
to do this.
Thank you
Kavitha
a field, the way I envision to modify this field is to open a popup
window when clicked ( this will be a hyperlink field in the grid). Once
the value is modified in the Popup the change will be saved in the
database and the same change should also reflect in the grid. The grid
should be refreshed once the popup is closed. Can you please suggest me
as to how to accomplish this. Also can you provide me samples as to how
to do this.
Thank you
Kavitha
4 Answers, 1 is accepted
0
Hi Kavitha,
Thank you for contacting us.
Mixed editing modes are not supported out of the box by Kendo Grid. It is possible to configure the scenario by using custom button, MVVM and kendo Window with editor inputs inside it.
There is a code library project which demonstrates how to bind grid's record to external form for editing. The changes are automatically applied in the Grid thanks to the MVVM approach. You can submit them to the server via DataSource sync method.
Regards,
Alexander Valchev
Telerik
Thank you for contacting us.
Mixed editing modes are not supported out of the box by Kendo Grid. It is possible to configure the scenario by using custom button, MVVM and kendo Window with editor inputs inside it.
There is a code library project which demonstrates how to bind grid's record to external form for editing. The changes are automatically applied in the Grid thanks to the MVVM approach. You can submit them to the server via DataSource sync method.
Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Kavitha
Top achievements
Rank 1
answered on 24 Jul 2013, 03:00 PM
Thank you very much for you reply. I looked at the sample in the Code Library project unfortunately the grid does not display any buttons. I only see a grid and a form below the grid. I am kind of at a loss as to how this problem should be solved. Any help is greatly appreciated.
Thank you
Kavitha
Thank you
Kavitha
0

Kavitha
Top achievements
Rank 1
answered on 24 Jul 2013, 03:40 PM
I looked at the sample in the Code Library project unfortunately the grid does not display any buttons. I only see a grid and a form below the grid. I am kind of at a loss as to how this problem should be solved. Any help is greatly appreciated.
0
Hi Kavitha,
The example is supposed to demonstrate how to bind the selected dataItem to external form for editing via MVVM. In the code library the selection of the item is done via selecting row with the mouse.
In your case, you should simply use a custom command button instead of grid's selection feature.
Regards,
Alexander Valchev
Telerik
The example is supposed to demonstrate how to bind the selected dataItem to external form for editing via MVVM. In the code library the selection of the item is done via selecting row with the mouse.
In your case, you should simply use a custom command button instead of grid's selection feature.
var
grid = $(
"#grid"
).kendoGrid({
dataSource: viewModel.dataSource,
pageable:
true
,
height: 430,
columns: [
"ProductName"
,
{ field:
"UnitPrice"
, title:
"Unit Price"
, format:
"{0:c}"
, width: 110 },
{ field:
"UnitsInStock"
, title:
"Units In Stock"
, width: 110 },
{ field:
"Discontinued"
, width: 110 },
{ command: { text:
"edit me"
, click: change } }
],
dataBound:
function
(e) {
var
row =
this
.tbody.find(
">tr[data-uid="
+ viewModel.selected.uid +
"]"
);
if
(row) {
this
.select(row);
}
}
}).data(
"kendoGrid"
);
function
change(e) {
var
model =
this
.dataItem($(e.target).closest(
"tr"
));
validator.hideMessages();
viewModel.set(
"selected"
, model);
}
Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!