dhtmlXGridObject options?

Suite and Optimus Suite 5
#1

I’m new to dhtmlxGrid and am trying to set up a grid to pull data from a json object. Is there a listing of all events or options that can be called inside dhtmlXGridObject that someone could point me to?

I’m currently able to see my grid with all of my headers but I cannot figure out how to load the data from a json object. I know there is chart.parse(data,”json”) but this will not work with how I’m calling the grid using the following structure:
new dhtmlXGridObject({
columns:[
{ column object 1 },
…
{ column object N }
]
…
});

My code is as follows:

mygrid = new dhtmlXGridObject({
parent:"mygrid_container",
image_path:"imgs/",
columns: [
         { id:"stuid", label: "ID", width:40 },
         { id:"stuname", label: "Name", width:150 },
         { id:"alerts", label: "", width:20 },
         { label: "", width:20 },
         { label: "", width:20 },
         { label: "Owed", width:40 },
         { label: "Sped/504", width:50 },
         { label: "Current YTD Avg", width:60 },
         { label: "Current Term Avg", width:60 }
,{ label:"Journal Entry -   Three Summer   Experiences", width:110, type:"ed" }
,{ label:"Summer Reading   - Book Report #1", width:110, type:"ed" }
,{ label:"Summer Reading   - Book Report #2", width:110, type:"ed" }
,{ label:"Weekly   Performance   Sheet - #1", width:110, type:"ed" }
,{ label:"Journal - Three   Top Summer   Experiences -   Details", width:110, type:"ed" }
,{ label:"Weekly   Performance   Sheet - #2", width:110, type:"ed" }
,{ label:"Hyperbole   Worksheet - #1", width:110, type:"ed" }
,{ label:"Hyperbole   Worksheet - #3", width:110, type:"ed" }
,{ label:"Hyperbole   Worksheet - #2", width:110, type:"ed" }
,{ label:"Weekly   Performance   Sheet - #3", width:110, type:"ed" }
,{ label:"Scholastic   Scope -   'Flipped' -   Worksheet", width:110, type:"ed" }
,{ label:"The Toughest   Penguin Alive!   - Worksheet on   Adjectives", width:110, type:"ed" }
,{ label:"Weekly   Performance   Sheet - #4", width:110, type:"ed" }
,{ label:"Homonyms and   Synonyms   Worksheets", width:110, type:"ed" }
,{ label:"Parts of Speech   and Compound   Words Worksheets", width:110, type:"ed" }
,{ label:"Commas", width:110, type:"ed" }
,{ label:"Weekly   Performance 5", width:110, type:"ed" }
,{ label:"  Commas/Fingernail", width:110, type:"ed" }
,{ label:"Commas/Football", width:110, type:"ed" }
,{ label:"Commas/General   Martin", width:110, type:"ed" }
,{ label:"Commas/Over The   River", width:110, type:"ed" }
,{ label:"Using Capitals/A", width:110, type:"ed" }
,{ label:"Using Capitals/B", width:110, type:"ed" }
,{ label:"Commas/   Worksheet 2", width:110, type:"ed" }
,{ label:"  Commas/Worksheet 1", width:110, type:"ed" }
,{ label:"  Commas/Worksheet 3", width:110, type:"ed" }
,{ label:"  Commas/Worksheet 4", width:110, type:"ed" }
,{ label:"Weekly   Performance 6", width:110, type:"ed" }
,{ label:"Weekly   Performance   Sheet 7", width:110, type:"ed" }
,{ label:"Venn Diagram", width:110, type:"ed" }
,{ label:"Weekly   Performance 8", width:110, type:"ed" }
,{ label:"Venn     Diagram/Mr.Gray/David Farmer", width:110, type:"ed" }
,{ label:"Quiz 1", width:110, type:"ed" }
,{ label:"Quiz 2", width:110, type:"ed" }
,{ label:"Weekly   Performance 9", width:110, type:"ed" }
,{ label:"Notebook/   Answers For I   Am The Cheese", width:110, type:"ed" }
,{ label:"Venn Diagram/   Movie and Book", width:110, type:"ed" }
],
skin:"dhx_skyblue",
filter:true
});

Thanks.

#2

s there a listing of all events or options that can be called inside dhtmlXGridObject that someone could point me to?
List of events available here docs.dhtmlx.com/doku.php?id=dhtmlxgrid:events

how to load the data from a json object
You should use:
mygrid.parse(data,”json”)

#3

Thank you for your response, however, I’m not sure how to use mygrid.parse(data,“json”) with the way I’m calling everything. Could you show me how this would work?

My code is as such:

mygrid = new dhtmlXGridObject({
parent:"mygrid_container",
image_path:"imgs/",
columns: [
         { id:"stuid", label: "ID", width:40 },
         { id:"stuname", label: "Name", width:150 },
         { id:"alerts", label: "", width:20 }
],
skin:"dhx_skyblue"

I understand how the parse statement would work if I were writing the code like
mygrid.setImagePath . …
mygrid.setHeader(
but I don’t want to write it like this because I like the structure for columns that I have above because it allows me to define each column and its attributes (id, label, width, etc.) together. It enables me to loop through my data once.
I found the following documentation:
docs.dhtmlx.com/doku.php?id=dhtm … tor_object
but this only shows how to pull in an xml file for loading the data not a json file or object.

Thanks.

#4

Actually I figured out how to call the json object - I think because my call to freeze the columns works - but my json object is not being recognized even though I ran it through a validator and it validates fine. I sent the json object to support as a ticket hoping someone can tell me the problem.

My json object is

var data1 = [
{"studentid":"1013","stuid":"1013","alerts":"none","stuname":"Student one","progressRpt":"<img src='/images/prog.gif' border='0' align='top'>","sped":"*","curYTDavg":"70.18","curTermAvg":"87.97","A121934":"91","A122473":"0","A122020":"0"}
,{"studentid":"2256","stuid":"2256","alerts":"none","stuname":"Student two","progressRpt":"<img src='/images/prog.gif' border='0' align='top'>","sped":"*","curYTDavg":"84.36","curTermAvg":"77.64","A121934":"100","A122473":"80","A122020":"0"}
 ]

and everything gets called like such:

ygrid = new dhtmlXGridObject({
parent:"gridbox",
image_path:"../codebase/imgs/",
columns: [
         { id: "studentid", label: "StuID", width:40 },
        ...
],
skin:"dhx_skyblue",
filter:true
});
mygrid.splitAt(2);
mygrid.parse(data1,"json");
#5

Thank you for your help. I was able to figure out where I went wrong. I had my json set up incorrectly for the grid to understand it.

using the structure like so worked:

var data={
   "rows":[
   {
    "id":1,
    "data":[
     /* data goes here */
    ]
  },
   {
     "id":2,
    "data":[
      /* data goes here */
     ]
  }
 ]
}