I have a kendo grid with columns Name and Action (delete/edit). I have for example :
Parent1 - row 1
Girl1 -row 2
Boy1 row 3
Parent2
Girl2
Boy2
parent 3
parent 4
When I click on row 1 row 2 and row 3 should colaps. What is the best approach?
All data are comming from database
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Parents"
},
For colapsable rows should I make a template <table> and add the styles from grid table in order to look the same like the grid rows ?How am I going to display?...After column ID?... Should I add in the grid all the data: partens and children and hide the children row?... and add them in the kendo template ?
Related
I want to drag and drop a button on a kendo grid
and insert the row in a good position
but how to do to insert the new row on end drag.
My sample is here :
https://dojo.telerik.com/#lgoubet/AweYIQaZ
Thanks for your help
Find the row the element was dragged onto
Find the dataItem for the row by grid.dataItem()
Get the dataItem's index through dataSource.indexOf()
Add a new row the the grid's dataSource through dataSource.insert()
Is there any way to move cells programatically in UITableView? For example I have 3 cells located in the following order:
Cell 1
Cell 2
Cell 3
I perform something like this:
UITableView.GetCell(2).MoveToPosition(1);
And I get the following order:
Cell 2
Cell 1
Cell 3
Is it possible?
Yes, you call tableView.reloadData() and then return whatever cell you want in cellForRowAtIndex.
Please see my below jqgrid subgrid image,
Question 1 : By default, my sub grid start with parent grid column "ID" (first column of parent grid), Can we start my sub grid from 3rd column of my parent grid (Contact Name)?
Question 2 : Or, Is there any chance to move sub grid icon (+) column after 2nd column of my parent grid, hence my sub grid will start with 3rd column of my parent grid?
Please suggest, Thanks!
The row with the standard subgrid like on the picture below
consist from three parts which I marked in different colors. The corresponding HTML structure looks like on the next picture
jqGrid creates an empty <div> (see <div class="tablediv" id="list_1"></div> marked in red) and calls subGridRowExpanded callback with the id of the div ("list_1" on the picture above) as the value of the first parameter. One places an empty <table> with some unique id attribute in the div with and creates grid from the <table>. The typical code looks like
subGridRowExpanded: function (subgridId, rowid) {
var $table = $("<table id='" + subgridId + "_t'></table>");
$("#" + subgridId).append($table);
$table.jqGrid({
// ...
});
}
What you can to do is to set some CSS attributes on the <div> to place the table on the place where you need it. For example I have the column "sequence" in the parent grid of the demo used on the pictures. The header of the column of the header have gridId + "_sequence" id. So one can use the following code to set padding-left to skip the first column:
subGridRowExpanded: function (subgridId, rowid) {
var $table = $("<table id='" + subgridId + "_t'></table>");
$("#" + subgridId).append($table)
// set padding-left to the outer width of the first column "sequence"
// of the parent grid
.css("padding-left", $("#" + this.id + "_sequence").outerWidth() + "px");
$table.jqGrid({
// ...
autowidth: true
});
}
The advantage of the usage padding-left: one can use autowidth: true in the subgrid to resize the subgrid to fill the right part of the row of subgrid.
The demo uses the code. The results looks like on the picture below
You can change other attributes of subgrid row inside of subGridRowExpanded to achieve your exact goals.
I am adding columns to kendo ui grid dynamically.
When there are many rows in the grid the rows are having borders and displaying it correctly.
But, when there are very few rows in the grid the last row or doesn't seem to show border.
Can the cell borders on a Kendo grid extend to the bottom of the grid area when there are not enough rows in the grid
#(Html.Kendo().Grid<Model>()
.Name("GirdName")
.Scrollable(scr => scr.Height(100))
...
$(document).ready(function () {
$("#GirdName>.k-grid-content>table").css("height", 100);
})
I have a kendoGrid displaying a data source that has 200 rows and 50 columns. There are vertical and horizontal scrollbars, which is desired.
How can I cause the grid to scroll into view a specific column, row or row&column ?
Two use cases are:
Column name Z selected from a menu, jump to column Z (scroll it into view)
Grid with data source is FOO is scrolled about until Column X is left most column in view. The grid then replaced with a new one whose data source is BAR. If BAR contains a column X then I want to scroll it into view.
Thanks,
Richard
The very first thing that you need is finding the position of the cell. If you know the number of the row and the column you can do:
var col = 30;
var row = 100;
var pos = $("tr:nth(" + (row - 1) + ")", grid.tbody).find("td:nth(" + (col - 1) + ")").position();
Then you have to scroll and you can go directly using:
$(grid.tbody).closest(".k-grid-content").scrollTop(pos.top).scrollLeft(pos.left);
or animate it using:
$(grid.tbody).closest(".k-grid-content").animate({
scrollTop : pos.top,
scrollLeft: pos.left
}, 2000);