We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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

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


1 Reply

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team December 5, 2019 04:25 PM UTC

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:- 

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

Regards, 
Farveen sulthana T 


Loader.
Live Chat Icon For mobile
Up arrow icon