I have nested grid in kendo and I'm using the batch editing process in which all changes on the given row, which is which the parent row or the sub row will be saved all at once using the kendo command.
I can make it work for non nested grid. But for nested grid, it will only save the data on the parent row. Was there a workaround for this?
Thank you.
Detail grid is whole new widget inside of parent grid. You have to configure it's dataSource with correct transport methods separatly.
Still, if you want to save all grids on your page you can use this function (works perfectly in my project):
function SaveAll(){
$(".k-widget.k-grid").each(function (index, value) {
var grid = $(this).data("kendoGrid");
grid.dataSource.sync();
});
}
Or with saveChanges() method:
function SaveAll(){
$(".k-widget.k-grid").each(function (index, value) {
var grid = $(this).data("kendoGrid");
grid.saveChanges();
});
}
Related
I have a kendo grid inside kendo grid (using integrated grid). I have implemented drag n drop in both grid using grid sortable provided by kendo. But it is only work with one grid at a time. If I commented one of them, second grid reordering perfectly. I want that user can able to drag n drop both grid. Please help.
I was missing filter option in parent grid.
var grid = mygrid.data("kendoGrid");
grid.table.kendoSortable({
handler: ".handler",
**filter: ">tbody >tr:not(.k-detail-row)",**
hint: function (element) { //customize the hint
var grid = $("#gridProductGroup").data("kendoGrid"),
table = grid.table.clone(), //clone Grid's table
wrapperWidth = grid.wrapper.width(), //get Grid's width
wrapper = $("<div class='k-grid k-widget'></div>").width(wrapperWidth),
hint;
table.find("thead").remove(); //remove Grid's header from the hint
table.find("tbody").empty(); //remove the existing rows from the hint
table.wrap(wrapper); //wrap the table
table.append(element.clone()); //append the dragged element
//table.append(element.next().clone());
hint = table.parent(); //get the wrapper
return hint; //return the hint element
},
Filter differentiate between detail grid and parent grid.
It is working for me
I'm writing a generic error handler for all of the Kendo Grids. I need to get that source Grid to prevent its default behavior in saving data. In the handler, you can access the source's DataSouce by args.sender. How can I access the Kendo Grid from that DataSouce?
The only approach I found was this suggestion, searching through all grids, and the handler looks like below, can you suggest anything better and more efficient?
function genericErrorHandler(args) {
if (args.errors) {
$('.k-grid').each(function () {
var grid = $(this).data('kendoGrid');
if (grid.dataSource == args.sender) {
alert('found!');
}
})
}
}
There is no API to get Grid object from data source, but there is many approach beside that.
You can create generic grid's edit event and storing in global scope variable which grid's ID was triggered that event. I prefer to do this rather than compare mutable data source.
var window.currentGrid = "";
function onGenericGridEdit(e) {
window.currentGrid = e.sender;
}
If in some cases you need to make custom edit function, just call your generic edit function in the end of the code.
function onCustomGridEdit(e) {
// call generic function to store
onGenericGridEdit(e);
}
I am using kendo ui grid to display data. I want to set title for the grid.Is there any way to set it.
Also I want to set some additional/custom property for grid which will help to identify the grid uniquely. Any custom property I can set to grid so I can get its value when required.
So in case if there are more instances on grid this will help.
Please suggest on this.
Iterating through all your tables can be done using:
$.each($(".k-grid"), function (idx, grid) {
// Do whatever you want to do with "grid"
...
});
If you want to add a title, might be something like:
$.each($(".k-grid"), function (idx, grid) {
$(grid).data("kendoGrid").wrapper.prepend('<div class="k-grid-header"><table><thead><tr><th class="k-header">Title</th></tr></thead></table></div>');
});
For setting a click event to the HTML img elements, you can do:
$("tr", ".k-grid").on("click", "img:first", function () {
// Here "this" is the "img" on which you clicked, finding the grid is:
var grid = $(this).closest(".k-grid").data("kendoGrid");
console.log("grid", grid);
// If you want to access the "id"
console.log("id", grid.element.attr("id"));
});
Once you click on the first image of each row what I do in the event handler is finding the closest HTML element with k-grid class (the grid): this is the HTML containing the grid.
If you want to get Kendo UI grid element the you need to use data("kendoGrid").
Simple and elegant.
In this JSFiddle: http://jsfiddle.net/OnaBai/2qpT3/2/, if you click on "Add Titles" button you add a title to each table and if you click on "Add Handlers" and then in an image, you will get an alert with the id of the table that the image belongs to.
EDIT: If you want to iterate on every image that is in the first column, of every KendoUI grid on your document, you should do:
$.each($("td:first > img", ".k-grid table tbody > tr"), function (idx, elem) {
// "elem" is the image
console.log(idx, elem);
// associate event
$(elem).on("click", fnHandler);
});
I prefer to change the title like this:
$("#grid th[data-field=Field]").html("Title");
I am using kendo ui treeview. I am loading the treeview dynamically from the database. But my issue is i am getting the expand error if there are no child's to display. How can i remove the expand arrow.
Regards,
Sri
There is a configuration field of the HierarchicalDataSource schema.model object called hasChildren you can add a boolean property to your model which indicates if the your model has items.
This way when the TreeView creates its elements it will check that property (or call the function - you could for example return if the items.leght is greater than zero) and if the returned value is false it wont create the expand arrow in front of the item.
Check this demo.
for an example, I have declared my function like this in my Kendo Ui TreeView :
var inline = new kendo.data.HierarchicalDataSource({
data: #Html.Raw(dataSource),
schema: {
model: {
children: "Children",
hasChildren: function(e) {
var test = e.Children.length;
return test > 0;
}
}
}
});
And for my, it works perfectly !
I have a kendo grid with first column as Checkboxes. I want to delete multiple rows using those check boxes. I am able to delete only single row at a time.
I tried adding
.Batch(true)
for the data source and below is my function for delete button outside the grid.
function deleteRule() {
var grid = $("#grid").data("kendoGrid");
grid.select().each(function () {
grid.removeRow($(this));
});
}
Any suggestions please ?
Yo mate,
How exactly do you remove that one row? Why you use the select method?
Basically I would suggest you to create a delete button which executes the logic to delete the selected rows - I guess you are using a tempalte column with a checkbox inside. If you add a class to that checkbox you can easily select all the checkboxes inside of the grid. So lets say the name of the class for the checkbox is cool then you can execute the following logic in the delete button click handler:
function whenYourDeleteButtonIsClicked(){
var grid = $("#grid").data("kendoGrid");
$('.cool:selected').each(function(){
grid.removeRow($(this).closest('tr'));
})
}
I hope you got the idea mate.
Good luck.
Here is what i use
works very well
$('#your-grid-id').data("kendoGrid").select().each(function () {
grid.dataSource.remove(grid.dataItem($(this).closest("tr")));
});