Question

I have constructed several web services that successfully serialize my .NET types into JSON. However, I’m running into an issue getting the JSON to be fully compatible with the YUI library and the DataTable in particular.

The YUI DataTable can be fully configured using JSON objects. I created the following struct in .NET to represent a given YUI column definition:

 public struct YuiColumnDefinition{
        public string key;
        public string label;
        public bool sortable;
        public string formatter;
 }

The ‘formatter’ property is how you instruct the YUI table to use a custom javascript function when displaying a given column. The problem is that, since formatter is defined as a String, ASP.NET wraps it’s value in double quotes upon serialization, and YUI no longer recognizes the value as a JavaScript token:

JSON YUI expects

[ 
{key:"1", label:"Order Date", formatter:myCustomJavaScriptFunction, sortable:true},
{key:"2", label:"Customer Name", formatter:null, sortable:false}
]

JSON ASP.NET creates

[ 
{key:"1", label:"Order Date", formatter:"myCustomJavaScriptFunction", sortable:true},
{key:"2", label:"Customer Name", formatter:null, sortable:false}
]

Anyone have a solution outside of modifying the YUI source code?

Thanks

Answer 1

As Allen correctly pointed out:

Its just incorrect to return an actual variable/function in a callback like that.

Still, I couldn’t find anywhere in the YUI documentation that spells out how to deal with javascript functions returned as strings from either JSON or XML.

Thank goodness for blogs. As pointed out in this one, the “proper” way to register custom javascript formatting functions is by using YAHOO.widget.DataTable.Formatter:

JSON Column Definitions as returned from .ASMX

[              
 {key:"1", label:"Order Date", formatter:"myCustomJavaScriptFunction1", sortable:true},             
 {key:"2", label:"Customer Name", formatter:null, sortable:false}             
 {key:"3", label:"State", formatter:"myCustomJavaScriptFunction2", sortable:false}             
]

Javscript to wire up the YUI DataTable

YAHOO.widget.DataTable.Formatter.myCustomJavaScriptFunction1= this.myCustomJavaScriptFunction1;
YAHOO.widget.DataTable.Formatter.myCustomJavaScriptFunction2= this.myCustomJavaScriptFunction2;

function  myCustomJavaScriptFunction1(elCell, oRecord, oColumn, oData) {
   //do something
}

function  myCustomJavaScriptFunction2(elCell, oRecord, oColumn, oData){
   //do something
}