1. Home
  2. Forum
  3. React - EJ 2
  4. how to add scroll to specific coloumns and rows in react gridComponent

how to add scroll to specific coloumns and rows in react gridComponent

Hello teams,

I want to add scroll into specific columns and rows to my gridComponent  knowing that I m using rowTemplate




15 Replies
PS Pavithra Subramaniyam Syncfusion Team September 27, 2022 10:48 AM UTC

Hi saidaniyosra,


Thanks for contacting Syncfusion support.


In Grid, we don’t have support for scrolling to the specific column or row by default. However, you can scroll the Grid content to the required top or left using the Grid scrollModule. Please refer to the below code example for more information.


 

grid.scrollModule.content.scrollTop = 200;

grid.scrollModule.content.scrollLeft = 150;

 

 


Please get back to us if you need further assistance on this.


Regards,

Pavithra S


SA saidaniyosra September 27, 2022 11:27 AM UTC

Hi Pavithra Subramaniyam ,


Thank you for looking into this for me.
the  grid.scrollModule.content.scrollLeft  work to all the grid
but i want to scroll from Repaired column to ProductNotConform Column 
can you help me ?

SA saidaniyosra September 27, 2022 02:26 PM UTC

I want to  freeze the first  and the last columns in my grid (name and enable)   and only scroll the other columns

(vertical and horizontal scroll)


SA saidaniyosra September 27, 2022 03:05 PM UTC

knowing that when i want to use freeze Columns I got this errer

code :

toolbarClick={toolbarClickHandler}

dataSource={groupedQuoteOptionRules}

toolbar={toolbarOptions}

allowPaging={true}

ref={gridInstance}

pageSettings={{ pageSize: 50 }}

>

field=""

headerText="Name"

visible={true}

template={chipTemplate}

width={500}

showInColumnChooser

freeze='Left'

/>

{rulesColumns.map((c) => {

return (

headerText={c.valueCode}

textAlign="Center"

template={rulesTemplate}

foreignKeyField={c.valueId}

width={200}

/>

);

})}

field=""

headerText="Enable"

textAlign="Right"

template={actionsTemplate}

width={180}

freeze='Right'

/>

services={React.useMemo(

() => [

ColumnMenu,

ContextMenu,

Edit,

Filter,

Toolbar,

DetailRow,

],


[]


)}


/>







PS Pavithra Subramaniyam Syncfusion Team September 28, 2022 06:04 AM UTC

Hi saidaniyosra,


From your update, we understood that you want to freeze some columns and use column templates, not rowTemplate in your Grid. To use the frozen columns, you need to inject the “Freeze” module. Please refer to the below code example and documentation link for more information.


<GridComponent dataSource={employeeData} width="auto" height="359">

  .  .  .

  <Inject services={[Freeze]} />

</GridComponent>

 


Documentation: https://ej2.syncfusion.com/documentation/grid/frozen/#freeze-direction


Limitation           : https://ej2.syncfusion.com/documentation/grid/frozen/#limitations-of-frozen-grid

                               https://ej2.syncfusion.com/documentation/grid/frozen/#limitations-of-freeze-direction


Please get back to us if you need further assistance on this.


Regards,

Pavithra S


SA saidaniyosra September 28, 2022 08:22 AM UTC

I corrected the code as indicated below, but I still have an error

 <GridComponent

                    width="auto"

                    toolbarClick={toolbarClickHandler}

                    dataSource={groupedQuoteOptionRules}

                    toolbar={toolbarOptions}

                    allowPaging={true}

                    allowSelection={false}

                    ref={gridInstance}

                    pageSettings={{ pageSize: 50 }}

                    >

                    <ColumnsDirective>

                      <ColumnDirective

                        field=""

                        headerText="Name"

                        visible={true}

                        template={chipTemplate}

                        width={500}

                        showInColumnChooser

                        freeze='Left'

                      />


                      {rulesColumns.map((c) => {

                        return (

                          <ColumnDirective

                            headerText={c.valueCode}

                            textAlign="Center"

                            template={rulesTemplate}

                            foreignKeyField={c.valueId}

                            width={200}

                          />

                        );

                      })}


                      <ColumnDirective

                        field=""

                        headerText="Enable"

                        textAlign="Right"

                        template={actionsTemplate}

                        width={180}

                       freeze='Right'

                      />

                    </ColumnsDirective>

                    <Inject

                      services={React.useMemo(

                        () => [

                          ColumnMenu,

                          ContextMenu,

                          Edit,

                          Filter,

                          Toolbar,

                          Freeze


                        ],

                        []

                      )}

                    />

                  </GridComponent>






PS Pavithra Subramaniyam Syncfusion Team September 29, 2022 09:06 AM UTC

Hi saidaniyosra,


We have tried to reproduce the reported issue at our end, but the freeze columns are working fine at our end. Please refer to the below sample link for more information.


https://stackblitz.com/edit/react-cxyzas?file=index.js


To validate further, please share the below details that will be helpful for us to provide a better solution as early as possible.


  1. Share the Syncfusion package version you are using
  2. If you are using an old version can you please try to update the packages and reproduce the issue?

https://ej2.syncfusion.com/react/documentation/common/how-to/update-npm-package/

  1. Share an issue reproducible sample possible


Regards,

Pavithra S


SA saidaniyosra October 5, 2022 09:32 AM UTC

Hi Pavithra Subramaniyam ,


Thank you for looking into this for me.

when I try to add a column dynamically to the  rulesColumns , I have this error.


PS Pavithra Subramaniyam Syncfusion Team October 6, 2022 09:35 AM UTC

Hi saidaniyosra,


To validate the issue, we need some more information from your end. So could you please share the below details which will be helpful for us to provide a better solution?


  1. Share the code for updating the “rulesColumns”
  2. In what event you are trying to change the columns
  3. Share an issue reproducible sample or try to reproduce the issue in the below sample

https://stackblitz.com/edit/react-cxyzas-sy6jy7?file=index.js


Regards,

Pavithra S


SA saidaniyosra October 7, 2022 09:54 AM UTC

  1. rules are updationg using  PricingDialog 

<GridComponent

            width="auto"

            dataSource={groupedQuoteOptionRules}

            allowPaging={true}

            allowSelection={false}

            pageSettings={{ pageSize: 50 }}

            toolbar={toolbarOptions}

            toolbarClick={toolbarClickHandler}

          >

            <ColumnsDirective>

              <ColumnDirective

                field=""

                headerText="Name"

                visible={true}

                showInColumnChooser

                freeze="Left"

                template={chipTemplate}

                width={500}

              />

              {rulesColumns.map((c) => {

                return (

                  <ColumnDirective

                    field=""

                    textAlign="Center"

                    width={200}

                    template={rulesTemplate}

                  />

                );

              })}

              <ColumnDirective

                field=""

                headerText="Enable"

                textAlign="Right"

                width={200}

                freeze="Right"

                template={actionsTemplate}


              />

            </ColumnsDirective>


            <Inject

              services={[

                ColumnMenu,

                ContextMenu,

                Edit,

                Filter,

                Toolbar,

                Freeze,

              ]}

            />

          </GridComponent>

                )

              }

                    })()}

          </PerfectScrollbar>

          <DetailProvider>

            <PricingDialog

              item={item}

              open={pricingDialogOpen}

              handleCancel={() => setPricingDialogOpen(false)}

              mode={mode}

              handleSave={handleSave}

              inQuoteType={inQuoteType}

            />

          </DetailProvider>


2. I'm  trying to change the columns in the handleSave event (PricingDiaolog) , 

  const handleSave = (args: any) => {

    setPricingDialogOpen(false);


      if (args) {

        const data = [...groupedQuoteOptionRules, ...args];

        setGroupedOptionRules(data);

        const ids: any[] = [];

        if (data) {

          data.forEach((element: GroupedQuoteOptionRule) => {

            if (element.quoteOptionRules) {

              element.quoteOptionRules.forEach((rule: QuoteOptionRule) => {

                if (rule.inFinalstateId) {

                  ids.push(rule.inFinalstateId);

                }

              });

            }

          });

        }

        const listColumns = getFinalStateColumns(ids);

        setRulesColumns(listColumns);

      }

   

  };



 const getFinalStateColumns = (listIds: any[]) => {

    const listColumns: ListValue[] = [];

    if (finalState) {

      finalState.forEach((element: ListValue) => {

        listIds.forEach((id: number) => {

          if (id === element.valueId) {

            if (listColumns.indexOf(element) === -1) {

              listColumns.push(element);

            }

          }

        });

      });

    }

    return listColumns;

  };



PS Pavithra Subramaniyam Syncfusion Team October 10, 2022 07:16 AM UTC

Hi saidaniyosra,


Thanks for sharing the details.


We have tried to reproduce the issue with the given details, but it is working fine. Please refer to the below sample link for more information.


https://stackblitz.com/edit/react-6zjeto?file=index.js


It seems that the issue occurs in your application only. So could you please share an issue reproducible sample that will be helpful for us to validate the exact reason for the error and provide a better solution from our side?


Regards,

Pavithra S


SA saidaniyosra October 14, 2022 09:06 AM UTC

Hi   Pavithra Subramaniyam

if the list of dynamic columns is empty (rulesColumns) , the whole page crashes,



PS Pavithra Subramaniyam Syncfusion Team October 17, 2022 03:13 PM UTC

Hi saidaniyosra,


The Freeze property is used for making some of the columns to be forked and other columns scrollable. So, it is recommended to have at least one movable column to overcome the reported scenario. Please refer to the below code example and the sample link for more information for setting dynamic movable columns.


const onClick = () => {

  const listColumns = [];

  setflag(true);

  setfirstColFreeze(undefined);

  setRulesColumns(listColumns);

};

const dataBound = () => {

  if (rulesColumns.length == 0 && flag && gridInstance) {

    setflag(false);

    gridInstance.freezeRefresh();

  }

};

 


https://stackblitz.com/edit/react-6zjeto-eurfpe?file=index.js


Please get back to us if you need further assistance on this.


Regards,

Pavithra S


SA saidaniyosra October 18, 2022 04:09 PM UTC

Hi saidaniyosra,

Thanks for sharing the details.

I tried to reproduce the example with the opposite case (rulesColumns is empty at the beginning) and when I click on the updateColumns button I try to fill the list of columns, but it does not work for me, here is the error that I 'have

https://stackblitz.com/edit/react-6zjeto-r4uz1w?file=index.js



PS Pavithra Subramaniyam Syncfusion Team October 19, 2022 04:41 PM UTC

Hi saidaniyosra,


In our EJ2 Grid, When we freeze the columns at least one column should be a scrollable column. This is the default behavior of our current implementation. So, we suggest setting at least one column as scrollable or removing the "freeze" property for the Grid column when there are no columns in “rulesColumns” to overcome the issue.


Regards,

Pavithra S


Loader.
Up arrow icon