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

Conditional column with a button in a grid

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

                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>'
Only display --> 
{headerText: 'In progress', template: '<a class="btn btn-danger" >In progress</a>'

1 Reply

VN Vignesh Natarajan Syncfusion Team February 27, 2019 03:50 AM

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 
  <script type="text/x-jsrender" id="columnTemplate"> 
        {{if Verified}} 
  <a class="btn btn-sucess">Finish</a> 
 <a class="btn btn-danger">In progress</a> 
    <div id="Grid"></div> 
    <script type="text/javascript"> 
        $(function () { 
                // 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 }, 
For your convenience we have prepared a JS playground sample which can be referred below  
Refer the help documentation for your reference 
Please get back to us if you have further queries. 
Vignesh Natarajan 

Live Chat Icon For mobile
Up arrow icon