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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

148658 Oct 29,2019 12:42 PM UTC Oct 31,2019 09:51 AM UTC React - EJ 2 4
loading
Tags: Grid
Giorgio
Asked On October 29, 2019 12:42 PM UTC

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 [Syncfusion]
Replied On 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. 

Regards, 
Seeni Sakthi Kumar S 


Giorgio
Replied On October 30, 2019 12:45 PM UTC

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


Giorgio
Replied On 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'
            }
        ];


Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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() { 
    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'; 
} 




Regards, 
Seeni Sakthi Kumar S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon