I would like to have almost the same behavior as the demo on "popup data editing" except this is going into a responsive (with bootstrap) environment where we don't have any room for columns to contain the edit/delete buttons.
http://demos.telerik.com/kendo-ui/grid/editing-popup
What I would like to change is to have the grid be selectable (row) and the edit/delete buttons, which will be above the grid, will enable/disable based on the count of rows selected (edit enabled when 1 row selected; delete enabled with 1..n rows selected). The add new record button will also need to be outside the grid (unsure whether it will be above or below the grid).
My question is: can I hook into the same functionality that is available in this example while having row selection enabled and the buttons outside the grid?
jsFiddle/jsBin would be great if you can generate one.
Thanks,
--Ed
http://demos.telerik.com/kendo-ui/grid/editing-popup
What I would like to change is to have the grid be selectable (row) and the edit/delete buttons, which will be above the grid, will enable/disable based on the count of rows selected (edit enabled when 1 row selected; delete enabled with 1..n rows selected). The add new record button will also need to be outside the grid (unsure whether it will be above or below the grid).
My question is: can I hook into the same functionality that is available in this example while having row selection enabled and the buttons outside the grid?
jsFiddle/jsBin would be great if you can generate one.
Thanks,
--Ed
5 Answers, 1 is accepted
0
Hello Ed,
The scenario which you described is supported. Basically all you need to do is to build the additional buttons, hook up to their click event handler and use the grid's API to manipulate the widget behaviour (state).
For your convenience I prepared a small example which demonstrates how you can open the currently selected row for editing with external button.
In order to enable/disable the buttons according to the amount of currently selected rows you may hook up to the change event handler of the Grid and use the select method to check how many rows are selected.
I hope this information will help.
Regards,
Alexander Valchev
Telerik
The scenario which you described is supported. Basically all you need to do is to build the additional buttons, hook up to their click event handler and use the grid's API to manipulate the widget behaviour (state).
- http://docs.telerik.com/kendo-ui/api/web/grid#methods (check the editRow, removeRow, addRow, select methods)
For your convenience I prepared a small example which demonstrates how you can open the currently selected row for editing with external button.
In order to enable/disable the buttons according to the amount of currently selected rows you may hook up to the change event handler of the Grid and use the select method to check how many rows are selected.
I hope this information will help.
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

Ed
Top achievements
Rank 1
answered on 25 Jul 2014, 12:39 AM
Thanks Alexander.
Can you update the Dojo link again? It fails to load the snippet.
--Ed
Can you update the Dojo link again? It fails to load the snippet.
--Ed
0

Ed
Top achievements
Rank 1
answered on 25 Jul 2014, 01:24 AM
Also, with the editRow, removeRow, addRow methods, do I need to include some special templates? Nothing is happening at the moment for me when I click edit.
Thanks,
--Ed
Thanks,
--Ed
0

Ed
Top achievements
Rank 1
answered on 25 Jul 2014, 06:20 PM
Nevermind. Within the corp env it is blocked. From home, I can see the code.
from within Chrome > Console, it is the Revision API endpoint and I get the net::ERR_CONNECTION_RESET and the top of the stack is getRequest.
from within Chrome > Console, it is the Revision API endpoint and I get the net::ERR_CONNECTION_RESET and the top of the stack is getRequest.
0
Accepted
Hi Ed,
I did not understood - did you opened the example or not? For convenience I am pasting the full source code here:
Currently the "Edit" buttons puts in edit mode the selected row. If no row is selected the button will do nothing. Please pay attention to the highlighted code.
Regards,
Alexander Valchev
Telerik
I did not understood - did you opened the example or not? For convenience I am pasting the full source code here:
<!DOCTYPE html>
<
html
>
<
head
>
<
base
href
=
"http://demos.telerik.com/kendo-ui/grid/editing-popup"
>
<
style
>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</
style
>
<
title
></
title
>
<
link
href
=
"http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css"
rel
=
"stylesheet"
/>
<
script
src
=
"http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"
></
script
>
<
script
src
=
"http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"
></
script
>
<
script
src
=
"http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"
></
script
>
</
head
>
<
body
>
<
div
id
=
"example"
>
<
button
id
=
"edit"
>Edit</
button
>
<
div
id
=
"grid"
></
div
>
<
script
>
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
selectable: "row",
columns: [
{ field:"ProductName", title: "Product Name" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px" }],
editable: "popup"
});
$("#edit").on("click", function() {
var grid = $("#grid").data("kendoGrid"),
selected = grid.select();
if (selected.length) {
grid.editRow(selected);
}
});
});
</
script
>
</
div
>
</
body
>
</
html
>
Currently the "Edit" buttons puts in edit mode the selected row. If no row is selected the button will do nothing. Please pay attention to the highlighted code.
Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!