I've got an application that allows a user to select a row in a Kendo Angular 2 grid and click a button that removes that row. After the row is removed, however, the grid selection persists on the index of the row that was just removed. I'd like to clear the grid's selection after the button is clicked and the row is removed. For the life of me, I cannot find a way to do this. Any ideas?
The Kendo Grid control has a property of "selectedKeys" which binds to an array of numbers. You can then clear this array when you want to clear the selection of the grid.
<kendo-grid
[selectedKeys]="mySelection"></kendo-grid>
In your code:
this.mySelection = [];
Related
I'm implementing a functionality where the user can sort the list and re-order the elements, on dragover I want to show the droppable area below the dragover element.
Note: I want to achieve this using native javascript
Without seeing your code I can't suggest an exact implementation but you can use JS to inject a "placeholder" element.
First, you'll need to know the position of all your items, maybe use an array to log the order of your list items.
Next, on dragover append the placeholder element in the place of where the dragged item you are moving is located on the list. For example, if you have a list like:
ITEM 1
ITEM 2
ITEM 3
ITEM 4
When you drag ITEM 4 over ITEM 3 then inject the placeholder after ITEM 2 so it appears between ITEM 2 and 3. When you drop ITEM 3, you can remove the placeholder.
Note, you'll also have to remove the injected placeholder as you move further up/down the list. Otherwise, you'll end up with multiple placeholders.
There are also plugins available for this such as HTML5 Sortable and SortableJS
When I click on a component inside the 5th row, component not hided by 1,2,3 and 4 rows. Only hide the component by rows after 5th one(6,7,8..)
Some flex property affecting in the component style.
Working fine in this state
Data behind the table list
Common problem in that component, already answered that here. I also used calendar in that list and this solution worked for me.
I am using kendo grid which has column Action as Dropdown. Its working fine.
But the behavior is when grid load the dropdown column value display as text and when I click on that text then dropdown get display with populated values.
Is it possible to display column value always in Dropdown instead of Text?
Thanks!
Telerik has a sample on how to do it for a checkbox: http://docs.telerik.com/kendo-ui/web/grid/how-to/Templates/grid-with-checkbox-column
I Guess you could do the same for a drop-down:
Create a template for the column with a drop-down.
Add a javascript which updates the underlying model when the user change the selected item in the drop-down.
I am using Kendo UI Grid for one of my solutions. I have this one task/requirement where I should be able to give a default grouping for the grid, and the user should not be able to remove this grouping from the UI.
There is one way of achieving this as in this jsFiddle example: http://jsfiddle.net/siva_hari/xzLfgsba/4/
If you look at the following example, the grouping is true but the grouping can be changed by clicking on k-group-delete icon or by dragging the grouped column back into the grid.
http://jsfiddle.net/siva_hari/xzLfgsba
group: [{field: "ShipName"}],
groupable: false
But there is one one problem with this solution, you do not have the group header(because the groupable is set to false) and you cannot sort based on the group it self.
Is there a way to show group header and also disable further changes to grouping of the grid?
Thank you.
Disabling the close handle (X button) is simple, just hide it. I can hide it programmatically but using CSS is much more effective.
span.k-icon.k-group-delete{
display:none;
}
Next step is to get rid of the draggable property of the grouping indicator. To do this, we destroy the draggable container. We need to do this after dataBound because the grid properties are re-applied every time dataBound is called.
dataBound:function(e){
setTimeout(function(){
//get the indicator header
var groupIndicatorHeader = $('.k-group-indicator').parent();
if(!groupIndicatorHeader) return;
//check if it is draggable eneabled
var kendoDraggableObj = $(groupIndicatorHeader).data('kendoDraggable');
if(kendoDraggableObj) kendoDraggableObj.destroy();
},0);
}
setTimeout is necessary to make it run after all dataBound and natural kendo code has finished running. Here is the fiddle for this solution.
You will probably notice that this solution is very hacky, and it is. But sometimes you just gotta roll with it to get the customization you need.
I'm trying to make a single row of a data grid editable. so if I have 5 rows of complete data these will remain uneditable. however I will have added an additional empty row and this is the only row I want the user to have access to edit. this is being done using as3 in and advanced data grid.
using the editable property of the data grid I have made the entire grid editable but this will be an unacceptable outcome
Specify editable property of datagrid as true but specify all the colums of datagrid editable property false
On ItemClick event check the rowindex.
If rowindex == 5(where u want ur datagrid to be edited) use editable property of datagrid for all colums to true else false
Hope you got it!!!
Source: https://forums.adobe.com/thread/665669