I am dynamically hiding a command button on dataBound. When editing I edit that row then switch to another row to edit the hidden button is displayed.
How can I keep this hidden button?
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://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 } }
}
}
}
});
gridCommands =[{
name: "edit",
text: " ",
mode: "inline"},
{
name:"destroy",
text: " "},
{
name: "exportproduct",
text:"Export",
click: ExportProduct}
];
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px", editor: customBoolEditor },
{ command: gridCommands, title: " ", width: "250px" }],
editable: "inline",
dataBound: function (e) {
var columns = e.sender.columns,
dataItems = e.sender.dataSource.view();
for (var i = 0; i < dataItems.length; i++) {
var product = dataItems[i].get("ProductName");
if (product === "Chang") {
var row = e.sender.tbody.find("[data-uid='" + dataItems[i].uid + "']");
var cell = row.children().eq(4);
var btn = cell.children().eq(2);
btn.hide();
}
}
}
});
});
function customBoolEditor(container, options) {
var guid = kendo.guid();
$('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
$('<label class="k-checkbox-label" for="' + guid + '"></label>').appendTo(container);
}
function ExportProduct(container) {
alert(container.name);
}
</script>
3 Answers, 1 is accepted
I assume that this happens if you open a row or if no saving/updating is performed? Otherwise (edit and save the changes) should re-render the grid and call the dataBound event. Could you please confirm that this behavior or provide a bit more information?
Regards,
Boyan Dimitrov
Progress Telerik
Rank 1
In this case the only solution would be to use the https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/edit event as well along with the dataBound event. This will ensure that the code for hiding the buttons will be executed when user switches to edit without to save or cancel the changes from the previous row opened for edit. Speaking of cancel the same logic should be applied in the cancel event handler as well. Same thing happens in case that user clicks on cancel command button - cancel event is triggered, but the dataBound event will not be fired, since no changes are applied to the data items.
Regards,
Boyan Dimitrov
Progress Telerik