kendo ui grid template else if

Question

The following code is not working. Can anyone help me write and else if condition here?

   function getMyColumns() {
     return [{
       field: "xxx",
       title: "1st",
       width: "75px",
     }, {
       field: "ChoiceCode",
       title: "2nd",
       width: "75px",
       template: "#if(ChoiceCode == null) {# #} else If(mychoice == ChoiceCode) {#" +                                
                                    "{ #<div style='background-color:lightgreen'><span>#=ChoiceCode#</span></div>#}" +
                                "else {# <span>#=secondChoiceCode#</span> #}" +
                            "#}#"
            }, {
    }];
}

In the choice field if it's null I want to display an empty string and if it has a value and it matches my choice I want to highlight that cell with green color if it doesn't match my choice don't highlight it.

Answer 1

Personally I would change this so it is a bit easier to read and change.

rather than placing all the logic here pull it out into a function so your template command looks like:

template: "#=highlighter(data.ChoiceCode, data.mychoice, data.secondChoiceCode) #"

the have the function scripted out like so:

         function(choiceCode, myChoice, secondChoiceCode) {
   var retString = '';
   if (choiceCode === null || choiceCode === undefined) {
     retString = '';
   } else if (myChoice === choiceCode) {
     resString = '<div style="background-color:lightgreen;"><span>' +
       choiceCode + '</span></div>'
   } else {
     retString = '<span>' + secondChoiceCode + '</span>';
   }

   return retString;
 }

You can then get away from having to remember where the various braces should go and escape them in your template.

Obviously change the function to how you need it to return the data but this is based on what I could see in your original code provided. I am assuming that the variables are properties within your binding model for each row.

EDIT I've added the following demo which hopefully will help: http://dojo.telerik.com/ejaqU/2

Answer 2

If you put your template inline, it will be this:

#if(ChoiceCode == null) {# #} else If(mychoice == ChoiceCode) {# { #<div style='background-color:lightgreen'><span>#=ChoiceCode#</span></div>#}else {# <span>#=secondChoiceCode#</span> #} #}#

Or better yet(purposely without # ):

if(ChoiceCode == null) { } 
else If(mychoice == ChoiceCode) {
    { <div style='background-color:lightgreen'><span>#=ChoiceCode#</span></div>
}
else { 
    <span>#=secondChoiceCode#</span> } 
}

Noticed something wrong ? I think it should be this:

if(ChoiceCode == null) { } 
else If(mychoice == ChoiceCode) {
    <div style='background-color:lightgreen'><span>#=ChoiceCode#</span></div>
}
else { 
    <span>#=secondChoiceCode#</span>
}

Inline version:

# if(ChoiceCode == null) { # # } else if (mychoice == ChoiceCode) { #<div style='background-color:lightgreen'><span>#=ChoiceCode#</span></div> # } else { # <span>#=secondChoiceCode#</span> # } #

Code version:

template: "#if(ChoiceCode == null) {# #} else if(mychoice == ChoiceCode) {#" +                                
          "<div style='background-color:lightgreen'><span>#=ChoiceCode#</span></div>#}" +
          "else {# <span>#=secondChoiceCode#</span> #}#";

Answer 3

possible typo

} else If(mychoice == ChoiceCode) {

should be

} else if(mychoice == ChoiceCode) {

Answer 4

You have some extara brackets ({)in your templates

Try this

function getMyColumns() {
        return [{
                {
                field: "xxx",
                title: "1st",
                width: "75px",
            }, {
                field: "ChoiceCode",
                title: "2nd",
                width: "75px",
                template: "#if(ChoiceCode == null) {# #} else if(mychoice == ChoiceCode) {#" +
                        "<div style='background-color:lightgreen'><span>#=ChoiceCode#</span></div>#}" +
                        "else {# <span>#=secondChoiceCode#</span> #}#",
            }, {
            }];
    }