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()
Related
I am using vaadin 22 grid. In grid I have one column with image component(Image to be displayed is decided on integer value)
for which we use ComponentRenderer.
For that column cells, I want to add tooltip so that it will display the integer value in the tooltip discription.
For text columns LitRenderer can be used for tooltip, but for column with compoenent we are already using one renderer.
Is there any way to add tooltip for grid column with component?
example:
addComponentColumn(level -> getMaxLevelImage(level)).setKey(MAXLEVEL)
.setHeader("Level").setWidth("65px")
.setComparator((final Level level1,
final Level level2) -> getMaxLevelObject(level1)
.compareTo(getMaxLevelObject(level2)))
.getElement().setAttribute("title", "Filter");
Thanks in Advance
I want to change a specific row visibility inside of a grid named "myGrid" given an index dynamically.
I thought first to get the specific row that I want use:
var row = Grid.GetRow(myGrid.Children[index]);
and then , to change the IsVisible attribute of 'row' like this:
row.IsVisible = false;
Unfortunately the second line of code Isn't legal...
I don't want to bind 'IsVisible' attribute of each row. It seem to me unnecessary work.
Any suggestion to solving this issue will be appreciate!!
I think your best bet is to bind the IsVisible property of each control in the row to a single property in your view model. Then all you have to do is change the value of your view model property to false and the whole row will be hidden.
Cause:
GetRow returns an int value.So you can't set the property like IsVisible
Solution:
You can set the rowHeight as 0 if you want to hide the specific row.
var row = myGrid.RowDefinitions[index];
row.Height = 0;
As others said, you are trying to change the visibility of an index (That is definitely wrong).
You cannot get the row of a Grid and set its visibility. Instead, you should set the visibility of the view inside the row.
But you should note that by doing so you may see an empty space inside the Grid if you have specified a fixed height or even star sizing for that row height.
It is better to set row height to Auto. By doing this, when the view inside that row is invisible, the height of the row decreases to 0.
When the datatype is Date, the kendo grid uses a kendo datepicker with dropdown calendar for the column.
The datepicker's dropdown calendar usually aligns itself flush with the left edge of the input box. If there isn't room for that, it is moved to the left, but not quite enough. This presents a problem when the rightmost column in the grid is a Date, and the grid is occupying 100% of the width available on the screen: the Saturday column in the dropdown calendar gets "cut off". See pic attached.
Is it possible to tell the calendar dropdown (for a particular column) to align itself flush with the right edge of the text input?
I know that bug. Your datepicker animation container is hidden under right scrollbar. If you set body overflow to hidden, you will not have a scrollbars and calendar will fit and touch right border of screen, like in this example: http://dojo.telerik.com/UCOhA
However if you can't turn off the body scrollbars you need to set calendar position manually dirty way like this:
$("#piker").kendoDatePicker({
open: function(e) {
//setTimeout to let kendo make k-animation-container element at first open
setTimeout(function(){
var animationContainer = $("#" + e.sender.element.attr("id") + "_dateview").parent();
var left = e.sender.element.offset().left + e.sender.element.closest('.k-datepicker').width() - animationContainer.width();
animationContainer.css('left', left);
});
},
//turnoff the animation to avoid strange visual effects
animation: {
open: {
duration: 0
}
}
});
Running example: http://dojo.telerik.com/Imiqa/2
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);