Kendo UI grid - grouped Header Columns - javascript

This is not related to the grouping function where you can drag things to the header and it groups the grid.
I am trying to present grid columns in categories for organization in a large grid showing complex financial data for my project. I have created a very very simplified mockup of what I am trying to accomplish in google docs at this link
https://docs.google.com/spreadsheets/d/11BZGrV5IE2zvh3Ya38jgCN1lgOqMFXegdwAOmv-bLZg/edit?usp=sharing
The solution would need top play nice with column resizing. We would disable the ability to re-order columns for this display so that shouldn't be an issue.

Regarding a multi-row header w/ colspan
From the official forum:
Multirow headers will be available in the Pivot Grid, which we are currently developing with the idea of releasing it for Q2 2014. We may port the implementation for the standard Grid for subsequent releases, but I am afraid I can't provide official information about the timing and probability at this point.
http://www.telerik.com/forums/multiple-header-rows
http://www.telerik.com/support/whats-new/kendo-ui/road
If anyone cares this is how we overcame the problem using slick grid. We are updating to kendo so we will just carry this forward until we have a grid that has these capabilties. We used a legend and then applied a CSS to each header

Related

Is it possible to have Vertical Row Groupings with Ag Grid?

I'm creating an application that will have an editable table. I've used Ag-Grid before and have found it to be very useful. I've been searching and reading the documentation for a couple of hours now and haven't found any such example of the below image. Is it possible to do something like this in Ag-Grid?
The only thing I've found for grouping hides rows in a tree-like structure. If it's not possible, is there another angular table library that might work?
Did you try? - https://www.ag-grid.com/javascript-grid-row-spanning/
Or another one thing:
groupRowRenderer, groupRowRendererParams -If grouping, allows custom rendering of the group cell. Use this if you are not happy with the default presentation of the group.

Shield UI: Dragging to Create Group

I'm a designer who uses JavaScript / jQuery mainly for prototyping. I'm currently evaluating the Shield UI library for a project, and am mainly interested in exploring the grid capabilities. I've only been exploring the library for the last several hours, but have hit a stumbling block with enabling draggable grouping. I followed the example on the product website (http://demos.shieldui.com/web/grid-grouping/grouping), and it works perfectly ONLY if I define a group in my data source. I can then delete this initial group, and drag any of the column headers to the drop region to create groups. However, if I don't have an initial group defined as part of my data source, the grouping drop region is present, but doesn't create a group when a column is dropped.
I tried adding an ungroup event after initially creating the grid, but that didn't solve the problem. Is it possible to drag-and-drop group creation without defining an initial group?
You can try using the ungroup() method to remove the groups right after the Grid has been rendered and data loaded.

AngularJS tabs, performance (Nodes & Heaps)

I'm developing my first AngularJS App. The App has various features but introducing one in particular I started having performance problems (Nodes and Heap). The section involved is composed of one or more tabs (max six). Each tab contains within it a table, the detail of an element of the table and an additional external filter.
The plugin used for table is ng-table. The number of columns in the table can be up to 20. The columns must be sortable, filterable, displayed or hidden and has to be possible to move to rearrange the display order. To do this I had to do a custom header (attached).
Find below a screenshot of the performance at the opening of six tabs simultaneously. 
Is possible that the problem was made by the old version of ng_table plugin ? Because after upgrade it the performance is improving!
What can I do to improve? Please, help me.

Any Slickgrid version that has the Excel feature of column autosize on double-clicking on column boundaries?

I get that slickgrid is unable to autosize columns like a standard HTML table because it doesn't know all of the possible values in the column before drawing the table (due to it's highly performant load-as-needed implementation).
However, once all of the rows are loaded and displayed on screen, is there any implementation that allows a user to double-click* on the column boundaries and have it resize to fit the already-loaded data? Sure this resize may not be perfect after loading additional rows, but my data (and I'd imagine many others data) is such that loading 50 rows at the outset is a good enough sample size to determine an appropriate width. And even if it's not, the user can always double-click again.
* Here is the description that Microsoft provides on how to do this within Excel: http://office.microsoft.com/en-us/excel-help/change-column-width-and-row-height-HP005198813.aspx#BMmouse. Read the third bullet that discusses double-clicking.

Can javascript sort, filter, and render a very large table?

First of all, I have no idea of Javascript's capability on this. But would like to know if it is possible:
To read from a text file and display a very large table (a couple dozens of columns and a few hundred thousands of rows), in sections;
Not all columns will displayed in the same time. columns are in groups. a group of columns needs to toggle between hidden or show;
rows can be filtered based on certain columns.
The reason to do this is to make a report that displays data analysis results and also provides basic filter, sorting functions for the user. They most likely to have some sort of web browser. So HTML would be an ideal format.
Is it possible with Javascript?
Thanks!
You might be able to do this by using a grid plugin. For example, have at look at the answers to this question: JavaScript data grid for millions of rows
I would recommend a javascript table library such as DataTables. It includes sorting, filtering and pagination options.
Also it has functionality to hand off all the paging, filtering, sorting etc. that DataTables does to a server. The javascript lib DataTables then is just an events and display module. In this case, any number of rows can be handled.
So you would have all the functionality you need, with the ajax-y quick performance of the data loaded in javascript with the scale to handle any number of rows.
Server-side data processing with DataTables
Absolutely yes. Ext.JS shows how to do this very effectively. When done correctly, it is a performance optimization that reduces round trips to server. And improves UX responsiveness.
ExtJS Rich Grid Example. (there are many)
ExtJS Examples. (look at grid section)
Hope that helps.

Categories

Resources