Passing a parameter inside an if else in the grid

[Scott]

Does anyone know how to format the Id I want to pass in the if else statement. Or is there a way to do it in the columns command that might be easier. Thank you.

@(Html.Kendo().Grid(Model)
                .Name("Grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.Id).Hidden(true);
                    columns.Bound(p => p.JobStartDateTime).Visible(false);
                    columns.Bound(p => p.JobInfo).Title("Job");
                    columns.Bound(p => p.JobTimes).Title("Times");
                    columns.Bound(p => p.JobPayDisplay).Title("Pay");
                    columns.Bound(p => p.JobFirstCome).ClientTemplate
("#if (JobFirstCome == true)
{ <input type='button' class='k-button k-success-colored' onclick='SignUps(***Id***)' value='Sign Up'/> } 
else{ <input type='button' class='k-button k-info-colored' onclick='Request(****Id***)' value='Request'/>} #");
                    
                    columns.Command(cmd => cmd.Custom("Details").Click("Details"));
                    columns.Command(cmd => cmd.Custom("Sign Up").Click("SignUp").HtmlAttributes(new { @class = "k-success-colored" }));
                })
                .Events(e => e.DataBound("databound"))
                .Pageable()
                .Scrollable(scr => scr.Height(430))
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            //.PageSize(20)
                            .ServerOperation(false)

                        )
                )

[Stoyan]

Hello Scott,

Based on the provided code I am unsure I understand what is the desired outcome.

Could you please share some additional information about the requirement at hand to allow me to research further and give an appropriate suggestion?

Thank you for your cooperation.

Regards,
Stoyan
Progress Telerik

[Scott]

I'm trying to change the columns.command based on whether the JobFirstCome is either true or false. So maybe I need something like 

columns.Command(cmd => cmd.Custom("Sign Up").Click("SignUp").HtmlAttributes(new { @class = "k-success-colored" })).Hidden(JobFirstCome);
columns.Command(cmd => cmd.Custom("Request").Click("SignUp").HtmlAttributes(new { @class = "k-success-colored" })).Hidden(!JobFirstCome);

[Stoyan]

Hi Scott, 

You can achieve this requirement by using Razor syntax to conditionally render one command column or another:

@(Html.Kendo().Grid(Model)
                .Name("Grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.Id).Hidden(true);
                    columns.Bound(p => p.JobStartDateTime).Visible(false);
                    columns.Bound(p => p.JobInfo).Title("Job");
                    columns.Bound(p => p.JobTimes).Title("Times");
                    columns.Bound(p => p.JobPayDisplay).Title("Pay");
                    columns.Bound(p => p.JobFirstCome).ClientTemplate
                    if(JobFirstCome){
                             columns.Command(cmd => cmd.Custom("Sign Up").Click("SignUp").HtmlAttributes(new { @class = "k-success-colored" }));
                    }else{
                             columns.Command(cmd => cmd.Custom("Request").Click("SignUp").HtmlAttributes(new { @class = "k-success-colored" }));
                   }
                    columns.Command(cmd => cmd.Custom("Details").Click("Details"));
                    columns.Command(cmd => cmd.Custom("Sign Up").Click("SignUp").HtmlAttributes(new { @class = "k-success-colored" }));
                })
                ...
)

The approach above will allow you to use a value provided by the server to determine which command to be shown.

Please give the suggested approach a try and let me know how it works on your side.

[Scott]

thats giving me two errors. The first is after ClientTemplate where is says "; expected" and the second is the JobFirstCome condition says it does not exist in the current context.

[Scott]

Is there a way to do something like this where the question mark is the index of the row?

if (Model.ElementAt(?).JobFirstCome)
              {
                  columns.Command(cmd => cmd.Custom("Sign Up").Click("SignUp").HtmlAttributes(new { @class = "k-success-colored" }));
              }
              else
              {
                  columns.Command(cmd => cmd.Custom("Request").Click("SignUp").HtmlAttributes(new { @class = "k-success-colored" }));
              }

[Stoyan]

Hi Scott,

In my previous answer I have overlooked to complete the columns.Bound(p => p.JobFirstCome).ClientTemplate row. In addition I didn't notice the property JobFirstCome is a member of the Model used by the Gird.

Display a command button based on the value of the Model cannot be achieved in the Grid's HtmlHelper configuration because the field instances of the Model bound to the columns are resolved at runtime and aren't readily accessible in the configurations.

That being said you are able to achieve that on the client-side by:

1. Subscribing and handling the Grid's DataBound event.

   .Events(e=>e.DataBound("onDataBound"))

2. In its handler use the items method to get the rows on the current page
3. Get the dataItem of the row and check for the value of the JobFirstCome property
4. Find the command button that needs to be hidden and apply the hidden Html class to it

           function onDataBound(e){
               var grid = e.sender;
               var pageRows = grid.items();
               pageRows.each((ind,row)=>{
                   var dataItem = grid.dataItem(row);
                   if(dataItem.JobFirstCome == false){
                       $(row).find(".k-grid-SignUp").addClass("hidden");
                   }else{
                       $(row).find(".k-grid-Request").addClass("hidden");
                   }
               })
           }

5. Style the hidden class

       .hidden{
           display:none;
       }

For your convenience I have applied a similar implementation to the snippets above to this Telerik REPL.

Please be aware that with the suggestion above both commands should be configured to be visible in the HtmlHelper since it is determined which one to be hidden later on the client-side.

  columns.Command(cmd => {
             cmd.Custom("Sign Up").Click("SignUp").HtmlAttributes(new { @class = "k-success-colored" });
             cmd.Custom("Request").Click("SignUp").HtmlAttributes(new { @class = "k-success-colored" });
 });

 

[Scott]

Thank you so much.