After researching for a while with no luck I finally found a solution. Here are the details.
I want to generate dynamic columns in the grid every refresh. Because my columns are based on an hour and date dimension which you would imagine are going to change every hour and hence would have a different name every time. However i still want to generate columns on the fly and show them with nice display labels as date
So i figured since I am getting Json data what should i do. Here is my solution.
below is the function that would create my grid
then upon document ready i can make calls to get JSon data and pass it to the create method above and do the renaming of columns afterwards as shown below.
//First Create My HTML grid the usual way. Pass in the JSON Data to the create grid method.
//Right after the grid is created, rename the columns by looping through it
g = $(
(i = 0; i < g.columns.length ; i++)
oldFName = g.columns[i].field;
newFName = oldFName.replace(
newFName = newFName.split(
"#grid10Days thead [data-field="
+ oldFName +
Hope this helps if you are same as my situation.