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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Conditional button in columns Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

142961 Feb 26,2019 12:24 PM UTC Feb 28,2019 04:48 AM UTC ASP.NET Core 3
loading
Tags: Grid
Marso
Asked On February 26, 2019 12:24 PM UTC

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 [Syncfusion]
Replied On February 27, 2019 08:45 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 
 
  <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  
 
 
Refer the help documentation for your reference 
 
 
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan 


Marso
Replied On February 27, 2019 09:10 PM UTC

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 [Syncfusion]
Replied On February 28, 2019 04:48 AM UTC

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 
 
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon