kendo UI- conditional column in kendo ui grid base on column values

Question

I am having trouble using kendo grid column template my scenario is this:

my column will create action links based on another columns value example:

columns.Bound(a => a.ref_nb).Width(145).Template(@<text></text>).ClientTemplate("#= (tran_ty =='SO') ? '<a>" + "${data.ref_nb}" + "</a>' : '<span>No Entry</span>'#");

in this scenario is used ternary to base what will be encoded in the column based on other tran_ty columns value but it there is an error on the template as thrown by the page. is there a possible way i can achieve this?? Any help would be appreciated. TIA

Answer 1

Try this for your ClientTemplate()

#= if(tran_ty == 'SO') { # <a href='#=ref_db#'>#=ref_db#</a> # } else { # <span>No Entry</span> # } #

Note, you may need to adjust the quotes a bit, but that should get you on the correct path.

See more about the syntax here: http://docs.telerik.com/kendo-ui/framework/templates/overview#template-syntax

Answer 2

Personally I find this process easier when trying to do more complex client templating

Change the bound column to:

columns.Bound(a => a.ref_nb).Width(145).ClientTemplate("#=myClientSideTemplate(data)#");

Then have some javascript that does the formatting for you:

  function myClientSideTemplate(data) {

        var returnString = ''; 

        if(data.tran_ty === 'SO')
        {
            returnString = '<a href="' + data.ref_nb + '">' + data.ref_nb + '</a>';
        }
        else  
        {
            returnString = '<span>Value is not equal to SO</span>';
        }


        return returnString; 

    }

This way you can keep playing around with the javascript and don't have the issue where you may be missing a quote or a piece of information.

It also means if you require this function somewhere else you can then reuse the code.