We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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,

Attachment: propsandlinegrid_5489d4a2.zip

4 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 30, 2019 11:07 AM UTC

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. 

Seeni Sakthi Kumar S 

GI Giorgio October 30, 2019 12:45 PM UTC

excellent support. It works and saved me many hours.
Best Regards,

GI Giorgio October 30, 2019 04:34 PM UTC

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'

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 31, 2019 09:51 AM UTC

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() { 
    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"> 
            . . . . 
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'; 

Seeni Sakthi Kumar S 

Live Chat Icon For mobile
Up arrow icon