Grid toolbar icons for add, edit, delete,update,cancel not visible

[Tejaswini]

Hi,

I am using syncfusion grid to display records. I have enabled toolbar but the toolbar icons for add, edit, delete,update,cancel are not visible.  How can I show the icons for each of these in the grid toolbar?

Thank you.

[Ragavee U S]

Hi Tejaswini,

We have analyzed the reported query and we suspect that the issue may be due to missing out of the “common-images” folder in the sample location. So please ensure that the common-images folder is included in the sample location. Please refer the below screenshot.

The css files can be found in the below location.

CSS Location: C:\Program Files (x86)\Syncfusion\Essential Studio\XX-XX-XX-XX\JavaScript\assets\css\web\XXX-XXX

 

Where XX-XX-XX-XX - version number and  XXX-XXX – Theme folder

Even after adding the common-images folder if you face the issue, then we suspect custom css styles that you may have used in your project might have overriden our css.

For your convenience, we have created a simple sample in AngularJS with toolbar enabled. The sample can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/118379/AngularJS1518138764.zip

The toolbar items can be defined in angularJS as in the below code snippet.

<div ej-grid id="Grid" e-datasource="dataManager" e-toolbarsettings="toolbar" >

<script>

        angular.module('listCtrl', ['ejangular'])

        .controller('regularization_controller', function ($scope) {

            $scope.dataManager = window.gridData;

            $scope.toolbar = { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] };

           }

        });

    </script>

The various directives that are associated with the toolbar buttons within a grid are

Directives	Usage
e-toolbarsettings-showtoolbar	To enable the toolbar inside the grid
e-toolbarsettings-toolbaritems	To enable the toolbar with default editing actions. Acceptable toolbarItems are "add", "edit", "delete", "update", "cancel" and "search"
e-toolbarclick	To trigger an action when the toolbar icons are clicked.
e-toolbarsettings-customtoolbaritems	To enable custom toolbar icons for the grid.

Please get back to us if you need any further assistance.

Regards

Ragavee U S

[sharad]

 I am using asp.net . In syncfusion grid  toolbar is not showing. dot are showing and orientation is vertical.

Thank You.

[Farveen Sulthana Thameeztheen Basha]

Hi Sharad, 

  

Thank you for contacting Syncfusion Support. 

We have analyzed your query and that issue may be due to missing out of “common images” folder in the sample location. Please ensure the solution mentioned in the previous update. 

We are unable to reproduce the issue at our end and we have created a sample . Please refer the sample attached. 

http://www.syncfusion.com/downloads/support/forum/118379/ze/Toolbar-627376296.zip 

Before proceeding your query we need below details. 

1.Please share the code snippet for this issue. 

2.Attach screen shot as like “orientation is vertical” 

3.If possible replicate the issue in the above sample and send us back. 

 

The provided information will help to analyze the issue and provide you the response as early as possible.  

 

 

Regards, 

 

Farveen.T 

[R Klein]

Hi Sharad, 

  

Thank you for contacting Syncfusion Support. 

We have analyzed your query and that issue may be due to missing out of “common images” folder in the sample location. Please ensure the solution mentioned in the previous update. 

We are unable to reproduce the issue at our end and we have created a sample . Please refer the sample attached. 

http://www.syncfusion.com/downloads/support/forum/118379/ze/Toolbar-627376296.zip 

Before proceeding your query we need below details. 

1.Please share the code snippet for this issue. 

2.Attach screen shot as like “orientation is vertical” 

3.If possible replicate the issue in the above sample and send us back. 

 

The provided information will help to analyze the issue and provide you the response as early as possible.  

 

 

Regards, 

 

Farveen.T 

For anyone else having this issue, I spent HOURS re-setting up projects, updating script files, updating Syncfusion, making sure all the necessary files were in place, etc. etc.

Unbelievably, it came down to one simple issue. When adding items to the collection for the toolbar I was using "Add" vs. "add" and "Edit" vs. "edit"!

I was going crazy! Either way I love the Grid and the Syncfusion tools!

RWK

[Ragavee U S]

Hi Klein, 

Thanks for your update. 

We have mentioned about this in our online documentation link on how to specify the toolbar items in grid. 

https://help.syncfusion.com/js/grid/editing#toolbar-with-edit-option 

Please refer to the above documentation and let us know if any further assistance is needed. 

Regards, 

Ragavee U S. 

[Deven Thanki]

Hi,

Even I'm using the Syncfusion EJ Grid and I have enabled the toolbar where in I'm displaying only 4 options [edit,delete,update,cancel].

I performed all the steps written in the document for the EJ Grid toolbar as well as in this conversation. However I can only see the 4 squares instead of the icons.

I tried placing the folder "common-images" in the sample location as it is mentioned in the previous conversations as well as I checked the .min file. But I can't find any solution to this problem. I have attached my code below. Need your help.

@helper YAxisHelper()

{

    @(Html.EJ().Grid<object>("YAxisGrid" + @Model.hiddenTabId).CssClass("yAxisGrid")

            .Datasource((IEnumerable<object>)Model.YAxis)

                            .ToolbarSettings(toolbar =>

                            {

                                toolbar.ShowToolbar().ToolbarItems(items =>

                                {

                                 

                                    items.AddTool(ToolBarItems.Edit);

                                    items.AddTool(ToolBarItems.Delete);

                                    items.AddTool(ToolBarItems.Update);

                                    items.AddTool(ToolBarItems.Cancel);

                                });

                            })

                             .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })

            .Columns(col =>

            {

                col.Field("Name").CssClass("yAxisGrid").HeaderText("Name").Add();

                col.Field("Function").CssClass("yAxisGrid").HeaderText("Function").EditType(EditingType.Dropdown).CssClass("yAxisGrid").DataSource((List<object>)Model.AggregateFunctions).TextAlign(Syncfusion.JavaScript.TextAlign.Left).Width("100").Add();

                col.Field("InitialSort").HeaderText("InitialSort").EditType(EditingType.Dropdown).CssClass("yAxisGrid").DataSource((List<object>)Model.SortTypes).TextAlign(Syncfusion.JavaScript.TextAlign.Left).Width("100").Add();

                col.Field("Alias").CssClass("yAxisGrid").EditType(EditingType.Dropdown).CssClass("yAxisGrid").DataSource((List<object>)Model.lstAlias).Add();

                col.Field("GridFieldId").IsPrimaryKey(true).CssClass("yAxisGrid").HeaderText("GridFieldId").Visible(false).Add();

            })

        .ContextMenuSettings(con => con.EnableContextMenu())

                                   .ClientSideEvents(cl => { cl.ActionComplete("yAxisGridActionComplete"); cl.ActionBegin("OnAcionBegin"); })

            )

}

Thank you

[Thavasianand Sankaranarayanan]

Hi Deven, 

 

We have analyzed your query and we are unable to reproduce the reported issue “toolbar icons are not shown in Grid” from our end. 

 

We have prepared a sample and it can be downloadable from the below location. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/118379/ze/SyncfusionMvcApplication13_(5)-561302106.zip 

 

Refer the screen shot of common-images folder reference in a sample. 

 

 

 

Please provide the following details for better assistance. 

 

1. Share an image of common-images folder referred in your sample likewise we shared.
2. Share screen shot or video demonstration of the issue.
3. If you face any script error in console window then share those detail.
4. Are you face this issue in any particular browser alone ?
5. Share Essential Studio version detail and browser version detail.

 

Regards, 

Thavasianand S.