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 : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Change standard toolbar buttons from icon to text

Thread ID:

Created:

Updated:

Platform:

Replies:

129337 Mar 13,2017 08:54 PM UTC Mar 14,2017 04:43 PM UTC ASP.NET MVC 3
loading
Tags: Grid
Stephen Armstrong
Asked On March 13, 2017 08:54 PM UTC

Hi,

I have a grid on my page and would like to change the "Add" row button in the toolbar to text (e.g. "Add new person name")

Can this be done without using custom toolbar buttons?


Thanks,
Steve

Thavasianand Sankaranarayanan [Syncfusion]
Replied On March 14, 2017 04:06 PM UTC

Hi Stephen, 
 
Thanks for contacting Syncfusion support. 
 
Query: I would like to change the "Add" row button in the toolbar to text 
 
We have already created a knowledge base for the above mentioned query. 
 
So, please refer the below knowledge base link. 
 
 
By using of above solution, you have both toolbar icon and text in the toolbar. So, if you want remove the toolbar icon you can use the below code example. 


<style type="text/css"> 
    /*Changes the add button icons*/ 
        .e-grid .e-addnew:before { 
 
            content: none !important; /*Remove the add icon in toolbar items*/ 
        } 
</style> 



Regards, 
Thavasianand S. 


Thavasianand Sankaranarayanan [Syncfusion]
Replied On March 14, 2017 04:22 PM UTC

Hi Rykunov, 
 
We have analyzed your query. We have prepared a sample with the auto generated value in the server side for the column isIdentity column.  
 
Refer the below code example. 
 
[app.component.html] 
 
<ej-grid #grid  [dataSource]="gridData" [allowScrolling]=true > 
 
 
    <e-columns> 
             <e-column field="OrderID" [isPrimaryKey]="true" [isIdentity]="true" width="75" textAlign="right"></e-column> 
        <e-column field="EmployeeID" headerText="Employee ID" [validationRules] = "{ required: true, number: true }" width="75" textAlign="right"></e-column> 
        <e-column field="CustomerID" headerText="CustomerID" width="80"textAlign="right"></e-column> 
        
    </e-columns> 
 
</ej-grid> 
 
 
 
If you are using CRUD operations, we suggest to return the update records to client end. Since you are using the IsIdentity for the PrimaryKey column, the value in the client-side differs from the server-side and to notify the changes on the IsIdentity column you have to return them from server-end. Refer to the following code example. 

[HomeController.cs] 
         
public ActionResult Update(Orders value) 
       { 
 
            var data = order.ToList(); 
            Orders result = data.Where(o => o.OrderID == value.OrderID).FirstOrDefault(); 
            if (result != null) 
            { 
                result.OrderID = value.OrderID; 
                result.CustomerID = value.CustomerID; 
                result.EmployeeID = value.EmployeeID; 
                 
            } 
           return Json(value, JsonRequestBehavior.AllowGet); 
        } 
        public ActionResult Insert(Orders value) 
        { 
            int generate = order.ToList().Count(); 
 
            value.OrderID = ++generate; // set the auto generated value to the OrderID column 
 
            order.Insert(0, value); 
       
            return Json(value, JsonRequestBehavior.AllowGet); 
        } 
        public ActionResult Delete(int key) 
        { 
            var data = order.ToList(); 
            Orders result = data.Where(o => o.OrderID == key).FirstOrDefault(); 
            order.Remove(result); 
            return Json(data, JsonRequestBehavior.AllowGet); 
        } 
 
 
 
 
We have prepared a sample and it can be downloadable from the below location. 
 

We have included angular2 sample also with in the project. 

Note:  First run angular2 sample separately for including packages and then run the project and change the path as (http://localhost:49349/angular2/ejGrid_Vpaging%20-%20Copy/ejGrid_Vpaging/) to run the sample in angular 2 
 
Regards, 
Thavasianand S. 


Thavasianand Sankaranarayanan [Syncfusion]
Replied On March 14, 2017 04:43 PM UTC

Hi Rykunov, 
 
Please ignore the previous update. 
 
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.

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

;