Conditional button in columns Grid

Question

I'm trying to include a button in Columns Grid using Syncfusion GRID for Javascript (ejGrid) :

$("#Grid").ejGrid({
            dataSource: ej.DataManager({
           .
columns: [ 
         .
         .
{ headerText: 'Detail', template: '<a class="btn btn-info" rel='nofollow'  
rel='nofollow' href="/ServicesOrder/Detail/{{:ServicesOrderId}}">Detail</a>,<a class="btn btn-sucess" >Finish</a> ,  
'<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 butons (finish or In progress) :

if (Rest == 0) 
Only display --> 
{ headerText: 'Detail', template: '<a class="btn btn-info" rel='nofollow' 
rel='nofollow' href="/ServicesOrder/Detail/{{:ServicesOrderId}}">Detail</a>,<a class="btn btn-sucess" >Finish</a> ' }, 

Else 
Only display --> 
{ headerText: 'Detail', template: '<a class="btn btn-info" rel='nofollow' 
rel='nofollow' href="/ServicesOrder/Detail/{{:ServicesOrderId}}">Detail</a>,<a class="btn btn-danger" >In progress</a>' }, `

Answer 1

We have achieved your requirement using columnTemplate feature and JS render if else condition. Based on the Verified column value, button will be rendered. Refer the below code example

`<script type="text/x-jsrender" id="columnTemplate">
                    {{if Verified}}
  <a class="btn btn-info" rel='nofollow' rel='nofollow' href="/ServicesOrder/Detail/{{:ServicesOrderId}}">Detail</a>,<a class="btn btn-sucess">Finish</a>
                    {{else}}
 <a class="btn btn-info" rel='nofollow' rel='nofollow' href="/ServicesOrder/Detail/{{:ServicesOrderId}}">Detail</a>,<a class="btn btn-danger">In progress</a>
                    {{/if}}   
                </script>
                <div id="Grid"></div>         
    <script type="text/javascript">
        $(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>`

Refer the below sample

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

Refer the help documentation for your reference

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

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