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
Related
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();
});
}
Question is specific to MVC grid control. How to restrict grouping of two or more columns in Kendo Grid? User should be able to drag and group any column but not more than one column.
Bind this function to dataBound grid event:
function onDataBound(e) {
var gr = e.sender.dataSource.group();
if(gr.length > 1){
gr.shift();
e.sender.dataSource.fetch();
}
}
Greetings.
I am using Kendo UI grid without pagination. I have set the below code to load the data in the grid view while scrolling
scrollable: { virtual: true },
My problem is, I have selected 100th row in the grid by scrolling . I am refreshing the grid. After refresh, I need to select the 100th row again. Is it possible ?
Regards
Senthil
After refresh select the row you need as shown below
var grid = $("#grid").data("kendoGrid");
grid.select("tr:eq(100)");
For more info check out kendo DOC http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-select
Basically the question is annotate the row that you have selected when it changes to do so and then in dataBound event select that same row.
In order to save the selected row you can do:
change: function (e) {
// Save some information from the selected row
var item = this.dataItem(this.select());
// Here we save uid
var uid = item.uid;
this.selectedRow = uid;
},
dataBound: function (e) {
// If we have any row selected
if (this.selectedRow) {
// Use this.select for selecting it
this.select("tr[data-uid='" + this.selectedRow + "']");
}
}
You can see this here: http://jsfiddle.net/OnaBai/eLk7zkzs/
I have a RadGrid in with all rows in EditForm mode. This Radgrid has virtual scrolling. I need to jump (scroll) to a specific row.
I've tried several options. To put a row in select is not applicable in this case. I now have tried:
RadScriptManager.RegisterStartupScript(Page, typeof(RadGrid), "myScript", "scrollItemToTop('" + e.Item.ClientID + "');", true);
in the ItemDataBound, but the :
function scrollItemToTop(itemID) {
$('.rgVragenPanel').scrollTo(0, $telerik.$($get(itemID)).offset().top);
}
does not seem to work.
Any thoughts on how to best tackle this?
try this Scrolling to the Selected Item
I select the item in the code behind in the databound event.
Set one of the items in the control as selected.
Provide a handler for the client-side GridCreated event.
In the event handler, locate the selected row using the GridTableView object's get_selectedItems() method.
Use the RadGrid object's GridDataDiv property to access the DOM element for the scrollable region of the grid.
Use the DOM element for the row to check if it is visible in the scrollable region. If it is not, set the scrollTop property of the scrollable region to scroll the grid so that the selected row is showing.
The following example demonstrates this technique:
CopyJavaScript
<script type="text/javascript">
function GridCreated(sender, eventArgs) {
//gets the main table scrollArea HTLM element
var scrollArea = document.getElementById(sender.get_element().id + "_GridData");
var row = sender.get_masterTableView().get_selectedItems()[0];
//if the position of the selected row is below the viewable grid area
if (row) {
if ((row.get_element().offsetTop - scrollArea.scrollTop) + row.get_element().offsetHeight + 20 > scrollArea.offsetHeight) {
//scroll down to selected row
scrollArea.scrollTop = scrollArea.scrollTop + ((row.get_element().offsetTop - scrollArea.scrollTop) +
row.get_element().offsetHeight - scrollArea.offsetHeight) + row.get_element().offsetHeight;
}
//if the position of the the selected row is above the viewable grid area
else if ((row.get_element().offsetTop - scrollArea.scrollTop) < 0) {
//scroll the selected row to the top
scrollArea.scrollTop = row.get_element().offsetTop;
}
}
}
Notice : The function does not work on page postbacks. you should triger directly from javascript (i notice that the ongridcreated event of the grid is not fired on the Telerik example).
So a better way is to handle the scrolling with JQuery like this :
1) Create a function for a specific grid
2) At the telerik code replace the sender with var sender = $find("<%= RadGrid1.ClientID%>");
3) $(window).load(function () {
thefunctiontoscrollthegrid();});
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");