Prevent Kendogrid multi-tables (header and data) creation - kendo-ui

Im using Kendogrid and it creates two tables, one for the header and other one for the data.
My current problem is that when users scroll left/right the columns does not conserve the alignament; so, Im thinking that one posible solution is to force my Kendogrid don't create two but one table for all (header and values). Is this possible? There is an alternative?

There is no possibility to prevent KendoGrid creation of two but one table for all (header and values); at least of course that you use a template.

Related

Updating ag-grid with new data after new table load with React

I'm using React and I have a navigation component that updates a Redux table state. Based on the table chosen in the navigation, I need the ag-grid to update accordingly.
I have six tables. Three of them have the same column definitions. I'm currently using onNewColumnsLoaded to refresh the data, but because three of the tables have the same column definitions, nothing's loading. I've tried onColumnEverythingChanged and other column options, but again because the columns are the same nothing is happening.
I've tried rowDataChanged, rowDataUpdated, and componentStateChanged, but those refresh the data if I'm scrolling or filtering, so those are not acceptable options.
I've taken a look at this answer, but it's using plain javascript, and this one has a problem in the css, not in the javascript.
What's the best way to have the grid update programmatically based on Redux state variables?
You can check to use immutableData with directly udpate the rowData:
getRowNodeId
method should be implemented as well.
Check the doc for more detail.

Hide Column, but display its filter, in Kendo Grid

I am looking to create a bunch of filters on a Kendo Grid but these filters are for hidden columns.
I want to display the filter (perhaps moving it outside the grid area with jQuery) but keep the entire column hidden.
Any suggestions?
Use the dataSource.filter method for that implementation.
$('#GridName').data().kendoGrid.dataSource.filter({field:"hiddenColumnName",operator:"gt",value:42});
If for some reason you want to extract these filter descriptors from the Grid you can use the filter method without parameters. An object will be returned which will contain how exactly the Grid is filtered.
Please notice that this approach does not even require to have the columns hidden (you can skip declaring them at all). The whole objects (with all fields) are available by default on the client.

jquery ui binding to sortable recieve event when dealing with nested sortables

I have a need to sort columns and separately I need to be able to sort fields accross columns and would like to hook into the col sort finished so that I can save the new column position and then also hook into the field sort finished event so that I can save the new field position
There is a jsFiddle showing an example here (doesn't seem to work in IE, but thats a different story!). What this shows is that when a column is dragged no alert is shown and when a field is dragged between columns the field AND column alerts are shown.
I'm using 'receive' to avoid multiple calls, one for the source and one for the target.
Any help would be really appreciated. Thanks
You should use different events to hook into, sortupdate does what you want. Because you are nesting sortables it is also important to prevent event bubbling, this is what causes your double alert. Here's an updated fiddle
By the way, when dragging a field to another column the sortupdate handler is called twice because two columns changed.

Why do jqgrid, flexigrid and ingrid all use separate tables for the header and data?

We're using jqgrid on a web application to render the results of searches because of its built in functionality for paging and sorting that executes server side. We were previously using Tablesorter, but that operated client side and so didn't work well for how we were trying to use it.
We had a web designer on the project (whom has since left the organisation) that had created styles for tables and tried to get the same look working on the jqgrid. It sort of worked, but not quite. We have trouble with the header columns being unaligned with the data columns. We've fiddled with the CSS but it just doesn't seem to work. Sometimes we get scroll bars appearing when we don't want them.
Anyway, part of the problem seems to be that jqgrid uses one table for the column headers, and then another for the data itself. These tables are each wrapped in a div tag. We've had a look at some of the alternatives such as Flexigrid and Ingrid but they also use the same approach with separate tables for the headers and data.
It would be great if someone could explain why this approach is used. We were wondering why a standard table tag with a row of th for the headers and td for the data couldn't be used instead?
The reason these plugins use separate tables for headers and data is to allow for fixed header scrolling. As far as I know you cannot have headers and data in the same table, yet fix the headers to the top during scrolling.
Also for your alignment issue, if possible, I believe these plugins all have settings where you can set how wide you want each column, and this will make the data and header columns line up properly.

Telerik RadGrid refreshing a single row instead of using Rebind

I am using a RadGrid to display stock information. The data bound is a combination of 2 views and 2 tables. This is quite an intensive query, and the data behind it changes a lot. Now, when I update a value in a single row, I have to Rebind the data to update my grid (I use UpdateValues on the item, but it has no visible effect). This is taking too long to be user-friendly. Is there a simple way to work around it, so I can just update the row which has the changed data ?
I do not think there is a way to do that because the Telerik Grid is data bound control - hence to modify its source and refresh the data in the grid UI, you will need to bind all rows.
Dick

Resources