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

[kalum]

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

[Kuralarasan Muthusamy]

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, 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/F137703-1086923118.zip 

Please refer the following link to know about Grid summary: 

https://help.syncfusion.com/aspnetmvc/grid/summary 

https://help.syncfusion.com/api/js/ejgrid#members:summaryrows-summarycolumns-summarytype 

If you need further assistance please get back to us, 

Regards, 

Kuralarasan M. 

[kalum]

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

[Kuralarasan Muthusamy]

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, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/F137703330894519.zip 

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

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

https://help.syncfusion.com/api/js/ejgrid#members:columns-defaultvalue 

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

https://help.syncfusion.com/js/datamanager/summary 

Regards, 

Kuralarasan M. 

[kalum]

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

[Kuralarasan Muthusamy]

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:   

  

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

  

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

  

Regards,   

Kuralarasan M. 

 

[Binu]

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;

[Thavasianand Sankaranarayanan]

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')); 

Sample: https://stackblitz.com/edit/react-kwyv1h-r4wslh?file=index.js 

Regards, 

Thavasianand S.