Dojo grid grouping head like Excel - dojo

I want to display the following grid header style like Excel. Is there some perfect solutions available? And I've found some solutions, but the cells borders cannot display normally.
Thanks in advance.

That's easy to do with Dgrid and it's CompoundColumns mixin.
See the docs here : https://github.com/SitePen/dgrid/wiki/CompoundColumns
See the tests here : http://dojofoundation.org/packages/dgrid/js/dgrid/test/complex_column.html

Related

Vuetify Datatable: customize dropdown menu for sorting below mobilebreakpoint

I'm using Vuetify (2.6.1) data tables and they work great.
I wonder if it is possible to customize the UI of a particular case:
-> when the v-data-table is in responsive into the mobile breakpoint.
The UI looks like this:
data table list on mobile - sort field highlighted
Is it possible, just in this case, to customize the select highlighted in red here ?
I tried to update the the global CSS but things are not clean because when an item is selected from the list there is a v-chip added:
data table list on mobile with sort selected
I would like the select to look like and behave just like in this case here highlighted in red:
vuetify documentation - select solo style
I searched on the documentation and API, stack overflow, vuetify github's and tried different ways but I haven't found a way on how to properly style the sort select input.
Is anyone have any idea ? Maybe I'm missing something.
Thank you for your help.
You can use the dynamic slots item.<name> and customise v-select or v-autocomplete inside: https://vuetifyjs.com/en/components/data-tables/#item

Dgrid grouping based on checkbox and grid values

I am wondering how to use dgrid so that I can get a structure like in attached image. I am using dgrid, dstore and dojo 1.10 .
I need to create folder type structure when I check the checkbox or any structure which is supported by dgrid. Any help how to proceed further would be great and appreciated.
Have you looked into using a the dgrid tree plugin? There's quite a bit of useful information here and some examples here and here.
What you're trying to achieve seems like it should be possible with just using the regular tree plugin but I could be misinterpreting your question. Correct me if I've missed anything

Filter icon in GXT (not Ext-JS) grid header

I am working on a grid in GXT (not Ext JS) 2.4 and got stuck with this following issue.
I am trying to flag a column with a dynamic icon as soon a filter is set on it so that the user can know that he/she has applied a filter on the column. It is very similar to what is inbuilt in Excel where the a filtered icon is set on the filtered column.
I am unable to do so or find an article which points me in the right direction to get it fixed. I have tried changing the CSS as suggested in various forums but didn't help. The CSS change does equally impact all the headers though. All I want is for the filtered column to be different than the others.
Any help would be much appreciated. I will go to the extent of saying to consider me a newbie and giving me a step-by-step instruction on how to get it fixed. Sorry, if I sound too desparate but I am and I think I may have spent a little too much time figuring this out.
Thank you
GXT 2 already has this functionality, you can take a look at the Filter Grid Demo. bold and italic are used for filtered columns by default, here is the snippet from gxt-all.css
.x-grid3-hd-row .x-filtered-column {
font-style: italic !important;
font-weight: bold !important;
}
You need to override this css definition to have your own styles applied.

What is the difference between TreeGrid and TreePanel components of ExtJs 4?

I would like to know whats the difference between TreeGrid and TreePanel components of ExtJS 4?
I was looking for some component which will allow me to display rows and sub rows (for slice and dice kind of dashboard) but couldn't find anything similar in ExtJS 4.
I came across TreeGrid and TreePanel but not sure which one is latest and which to be used?
Please enlighten !
You want to use Treepanel. I believe treegrid name is a legacy cary over. Here is a very nice clean example of such a beast: http://docs.sencha.com/ext-js/4-0/#!/example/tree/treegrid.html
Notice how they did not rename the example :)

Dojo Grid Template

In asp.net the DataGrid supports templates. You can provide your own template and have the grid fill the data in your template.
With Dojo Grid, it seems like I can't make my own template outside of the the rigid simplistic cell style grid that Dojo provides.
Does anyone know a way to use a custom template with Dojo Grid? Specifically, with Dojo you're forced to use a cell that corresponds to a data item. I'm looking to use a table as a template with any styling that I choose (rows,columns,rowspans,colspans, more than one data items in a single cell, etc).
Any clues please?
Thanks
Firstly, it sounds like everything you want is available by customizing the grid. You can do nesting of cells and even have things like Filtering Selects in rows. Unfortunately the docs on this are not awesome so it takes Googling and trial and error if you want very customized features.
Secondly, because of the OO nature of Dojo you can always use inheritance to create mixes of various widgets. Specifically the _templated class allows you to specify an HTML template for your widget, which themselves can included templated widgets.
If that sounds non-trivial, you're right, which is why I would suggest digging deeper into the Enhanced grid and probably open up the code before trying to write something yourself.
I can tell you that I struggled getting it working correctly, but I have hence been pleasantly surprised by features that I needed that I thought I would need to build myself but were built into the grid.