Binding to data, choosing columns and only rendering unique rows?

[Dynamic Benchmarking]

Hello, 

We're building a reporting/excel export feature using the SF WebForms Grid.  Our end users will choose the columns, sorting and filtering criteria they want in their Excel file.

We're currently grabbing data via Linq2SQL which has quite a few columns and thousands of unique rows (considering all columns) and binding it to the grid.

Because of the nature of the source of the data (relational), when we only select subsets of columns, the visible data now has potentially many duplicates.   

Question:  Is there a way to have the Grid render (and also export) only the unique rows after column selection and filtering?

Example:

Take a hypothetical data set with 6 unique rows like this:

If I choose both columns, this is what I might see.

User  ProductCode

1          Bus

1          Car

2          Bus

3          Bus

4          Car

4          Train

If I were to use the column chooser and only select the "User" column,  I would want to see 4 rows:    

User

1

2

3

4

If I were to use the column chooser and only select the "ProductCode" column,  I would want to see only 3 rows:    

ProductCode

Bus

Car

Train

[Farveen Sulthana Thameeztheen Basha]

Hi Customer, 

Thanks for contacting Syncfusion Support. 

Query#:- Is there a way to have the Grid render (and also export) only the unique rows after column selection and filtering? 

We have checked your query and we have removed the duplicate row and bind the unique values to Grid using ActionComplete event of the Grid. In the ActionComplete event, when args.requestType as columnchooser, we can get the distinct values on using ej.dataUtil.distinct and the bind the newData using dataSource method of the Grid. 

Please refer to the code example:- 

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" > 

    <ClientSideEvents ActionComplete="complete" /> 

    <Columns> 

        <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="75"> 

        </ej:Column> 

        .     .      . 

         

</ej:Grid> 

 

<script> 

 

     function complete(args) { 

         if(args.requestType == "columnchooser"){ 

              var field = this.getColumnByHeaderText(args.visiblecolumns[0]).field; 

              var data = ej.dataUtil.distinct(args.model.dataSource, field); 

              var newData = []; 

              data.forEach(val => newData.push({[field]: val})); 

              var gridObj = $("#Grid").ejGrid("instance") 

              gridObj.dataSource(newData); 

        } 

    }</script> 

 

Note:- We have provided solution for single column.  

Refer to the API Link:- 

https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete 

https://help.syncfusion.com/api/js/ejgrid#methods:datasource 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T