Formatting the string of a column in a grid.

[Alis]

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

[Vignesh Natarajan]

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 

 

https://help.syncfusion.com/api/js/ejgrid#events:templaterefresh 

 

Please get back to us if you have further queries   

 

Regards, 

Vignesh Natarajan. 

[Alis]

Hello Vignesh,

Thank you for your help.  It works perfectly.

Thanks,

Alis

[Vignesh Natarajan]

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.