Can't put grid into vertical mode

[Duncan Gibson]

Hello! I've got a grid component embedded in my page. As you can see, I've got a lot of columns, and relatively little horizontal space to work with.

I've configured the grid as follows:

<GridComponent

editSettings={{

allowAdding: true,

allowDeleting: true,

allowEditing: true,

}}

toolbar={['Add', 'Edit', 'Delete', 'Update', 'Cancel']}

enableAdaptiveUI={true}

rowRenderingMode={'Vertical'}

height={'100%'}

>

<ColumnsDirective>{formColumnDirectives}</ColumnsDirective>

<Inject services={[Edit, Toolbar]} />

</GridComponent>

formColumnDirectives is an array of <ColumnDirective />, constructed like so:

const formColumnDirectives = useMemo(

() =>

form?.fields?.map((field) => (

<ColumnDirective

key={field.id}

field={field.id}

headerText={field.name}

width={150}

allowEditing={field.obligationType !== 'read_only'}

/>

)),

[form?.fields]

);



Any idea why the Grid won't render with vertical columns?

[Dineshnarasimman Muthu]

Hi Duncan Gibson,

Greetings from Syncfusion Support.

We have reviewed your query about data not rendered properly in grid when using vertical rendering. We tried to replicate the issue by preparing a sample based on the information you provided. We have rendered the columns in the grid using useMemo react hook and set the properties similar to your code. Additionally we have bound the grid dataSource in the useEffect react hook. We suspect that the dataSource is not properly bound to the grid in your code. Can you please ensure whether the dataSource is bound to grid.

The code snippet and sample have been attached for your reference.

React.useEffect(() => {

    Object.keys(orderDataSource[0]).map((key) => {

      columns.push({

        field: key,

        headerText: key,

        isPrimaryKey: true,

      });

    });

    setColumnName(columns);

    gridInstance.dataSource = orderDataSource; //binding dataSource

  }, []);

 

//rendering columns using react hook similar to your code

  const formColumnDirectives = React.useMemo(

    () =>

      columnName?.map((field) => (

        <ColumnDirective

          key={field.key}

          field={field.field}

          headerText={field.headerText}

          isPrimaryKey={field.isPrimaryKey}

        />

      )),

    [columnName]

  );

 

 

Sample: https://stackblitz.com/edit/react-wb1jjj-fhscis?file=index.js,data.js

If you still face any issue, can you please provide the issue replicating sample or can you please replicate the issue in the sample which we have provided.

Regards,

Dineshnarasimman M

[Duncan Gibson]

You've replicated the issue right there. Without touching anything, this is how your sample grid renders, despite being set to use adaptive UI and vertical row rendering.

[Dineshnarasimman Muthu]

Hi Duncan Gibson,

Sorry for the inconvenience caused.

We have reviewed the issue regarding the vertical rendering in grid. To enable the vertical rendering mode in grid, we suggest you to set the rowRenderingMode as 'vertical' and add the 'e-bigger' class to the parent element of the grid. The code snippet of the implementation and sample has been attached for your reference.

 <div className="e-bigger"> //adding e-bigger class is essential for vertical rendering

          <GridComponent

            ref={(grid) => (gridInstance = grid)}

            enableAdaptiveUI={true}

            height={'100%'}

            pageSettings={pageSettings}

            rowRenderingMode={renderingMode}

            toolbar={toolbarOptions}

            allowPaging={true}

            editSettings={editSettings}

          >

            <ColumnsDirective>{formColumnDirectives}</ColumnsDirective>

            <Inject services={[Page, Toolbar, Edit]} />

          </GridComponent>

        </div>

 

Sample: https://stackblitz.com/edit/react-wb1jjj-h5whbv?file=index.js,data.js

Image of vertical row rendering for your reference:

Please let us know if you need any further assistance.

Regards,

Dineshnarasimman M