Sweetie Sweetie - 4 months ago 29
Javascript Question

Working on templates for columns in kendo grid

I have been trying to use if and else in a template of one of the field in kendoGrid.I have two fields "StatusDesc" and "newStatusDesc". I want show one of the value as an anchor tag. That is displaying fine but if you notice onclick defined for anchor tag,it has one of the field from the grid itself because it has to open a another page but when i click on the anchor tag, console of my browser shows:


uncaught ReferenceError: WEW6101 is not defined


Actually if I check firebug, it shows below value set to my anchor tag parameter which is correct but I am not able to call the function "WEW6101"

onclick='openStatusReload(WEW6101)

$("#Grid").kendoGrid({
dataSource: TUEDataSource,
autoBind: false,
scrollable: false,
sortable: {
allowUnsort: false
},
//filterable: { mode: "row", style: "max-width:100px;" },
//groupable: true,
pageable: {
refresh: true,
buttonCount: 5,
pageSizes: 5
},
dataBound: gridDataBound,
columns:
[
{ field: "newStatusDesc", hidden: true },
{ field: "StatusDate", title: "Status Date", width: 200, format: "{0:MM/dd/yyyy}", filterable: { cell: { showOperators: false, suggestionOperator: "contains" } } },
{ field: "Status", title: "Status", width: 150, filterable: { cell: { showOperators: true } } },
{ field: "LimitedDate", title: "Expiration Date", format: "{0:MM/dd/yyyy}", width: 150, filterable: { cell: { showOperators: true } } },
{
field: "StatusDesc", title: "Comments", width: 150,
template: "#if(StatusDesc == '' && newStatusDesc!='' && newStatusDesc!= null ) {#<a href='javascript:void(0)' class='margin-right10' onclick='openStatusReload(#=newStatusDesc#)'> #:newStatusDesc#</a>#} else{##:StatusDesc##}#", filterable: { cell: { showOperators: true } }
// template: "<a href='javascript:void(0)' class='margin-right10' onclick='openPlayerTUEStatusReload(#=Tue_StatusDesc#)'>#=TueStatusDesc#</a>", filterable: { cell: { showOperators: true } }
},
]
});

Answer

As per @Quantastical's comment you are missing the quotes around your text which is what is causing the issue but the below answer may help with this and any future templating you need to do with the kendo grids.

I think this dojo may help you out: http://dojo.telerik.com/AVeBU

I find doing inline templating like this can be difficult so prefer to extract the method out and either use a templating engine like kendo provides or craft the html like you have done.

I have made the following changes to your column so from what you have provided to:

 { field: "StatusDesc", title: "Comment", width: "130px" ,
   template: "#=generateLink(data)#" }

Here I am passing the dataItem for the row into a function called generateLink which calls this code:

function generateLink(data) {
  var ret = '';

  if (data.StatusDesc === '' && data.newStatusDesc !== '' && data.newStatusDesc !== null) {

    var linkElement = 'openStatusReload("' + data.newStatusDesc + '")';

    ret = "<a href='javascript:void(0)' class='margin-right10' onclick='" +
           linkElement + "'>" + data.newStatusDesc + '</a>';

    console.log(ret);

  } else {
    ret = data.StatusDesc;
  }

  return ret;
}

all this does is applies the same logic you had but allows you to use native javascript rather than the kendo widgets having to interpret the breakouts with the #= {some javascript in here} #

this way if you need to modify the code it is easier to read and change rather than having to figure out which # may be missing.

In my example I have the code just popping up an alert box with the value passed in and logging to console so you can see the magic that is occurring.

Hope this helps but if you anything changing/explaining better let me know and I will update my answer accordingly.