Templated columns will disapper when generated with a high number of cols.

[Giorgio]

Hi again,

i am creating a smart grid based on your grid at https://github.com/giorgiozoppi/smartdatagrid that it is able to save any columns to a remote grpc service,

i provide in this the updated code.

The idea is to autogenerate columns from a JSON based64.   The props passed to the linegridcomponent are included in the propsandlinegrid.zip in the file propsvalue.js

The component is in the folder linegrid linegridcomponent.js

It works pretty fine for a small number of cols.

Here the "Busca" - search trigs a modal created with reactstrap. But when add more columns the button streches or disappears without any

horizontal scrollbar. Like in this case:

After contracto should appear a templated button, after vehicle should as well. And after descriptor should appear as well.If i reduce

the number of columns it works fine.

I would like to share with you in the zip attached the state file and the component and its dependencies. Any hints?

Best Regards,

Giorgio.

Attachment: propsandlinegrid_5489d4a2.zip

[Seeni Sakthi Kumar Seeni Raj]

Hi Giorgio, 

Thanks for contacting Syncfusion support. 

We have validated the provided information and we suggest you to apply width for the template column to achieve your requirement. By default, we have applied width for the col group based on the value that you are provided in the width property. 

If we don’t specified the value then width does not applied for the corresponding col group so the column will be hidden when other columns width (col group sum -> 150+130+120+150+150 = 690) exceed the browser width(650). 

 

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

Regards, 

Seeni Sakthi Kumar S 

[Giorgio]

Hola,

excellent support. It works and saved me many hours.

Best Regards,

Giorgio.

[Giorgio]

Just a cameo. If i want a context menu custom, how do i specify the icons?

For example this

this.contextMenuItems =

        [
            'Copy', {
                text: 'Cut',
                target: '.e-content',
                iconCss: '.e-icons ea93' ,  --> the icons code is ea93 ie. or another for cut.
                id: 'cut'
            }, 'Edit', 'Delete', {
                text: 'Insert',
                target: '.e-content',
                iconCss: '.e-icons ea93',
                id: 'insert'
            }, {
                text: 'Paste',
                target: '.e-content',
                iconCss: '.e-icons ea93',
                id: 'paste'
            }

        ];

[Seeni Sakthi Kumar Seeni Raj]

Hi Giorgio, 

Thanks for your update. 

For your reference, we have created a sample and enable custom context menu with icons in grid. Please refer the below code example and sample for more information. 

export class ContextMenuSample extends SampleBase { 

  constructor() { 

    super(...arguments); 

    this.groupOptions = { showGroupedColumn: true }; 

    this.contextMenuItems = [ 

      { 

        text: "Cut", 

        iconCss: "e-cm-icons e-cut" 

      } 

    ]; 

    this.editing = { allowDeleting: true, allowEditing: true }; 

  } 

  render() { 

    return ( 

      <div className="control-pane"> 

        <div className="control-section"> 

          <GridComponent 

            id="gridcomp" 

            dataSource={orderDetails} 

            allowPaging={true} 

            allowSorting={true} 

            allowExcelExport={true} 

            allowPdfExport={true} 

            contextMenuItems={this.contextMenuItems} 

            editSettings={this.editing}> 

            . . . . 

            <Inject 

              services={[ 

                ContextMenu, 

              ]} 

            /> 

          </GridComponent> 

        </div> 

      </div> 

    ); 

  } 

} 

 

render(<ContextMenuSample />, document.getElementById("sample")); 

@font-face { 

    font-family: 'e-context-menu'; 

    . . . . . 

    font-weight: normal; 

    font-style: normal; 

} 

 

.e-cm-icons { 

    font-family: 'e-context-menu'; 

    font-style: normal; 

    font-variant: normal; 

    font-weight: normal; 

    line-height: 1; 

    text-transform: none; 

} 

 

/* custom code end */ 

 

.e-menu-item .e-cut::before { 

    content: '\e264'; 

} 

Sample : https://stackblitz.com/edit/react-rnhhqr-aettrq?file=index.js 

Help documentation: https://ej2.syncfusion.com/javascript/documentation/appearance/icons/?no-cache=1 

Regards, 

Seeni Sakthi Kumar S