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:

                @(Html.EJ().Grid<UserTodoDto>("ThingsToDoGrid")
                              .Datasource(ds => ds.URL("/ThingsToDo/GetThingsToDoData?qid=" + ViewBag.usid + ViewBag.InitialFilter)
                              .Adaptor(AdaptorType.UrlAdaptor))
                              .AllowPaging()
                              .AllowSorting()
                              .IsResponsive()
                              .CssClass("syncfusion-ej-grid")
                              .EnableResponsiveRow()
                              .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?
Thanks

3 Replies

VN Vignesh Natarajan Syncfusion Team May 13, 2019 06:27 AM UTC

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 
 
@(Html.EJ().Grid<object>("ColumnTemplate") 
            .Datasource((IEnumerable<object>)ViewBag.datasource) 
            .AllowPaging() 
            .PageSettings(page => { page.PageSize(4); }) 
            .ClientSideEvents(e=>e.TemplateRefresh("Trefresh")) 
            .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> 
<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]; 
                $(args.cell).text(txt); 
            } 
        } 
} 
</script> 
 
////////////////////////// 
 
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   
 
Regards, 
Vignesh Natarajan. 



AL Alis May 13, 2019 08:00 AM UTC

Hello Vignesh,

Thank you for your help.  It works perfectly.

Thanks,
Alis


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

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. 

Regards, 
Vignesh Natarajan. 


Loader.
Live Chat Icon For mobile
Up arrow icon