Grid + Range Navigator

[PDev]

Hi,

I am looking for some example where I can have Range Navigator within each Cell of Treegrid or Grid. unfortunately i could not find any such example. will it be possible for support team to create a sample. 

[Nishanthi Panner Selvam]

Hi PDev,

Greetings from Syncfusion.

We have analyzed your reported query. Based on that, we can create a range navigator inside the grid by importing the corresponding grid and range navigator modules.

We have created sample for your reference.

Code-snippet:

<ejs-grid [dataSource]='griddata' (created)="renderGridRangeNavigator()" height=400

                [allowSelection]=false [enableHover]=true>

                <e-columns>

                    <e-column field='EmployeeID' headerText='ID' width='70' textAlign='Right'></e-column>

</e-columns>

</ejs-grid>

 

Screenshot:

Sample: https://stackblitz.com/edit/angular-u9fgyo-gerhta?file=src%2Fapp.component.ts,src%2Fspark-data.ts,src%2Fapp.component.html

Kindly revert us if you have any concerns.

Regards,

Nishanthi

[PDev]

Thank you for the sample. I have tried to modified the same but when i have added new Row and column it just did not work.

https://stackblitz.com/edit/angular-u9fgyo-b1zwwu?file=src%2Fapp.component.ts,src%2Fapp.component.html,src%2Fspark-data.ts

will you be able to help me fix this sample and if possible can I have something where i can add column on button click to have this control create range navigator for each column dynamically.

Currently it looks something like this

[Nishanthi Panner Selvam]

PDev,

We have reviewed your query regarding the issue with the column template not rendering for all rows and other template columns. we recommend utilizing the options available to render other components within a grid column. you can use the "let-data" attribute,  Additionally, it's important to ensure that each component ID is unique to avoid any conflicts. Please refer the below code snippet and sample for more information

[app.component.html]

 

 <e-column headerText="Sprint1" textAlign="Center" width="200">

            <ng-template #template let-data>

                <ejs-rangenavigator

                  id="spkline{{ griddata.EmployeeID }}"

                  class="rn-container"

                  valueType="DateTime"

                  xName="x"

                  yName="y"

                  labelFormat="MMM"

                ></ejs-rangenavigator>          

            </ng-template>

          </e-column>

          <e-column headerText="Sprint2" textAlign="Center" width="200">

            <ng-template #template let-data>          

                <ejs-rangenavigator

                  id="spkline2{{ griddata.EmployeeID }}"

                  class="rn-container"

                  valueType="DateTime"

                  xName="x"

                  yName="y"

                  labelFormat="MMM"

                ></ejs-rangenavigator>

            </ng-template>

          </e-column>

 

 

Sample: https://stackblitz.com/edit/angular-u9fgyo-s6t4v5?file=src%2Fapp.component.ts,src%2Fapp.component.html

Other-component: https://ej2.syncfusion.com/angular/documentation/grid/columns/column-template#render-other-components-in-a-column

If you require further assistance, please do not hesitate to contact us. We are always here to help you.

Regards,

Nishanthi

[PDev]

Really appreciate this. One last request. can you give me pointers for creating dynamic columns with this control ?

[Nishanthi Panner Selvam]

PDev,

Thank you for reaching out to us. We understand that you want to use the rangeNavigator component in a dynamic column. To achieve this, you can dynamically set the grid's columns in the ngOnInit method and set the template fields in the ngAfterViewInit method. Please refer the below code snippet and sample for more information,

[app.component.ts]
 

ngOnInit() {

    this.griddata = orderdata;

    this.columns=[

      { field: 'EmployeeID', headerText: 'EmployeeID' }, 

      { field: 'ShipCountry',headerText: 'ShipCountry',  format: 'C2', }     ]

  

  }

  ngAfterViewInit(){

    this.grid.columns.push({ headerText: 'Sprint1', format: 'C2',template:this.temp});

    this.grid.columns.push( { headerText: 'Sprint2',  format: 'C2' ,template:this.temp2 });

  }

 

Sample:  https://stackblitz.com/edit/angular-u9fgyo-rbszsp?file=src%2Fapp.component.ts,src%2Fapp.component.html

If you require further assistance, please do not hesitate to contact us. We are always here to help you.

Regards,

Nishanthi