1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. How to Iterate through a column of the Grid control in client side.

How to Iterate through a column of the Grid control in client side.

Hi,

 I need to iterate through a particular column of my grid and get the maximum value out of all the cell values under that column. 
Please explain me how do i do it in client side.

Thank you
Kalum

7 Replies
KM Kuralarasan Muthusamy Syncfusion Team May 23, 2018 11:31 AM UTC

Hi Kalum, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we found that you want to display the maximum value of the particular column. So we suggest you to use Grid summary to achieve your requirement. 

Please refer the following code example : 

@(Html.EJ().Grid<EmployeeView>("Grid") 
 
                                ..... 
 
                            .ShowSummary() 
                            .SummaryRow(row => 
                            { 
                            row.Title("Maximum").SummaryColumns(col => { col.SummaryType(SummaryType.Maximum).DisplayColumn("EmployeeID").DataMember("EmployeeID").Add(); }).Add(); 
                            }) 
) 

In this code we have used summaryType is maximum, DisplayColumn is EmployeeID and DataMember is also EmployeeID column. So its display the maximum value of the EmployeeID column under that EmployeeID column. We have also prepared the sample with your requirement and that sample has been downloadable from the below link, 


Please refer the following link to know about Grid summary: 



If you need further assistance please get back to us, 

Regards, 
Kuralarasan M. 


KA kalum May 24, 2018 06:37 AM UTC

Hi,
Thank you very much for your reply. But my requirement is bit different. Actually I wanted to Get the maximum value +1 and use that value in the cell of the same column of next newly adding row. That means every time when i add a new row, it should iterate the column and get the max value +1 and put that into the new row cell.
Thank you,
Kalum



KM Kuralarasan Muthusamy Syncfusion Team May 25, 2018 11:35 AM UTC

Hi Kalum, 

We have analyzed your query and we suggest you to use ToolbarClick event and defaultValue property of the grid column with max property of the ejDataManager to achieve your requirement. 

Please refer the following code example: 

@(Html.EJ().Grid<EmployeeView>("Grid") 
                     
                          ..... 
 
               .ClientSideEvents(eve => { eve.ToolbarClick("click"); }) 
                     
) 
 
<script> 
    function click(args) { 
            args.model.columns[1].defaultValue = ej.max(args.model.dataSource, "EmployeeID").EmployeeID + 1; 
    } 
</script> 

In this code we have used the EmployeeID field max value to achieve your requirement. We have also prepared the sample with your requirement and that sample can be downloadable from the below link, 


Please refer the following links to know about ToolbarClick event and defaultValue property of the ejGrid: 



Please refer the following link to know about max property of the ejDataManager: 


Regards, 
Kuralarasan M. 


KA kalum May 27, 2018 04:54 PM UTC

Hi Kuralarasa,
Thank you very much for your kind help. Now it works fine. How ever could you please tell me a way of iterating through the grid in client side and read data in every and each cell.
Thank you.
Kalum

KM Kuralarasan Muthusamy Syncfusion Team May 28, 2018 11:00 AM UTC

Hi Kalum,   
From your query we found that you want to read the each and every cell data of the Grid. So, we suggest you to query-cell-info event of the grid to achieve your requirement.   
Please refer the below code example:   
  
<ej-grid id="Grid" datasource=ViewBag.parent query-cell-info="info">   
   
                    .....   
   
</ej-grid>   
   
<script>   
    function info(args) {    
        console.log(args.cell);   
        //place your code here...   
    }   
</script>   
  
  
In this code we have displayed the each and every cell values in console window. Also, we suggest you to use row-data-bound event of the grid for if you want to collect the each and every row details in Grid.   
  
Please refer the below links to know about queryCellinfo and rowDataBound events of the grid:   
  
  
  
Regards,   
Kuralarasan M. 
 


BI Binu July 24, 2019 01:54 PM UTC

Hi,

I need a similar dynamical grid with react . I am getting all the columns in datasource, but i need only few columns, but i am not able to map that columns dynamically.
can u let me know how to do the same.
import { render } from 'react-dom';
import * as React from 'react';
import { closest, isNullOrUndefined } from '@syncfusion/ej2-base';
import { GridComponent, ColumnsDirective,
ColumnDirective as Column, Filter, Inject, VirtualScroll, Sort } from '@syncfusion/ej2-react-grids';
import { getData } from '../data';
import {useState,useEffect} from 'react';


const Grid = ({
dataSource,
gridColumns,
gridPageSize,
isGridPaging,
isGridSortable,
isGridFilterable,
onSelectionChange,
isGridHoverable,
id
}) => {
let skipVal = 0;
let takeVal = 10;
let gridOriginalData = dataSource;
let gridSort= false;
let gridFilter=false;
let gridData = {
data: dataSource.slice(skipVal, takeVal + skipVal),
sort: [],
filter: undefined,
pageSize: gridPageSize,
skip: skipVal,
take: takeVal
};

const [updatedGridData, setGridData] = useState(gridData.data);
const [updatedGridSortData, setGridSortData] = useState(gridData.sort);
const [updatedGridFiltertData, setGridFilterData] = useState(gridData.filter);

function dataStateChange() {
// let tableData = orderBy(filterBy(gridOriginalData, gridFilter), gridSort);
// tableData = tableData.map(dataItem => Object.assign({ selected: false }, dataItem));
// gridData = {
// data: tableData.slice(skipVal, takeVal + skipVal),
// total: tableData.length
// };
setGridData(gridData.data);
setGridSortData(gridSort);
setGridFilterData(gridFilter);
}
function filterChange(filter) {
gridFilter = filter.filter;
dataStateChange();
}

return (<div className='control-pane'>
<div className='control-section'>
<GridComponent
dataSource={updatedGridData}
enableHover={isGridHoverable}
allowFiltering={isGridFilterable}
allowSelection={onSelectionChange}
filterSettings ={filterChange}
allowSorting = {isGridSortable}
id={id}
allowPaging={isGridPaging}
>
{
// gridColumns.map((item, index) =>
// <Column field={item.field} headerText={item.field} />)
}
</GridComponent>
</div>
</div>
);
}

export default Grid;


TS Thavasianand Sankaranarayanan Syncfusion Team July 25, 2019 02:23 PM UTC

Hi Binu, 

Thanks for contacting Syncfusion support. 

From your query, we found that you want to create Grid columns dynamically. So, we suggest you to use Grid columns property instead of the columnDirective to achieve this requirement. Please refer the below code snippet, 

export class Default extends SampleBase { 
        load(args) { 
 
            isInitialLoad = true; 
        } 
        dataBound(args) { 
 
            if (isInitialLoad) { 
                isInitialLoad = false; 
                var gridCol = [] 
                this.grid.columns.map(function (cols, index) { 
                    if (index % 2 == 0) { 
                        //based on your condition define the column in grid model 
                        gridCol.push({ field: cols.field, width: 90 }) 
                    } 
                }) 
 
 
                this.grid.columns = gridCol; // Provide dynamically created columns to Grid 
                this.grid.refreshColumns(); 
            } 
        } 
        render() { 
            return (<div className='control-pane'> 
                <div className='control-section'> 
                    <GridComponent load={this.load.bind(this)} dataBound={this.dataBound.bind(this)} ref={g => this.grid = g} dataSource={orderDetails} height='350'> 
 
                    </GridComponent> 
                </div> 
            </div>); 
        } 
 
    } 
 
    render(<Default />, document.getElementById('sample')); 


Regards, 
Thavasianand S. 


Loader.
Up arrow icon