Formatting the string of a column in a grid.

Alis

Asked On May 10, 2019 12:02 PM UTC

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

Reply | Reply with quote

Vignesh Natarajan [Syncfusion]

Replied On 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();

…………………………………………………

})

)

<span> {{:FirstName}}</span>

</script>

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.

Reply | Reply with quote

Alis

Replied On May 13, 2019 08:00 AM UTC

Hello Vignesh,

Thank you for your help. It works perfectly.

Thanks,

Alis

Reply | Reply with quote

Vignesh Natarajan [Syncfusion]

Replied On 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.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
144572	May 10,2019 12:02 PM UTC	May 13,2019 08:30 AM UTC	ASP.NET MVC	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US