Kendo UI For Angular2 - Grid Row Select - kendo-ui-angular2

I have a working <kendo-grid> component with 10 visible rows over a data set of 34 rows (approx 4 pages). Sorting and selecting is working as expected.
<kendo-grid [data]="gridView"
[pageSize]="pageSize"
[skip]="skip"
[pageable]="true"
[height]="300"
(pageChange)="pageChange($event)"
[sortable]="{ mode: 'single' }"
[sort]="sort"
[selectable]="true"
(sortChange)="sortChange($event)"
(selectionChange)="selectionChange($event)">
Say I select second row. Then I sort the table and the selection stays on row two but of course it's highlighting a different record. It's always selecting the second row on the grid, which of course, it's what I want.
How do I clear the selected row in my (sortChange) event so at least the user isn't presented with a different selection that they one they already chose. I am open to some kind of data binding attribute for selected row that I could set to null or some property on gridView or even poking around inside #ViewChild .
Any help would be appreciated.
Normal Sort
Ascending Sort
Descending Sort

I had a similar question here: Select grid row item from code
Basically, you also need to select the grid row item from code without user interaction and this is currently not supported in the current beta build of the Kendo UI Angular2 controls.

In my application, I resort to triggering a click event on the row I want to select. :/
I do this in a case where I have 'up' and 'down' buttons to rearrange the grid and want to maintain my selection when I switch items.
var grid = document.getElementById('myGrid');
var rows = grid.getElementsByTagName('tr');
rows[idx].click(); // add one to the desired row index to skip the header row
Here's a (sloppy, minimal) Plunkr of this scenario: http://plnkr.co/edit/09dlqdl0Xchoy0e5zKRq

Related

Tabulator adding new row is not applied custom sort defined

I am using tabulator 4.8.4. I have tabulator defined with customer sort using sorter function in column. Sorting is applied properly during first load. When i add new row custom sorting is not applied.
table.addData([{
orderNO: order.orderId,
},false]);
It will be either inserted in the top or bottom based on the boolean value passed. I have to call below method to apply sort for newly added row
table.setSort(table.getSorters());
Now the problem is when ever new row added table focus is moving to the top. Its very difficult to navigate rows mean while additional row is coming in. Every time row added foucs is moving to the top. I tried to get the current scroll position before adding new row
scrollVertical:function(top){
position = top;
console.log('position'+top);
}
But i did not find the way to set focus to this position after table redrwan. Please suggest and let me know am i doing anything wrong here
The addRow or addData functions are specifically designed not to re-sort the table when a new row is added as this would be a very jarring experience for the user.
If you need to do this then i suggest that you use the addRow function and then call the scrollTo function on the new row to scroll it into view after the sort is finished
table.addRow({orderNO: order.orderId})
.then((row) => {
table.setSort(table.getSorters());
row.scollTo();
});

Reading data of selected row in grid

With button click if I am using PXAdapter I am able to read the main master data but it is not reading of the selected grid. For Example, in the Case screen if I want to get the data of selected row in Activities tab, how can I achieve that. Any suggestions?
With below code you can get the currently selected row from the grid
Base.Activities.Current

How to hide the sorting arrow in GXT3 grid?

Use case: User initiate the search with the a search criteria and returned result displayed in GXT3 grid. Column sorting enabled in gxt3 grid so user could sort data by selecting column header and there is arrow to indicate the sort order in grid. if the user initiate search second time, I could be able to clear the user selected column and set default sorting but still sort arrow displayed in grid. How can I hide the sorting arrow in grid? Thanks for your time.
Clear sorting info:
PagingLoadConfig.getSortInfo().clear();
Example basic grid
UPDATE:
GXT Version : 3.0.6
if (loadConfig.getSortInfo() != null && !loadConfig.getSortInfo().isEmpty()) {
loadConfig.getSortInfo().clear();
view.getDataGridWidget().getGrid().getView().refresh(true);
}
You should call refresh at grid view object after clearing the sort info of your list store. Here is the example code:
listStore.getSortInfo().clear();
grid.getView().refresh(true); // must be true, to include the grid header in refresh operation
Hope this could help you.

jqgrid click select all, but not all of them selected

I use jqgrid with multiple selection. When i clicked select all for a multiple rows data, not all of them automatically checked. What was wrong with this?
If my grid has only one row, select all works.
The root reasons is that the there are duplicated row id in json data. Following example show that there exists the duplicated row id for 2 and 3. One the first of the duplicated row id will be selected when select all.
{"page":"1","total":"1","records":"10","rows":[
{"id":"10","cell":["firstaceha","Evebdfg","5","10","2000-01-30","12:30","notesss"]},{"id":"9","cell":["firstaceh","Evebdfg","7","9","2000-01-30","12:30","notesss"]},
{"id":"2","cell":["firsta","Eve","1","2","2000-01-30","12:30","notesss"]},{"id":"2","cell":["firsta","Eve","9","2","2000-01-30","12:31","notesss"]},
{"id":"3","cell":["firsta","Eveb","6","3","2000-01-30","12:30a","notesss"]},{"id":"2","cell":["firsta","Eve","8","2","2000-01-30","12:30ab","notesss"]},
{"id":"2","cell":["firsta","Eve","2","2","2000-01-30","12:30a","notesss"]},{"id":"3","cell":["firsta","Eveb","10","3","2000-01-30","12:30aa","notesss"]},
{"id":"3","cell":["firsta","Eveb","4","3","2000-01-30","12:30","notesss"]},{"id":"1","cell":["first","Eve","3","1","2000-01-30","12:30","notesss"]}]}

How to populate 2 combobox in DevExpress grid?

I am developing a website in which I am using DevExpress controls. I need to add a row using AddNewRow event of the grid. Everything is working fine i.e the data is being saved in the database. But now I need to have 2 comboboxes in the grid itself. One should be populated automatically when we need to add a new row and the second should be populated on the selectedIndexChanged of the first combobox.
The second combobox shold be populated using the selected value of first combobox.
How can i populate the second combobox.
Thanks in Advance
Take a look at the Cascading Combo Boxes demo. I believe that demonstrates exactly what you needed.
Related example:
How to implement cascaded combo box columns in ASPxGridView without using templates.

Resources