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

Formatting the string of a column in a grid.

I have the following grid:

                              .Datasource(ds => ds.URL("/ThingsToDo/GetThingsToDoData?qid=" + ViewBag.usid + ViewBag.InitialFilter)
                              .PageSettings(page => { page.PageSize(ViewBag.PageSize); })
                              .Columns(col =>
                                  col.Field(c => c.Label).Template("#labelFormat").HeaderText("description").TextAlign(TextAlign.Left).Width(50).AllowEditing(false).Add();
                                  col.Field(c => c.TotalCount).HeaderText("total").TextAlign(TextAlign.Left).Width(15).AllowEditing(false).Add();
                                  col.Field(c => c.ExpiredCount).HeaderText("expired").TextAlign(TextAlign.Left).Width(20).AllowEditing(false).Add(); 

The column label is being rendered as thus:
"Working :"
I can't remove the ":" character backend for some reasons and I need to remove it front end.
I know I can apply a template so as to remove the ":" character at the end of the label, but don't know how to proceed.

Any help please?

3 Replies

VN Vignesh Natarajan Syncfusion Team May 12, 2019 10:27 PM

Hi Alis, 
Thanks for using Syncfusion products.  
Query: “I know I can apply a template so as to remove the ":" character at the end of the label, but don't know how to proceed. 
From your query we understand that you need to remove the “:” from the string. We have achieved your requirement using TemplateRefresh() event of ejGrid. Refer the below code example 
            .PageSettings(page => { page.PageSize(4); }) 
            .Columns(col => 
                col.HeaderText("Employee Image").Template("#columnTemplate").TextAlign(TextAlign.Center).Width(110).Add(); 
<script type="text/x-jsrender" id="columnTemplate"> 
    <span> {{:FirstName}}</span> 
<script type="text/javascript"> 
    function Trefresh(args) { 
        if (args.column.headerText == "Employee Image") { 
            if ($(args.cell).text().includes(":")) { 
                var txt = $(args.cell).text().split(":")[0]; 
private void BindDataSource() 
            order.Add(new Orders(1, "Nancy:", "Sales Representative", "Seattle", "USA")); 
            order.Add(new Orders(2, "Andrew", "Vice President, Sales", "Tacoma", "USA")); 
            order.Add(new Orders(3, "Janet", "Sales Representative", "Kirkland", "USA")); 
            order.Add(new Orders(4, "Margaret", "Sales Representative", "Redmond", "USA")); 
            order.Add(new Orders(5, "Steven", "Sales Manager", "London", "UK")); 
            order.Add(new Orders(6, "Michael", "Sales Representative", "London", "UK")); 
            order.Add(new Orders(7, "Robert", "Sales Representative", "London", "UK")); 
            order.Add(new Orders(8, "Laura", "Inside Sales Coordinator", "Seattle", "USA")); 
            order.Add(new Orders(9, "Anne", "Sales Representative", "London", "UK"));          
Refer the below screenshot for the output 
Refer our API documentation for your reference 
Please get back to us if you have further queries   
Vignesh Natarajan. 

AL Alis May 13, 2019 12:00 AM

Hello Vignesh,

Thank you for your help.  It works perfectly.


VN Vignesh Natarajan Syncfusion Team May 13, 2019 12:30 AM

Hi Alis,  

Thanks for the update. 

We are glad to hear that your query has been resolved by our solution.  

Please get back to us if you have further queries. 

Vignesh Natarajan. 

Live Chat Icon For mobile
Up arrow icon