Frozen Columns and Row Tempalte
Hello,
Thank you for your fantastic product. I am trying to use frozenColumns as well as the rowTemplate feature, but when I enable frozenColumns, the grid renders the frozen columns again in the scrolling area. I have attached my code below as well as a picture of the mis-rendering.
import React, { useRef, useState, useEffect } from 'react';
import { getValue } from '@syncfusion/ej2-base';
import { Filter, ColumnDirective, ColumnsDirective, GridComponent, Freeze, Inject, Search, Toolbar, Aggregate, VirtualScroll } from '@syncfusion/ej2-react-grids';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DataUtil } from '@syncfusion/ej2-data';
import './App.css';
import './Grid.css';
import data from './CarafeMappings/ImportData';
var icons = `
.alignRight {
text-align: right;
}
.refreshIcon {
margin-left: 8px;
}
.e-icons {
font-size: 26px;
}
.e-MT_reload:before {
content: '\\e99d';
}
`;
const filterSettings = {
type: 'Menu'
};
const checkboxFilter = {
type: 'CheckBox'
}
const format = { type: 'datetime', format: 'MM/dd/yyyy' };
const dateFilter = {
params: {
format: 'MM/dd/yyyy'
}
}
const tableMap = [
{ field: 'serial', type: 'text', headerText: 'Serial Number', width: 28, filter: null },
{ field: 'logNumber', type: 'text', headerText: 'CP Log Number', width: 132, filter: checkboxFilter },
{ field: 'contractName', type: 'text', headerText: 'Contract Name', width: 261, filter: checkboxFilter },
{ field: 'contractType', type: 'text', headerText: 'Contract Type', width: 127, filter: checkboxFilter },
{ field: 'contractStatus', type: 'text', headerText: 'Contract Status', width: 91, filter: checkboxFilter },
{ field: 'energyResource', type: 'text', headerText: 'Energy Resource', width: 110, filter: checkboxFilter },
{ field: 'vendorCounterparty', type: 'text', headerText: 'Vendor Name / Counterparty', width: 157, filter: checkboxFilter },
{ field: 'appleEntity', type: 'text', headerText: 'Apple Entity', width: 166, filter: checkboxFilter },
{ field: 'state', type: 'text', headerText: 'State/Province', width: 112, filter: checkboxFilter },
{ field: 'country', type: 'text', headerText: 'Country', width: 100, filter: checkboxFilter },
{ field: 'region', type: 'text', headerText: 'Region', width: 100, filter: checkboxFilter },
{ field: 'domesticOrInternational', type: 'text', headerText: 'Domestic or International', width: 100, filter: checkboxFilter },
{ field: 'getDri', type: 'text', headerText: 'GET DRI', width: 100, filter: checkboxFilter },
{ field: 'contractSize', type: 'text', headerText: 'Contract Size', width: 100, filter: null },
{ field: 'contractSizeType', type: 'text', headerText: 'Contract Size Type', width: 100, filter: checkboxFilter },
{ field: 'annualQuantity', type: 'text', headerText: 'Annual Quantity', width: 100, filter: checkboxFilter },
{ field: 'annualQuantityType', type: 'text', headerText: 'Annual Quantity Type', width: 100, filter: checkboxFilter },
{ field: 'annualNotional', type: 'text', headerText: 'Annual Notional ($-eq)', width: 100, filter: null },
{ field: 'lifetimeNotional', type: 'text', headerText: 'Lifetime Notional ($-eq)', width: 100, filter: null },
{ field: 'initialExecutionDate', type: 'date', headerText: 'Initial Execution Date', width: 100, filter: dateFilter, format: format },
{ field: 'contractTerm', type: 'text', headerText: 'Contract Term', width: 100, filter: null },
{ field: 'expirationDate', type: 'date', headerText: 'Expiration Date', width: 100, filter: dateFilter, format: format },
{ field: 'codReporting', type: 'date', headerText: 'COD Reporting', width: 100, filter: dateFilter, format: format },
{ field: 'recNotionalValueAtExecution', type: 'text', headerText: '$/REC Notional Value at Exectuion', width: 100, filter: null },
{ field: 'countOfAssociatedDocuments', type: 'text', headerText: 'Count of Associated Documents', width: 100, filter: null },
];
const App = () => {
const [searchValue, setSearchValue] = useState('');
const [filteredCount, setFilteredCount] = useState(data.length);
const gridRef = useRef();
const clearAllFilters = () => {
if (gridRef.current) {
gridRef.current.clearFiltering();
}
setSearchValue("");
}
useEffect(() => {
if (gridRef.current) {
gridRef.current.search(searchValue);
}
}, [searchValue]);
const gridTemplate = (props) => {
const cells = tableMap.map((rowConfig, index) => {
const display = rowConfig.type === 'date' ? 'date' : props[rowConfig.field];
return <td className='gridCell' role="gridcell" tabindex="-1" aria-label="" aria-colindex={index} index="0">
<div class="twoLines">{display}</div>
</td>;
});
return (<tr className="contractRow" >
{cells}
</tr>
);
}
const headerCells = tableMap.map((rowConfig) => {
return <ColumnDirective {...rowConfig} />
});
return <div>
<style>{icons}</style>
<GridComponent
dataSource={DataUtil.parse.parseJson(data)}
rowTemplate={gridTemplate}
frozenColumns={3}
height={700}
width='100%'
allowTextWrap={false}
allowSelection={false}
allowFiltering={true}
filterSettings={filterSettings}
ref={gridRef}
enableVirtualization={true}
pageSettings={{ pageSize: 40 }}
>
<ColumnsDirective>
{headerCells}
</ColumnsDirective>
<Inject services={[Filter, Freeze, Search, Toolbar, Aggregate, VirtualScroll]} />
</GridComponent>
</div>
}
export default App;
SIGN IN To post a reply.
3 Replies
SIGN IN To post a reply.
