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
close icon

Change standard toolbar buttons from icon to text

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

3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team 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. 



TS Thavasianand Sankaranarayanan Syncfusion Team 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. 



TS Thavasianand Sankaranarayanan Syncfusion Team March 14, 2017 04:43 PM UTC

Hi Rykunov, 
 
Please ignore the previous update. 
 
Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon