Conditional column with a button in a grid

Thread ID:	Created:	Updated:	Platform:	Replies:
142939	Feb 26,2019 12:14 PM UTC	Feb 27,2019 08:50 AM UTC	ASP.NET Core	1

Subscribe to this post

Tags: Grid

Marso

Asked On February 26, 2019 12:14 PM UTC

I'm trying to include a column with conditional in my Grid :

$("#Grid").ejGrid({

dataSource: ej.DataManager({

columns: [

{ headerText: 'Detail', template: '<a class="btn btn-info" rel='nofollow' rel='nofollow' href="/ServicesOrder/Detail/{{:ServicesOrderId}}">Detail</a>' },

{ headerText: 'Finish', template: '<a class="btn btn-sucess" >Finish</a>'

{ headerText: 'In progress', template: '<a class="btn btn-danger" >In progress</a>'

Indeed, I have a variable Rest (rest of payment) in my table ServicesOrder, my goal is to display one of the two columns :

if (rest==0)

Only display -->

{ headerText: 'Finish', template: '<a class="btn btn-sucess" >Finish</a>'

Else

Only display -->

{headerText: 'In progress', template: '<a class="btn btn-danger" >In progress</a>'

Reply | Reply with quote

Vignesh Natarajan [Syncfusion]

Replied On February 27, 2019 08:50 AM UTC

Hi Marso,

Thanks for contacting Syncfusion support.

Query: “Indeed, I have a variable Rest (rest of payment) in my table ServicesOrder, my goal is to display one of the two butons (finish or In progress) :”

From your query, we understand that you need to render the anyone of the two buttons based on the value from the dataSource. We have achieved your requirement using columnTemplate feature and JS render if else condition. Refer the below code example

<a class="btn btn-sucess">Finish</a>

<a class="btn btn-danger">In progress</a>

</script>

$(function () {

$("#Grid").ejGrid({

// the datasource "window.employeeView" is referred from jsondata.min.js

dataSource: window.gridData,

allowPaging: true,

pageSettings: { pageSize: 4 },

columns: [

{ field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 90 },

{ field: "CustomerID", headerText: "Customer ID", width: 150 },

{ field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 100 },

{ field: "OrderDate", headerText: "Order Date", textAlign: ej.TextAlign.Right, width: 100, format: "{0:MM/dd/yyyy}" },

{ field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, format: "{0:C}" },

{ field: "Verified", headerText: "Verified", width: 100 },

{ headerText: "Employee Image", template: "#columnTemplate", textAlign: "center", width: 110 },

]

});

</script>

For your convenience we have prepared a JS playground sample which can be referred below

Sample: https://jsplayground.syncfusion.com/yyuxmmkm

Refer the help documentation for your reference

https://help.syncfusion.com/js/grid/columns#column-template

https://www.jsviews.com/#iftag

Please get back to us if you have further queries.

Regards,

Vignesh Natarajan

Reply | Reply with quote

Conditional column with a button in a grid

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US