Conditional button in columns Grid

[Marso]

I'm trying to include a  button in Columns 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>,<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>' },

[Vignesh Natarajan]

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-info" rel='nofollow' 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' 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> 

 

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

 

Sample: https://jsplayground.syncfusion.com/15jquuas  

 

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 

[Marso]

Thank you very much, it works perfectly. it works perfectly. Just another question, if I want to work on two conditions instead of one. how can I do.

[Vignesh Natarajan]

Hi Marso, 

 

Thanks for the update. 

 

Query: “ if I want to work on two conditions instead of one. how can I do.” 

 

From your query, we understand that you need to check two conditions in js render template. You can give the multiple conditions separated by ( && ). Refer the below code example 

 

<script type="text/x-jsrender" id="columnTemplate"> 

                   {{if Verified && CustomerID == "VINET"}} 

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

{{else}} 

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

{{/if}}    </script> 

 

For your convenience we have modified the sample which can be referred below 

 

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

 

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan.