Trying to make a "lean and mean" grid

[Alain dEspaignet]

Hauling data from back end Web API's using JSON serialization carries a lot of "fat".

If my data is shaped as:

"Date_Of_Test","Finish_Product_Sieve_Analysis_ID","Finish_Product_ID","Finish Product","Version","Sieve_Set_ID","(mm)"," Weight (g)"," Passing (%)"," Limit Mini(%)","Under Limit"," Limit Maxi(%)","Over Limit"

Thar's a lot of extra bytes to carry around for every object row!

What if I could send just a header record once with the above followed by a plain array of the data.

[

["7/1/2020","2036","7","RAGREFIX01","2019","9","2.36","0.0","100.0","100.0","0","100.0","0"],

["7/1/2020","2036","7","RAGREFIX01","2019","9","2.0","0.0","100.0","100.0","0","100.0","0"],

["7/1/2020","2036","7","RAGREFIX01","2019","9","1.25","0.1","99.8","99.0","0","100.0","0"]

]

Similar to how CSV works.

Then I'd have to bind to the data using an index into the array.

I took this sample:

https://stackblitz.com/edit/angular-263829-toggle-grid-view-in-card-h3rnxm?file=app.component.html

And made some changes...

Change the columns to dropping the fieldName/fieldType I just need the headers

publiccolumns=[

{

headerName:"Date_Of_Test",

},

{

headerName:"Finish_Product_Sieve_Analysis_ID",

},

{

headerName:"Finish_Product_ID",

},

{

headerName:"FinishProduct",

},

{

headerName:"Version",

},

{

headerName:"Sieve_Set_ID",

},

{

headerName:"(mm)",

},

{

headerName:"Weight(g)",

},

{

headerName:"Passing(%)",

},

{

headerName:"LimitMini(%)",

},

{

headerName:"UnderLimit",

},

{

headerName:"LimitMaxi(%)",

},

{

headerName:"OverLimit",

},

];

Change the template to

#grid

id='Grid'

[dataSource]='data'

[allowExcelExport]="true"

[allowPdfExport]="true"

[allowResizing]="allowColumnReSizing"

[allowSorting]="true"

[allowPaging]="true"

[pageSettings]="pageSettings"

[gridLines]="lines"

[toolbar]="toolbar"

[contextMenuItems]="contextMenuItems"

[allowFiltering]="true"

[filterSettings]='filterSettings'>

ngForlet-i="index"let-column[ngForOf]="columns">

[headerText]="column.headerName">

#templatelet-data>

{{data[i]}}

data[i] indexes into the row columns array.

This works.

However, as soon as I did this the grid loses all sorting and filtering capability. I did not expect that.

Seemingly the grid is designed to work with JS objects and uses [field] to bind to object properties.

I supposed internally it uses that to drive the sorting.

Note that I did not provide [field] in the e-columns above.

Whereas the indexing and templating seems to work sorting is gone.

My question is this...

How much work would be involved in restoring sorting and filtering, grouping?

Or should I do it server-side?

Or should I drop this idea totally because I will inevitably run into trouble because this grid is not designed to do that?

Has anybody tried to do this?

Don't go there?

[Rajapandiyan Settu]

Hi Alain, 

Greetings from syncfusion support. 

Query : How much work would be involved in restoring sorting and filtering, grouping? Or should I do it server-side? 

Or should I drop this idea totally because I will inevitably run into trouble because this grid is not designed to do that? 

 

The EJ2 Grid only supports JSON Objects, because all the grid actions like Filtering, Sorting, Grouping, Selection, Searching, Exporting etc., are based on the column field. 

We are able to display array of value in the grid as you rendered using templates. But this is used only for the display purpose, we are unable to perform grid action in that data. It is not feasible in EJ2 Grid. 

Since the EJ2 Grid only supports JSON Object and we don’t have the support with array, so we suggest you to use JSON Object data to perform all the grid actions. 

Refer the below documentation of data-binding in Grid 

UG : https://ej2.syncfusion.com/angular/documentation/grid/data-binding/ 

Regards, 

Rajapandiyan S 

[Alain dEspaignet]

> It is not feasible in EJ2 Grid.

Thank you.

That's what I wanted to know.

[Rajapandiyan Settu]

Hi Alain, 

Thanks for your update. 

Regards, 

Rajapandiyan S