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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

118379 Mar 4,2015 02:34 AM Feb 8,2018 07:15 AM JavaScript 7
loading
Tags: ejGrid
Tejaswini
Asked On March 4, 2015 02:34 AM

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 [Syncfusion]
Replied On March 5, 2015 06:01 AM

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
Replied On July 22, 2016 08:06 AM

 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 [Syncfusion]
Replied On July 26, 2016 07:55 AM

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. 




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
Replied On November 6, 2016 03:20 PM

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. 




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 [Syncfusion]
Replied On November 7, 2016 04:38 AM

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. 


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

Regards, 
Ragavee U S. 


Deven Thanki
Replied On February 7, 2018 05:41 AM

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 [Syncfusion]
Replied On February 8, 2018 07:15 AM

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. 
 
 
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. 


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.

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.

;