I have a picture made by "Highcharts",
and I want to show it under the datagrid
(the data and the picture have the same scroll bar and the head of the datagrid is frozen),
so,can I use it as the last row of the datagrid,or there is other ways?
Thanks in advance.

I have dynamic columns,and defined it's "field",
but when I use the method "appendRow",then show errors:
"SyntaxError: missing : after property id",
but it works well in this method "newID0:0"
(the value of "fields[1]" is "newID0")

How can I change my codes,if I want dynamic columns and dynamic
rows in datagrid?

Thanks in advance

// create dynamic columns
columns[0].push({
   title : result.operatorUserName,
   // define "field" here,and later,I put it to fields[]
   field : "newID" + i,
   width : 90
});

// append dynamic rows
for(var m=0; m<items.length; m++){
   $('#id_list_query').edatagrid(
   'appendRow',{
      //"SyntaxError: missing : after property id"
      fields[1]:0
      // bug,it works well when use "newID0:0"
   });
}

Thanks
It solved all the problems,and that method provide a new idea.

Thanks.
1. The above code is well,but it have no "clearSelections",
and when I execute the function "clearSelections" in my function "refreshAllTables":
the above code can "check" a row,but can't "select" a now.
And I don't know when the "clearSelections" finished,does "clearSelections" have the function
like "onLoadSuccess"?
2. And I have another question,that I can't expand a group in "onLoadSuccess",
after "clearSelections"

onLoadSuccess:function(){
        $(this).datagrid('selectRow',0);
        $(this).datagrid('checkRow',0);
        $(this).datagrid('checkRow',1);

        for(var j=0;j<groupIndex.length;j++){
            $(this).datagrid('expandGroup',groupIndex[ j ]);
        }
    }  


function refreshAllTables(){
        ... ...
        ajax_request("/userworkspace/ajax_items_to_first_assign",{},function(result){
            $("#table_items_by_task").datagrid("loadData",result);            
            $("#table_items_by_task").datagrid("clearSelections");  
            ... ...      
        },0);
    }

3. I think that the execution sequence is "clearSelections"-"datagrid's onLoadSuccess",
but the result is not,how can I control after the "clearSelections" finished?
Expect you answer

I have other codes,may be they are the reason that affect the above
because some other bugs,I must "clearSections" after "loadData".

I have tested that the datagrid's "onLoadSuccess" runs after the function "refreshAllTables()",
but the codes in "onLoadSuccess" doesn't work,
what else should I do, can I select a row after "clearSections" in function "refreshAllTables()" ?

    $(document).ready(function(){
        refreshAllTables();      
    });   

    function refreshAllTables(){
        ... ...
        ajax_request("/userworkspace/ajax_items_to_first_assign",{},function(result){
            $("#table_items_by_task").datagrid("loadData",result);            
            $("#table_items_by_task").datagrid("clearSelections");   
            ... ...      
        },0);
    }

1. sorry,the forum can't show "[]",my code is "checkedItems[ i ].id"
I don't know why,but I'm sure I can get the correct row index.
I select the first row,and the row index is "0".
2. I use the debugger "F12",find that the row can "select",but when
goes to "function initCss()",then the selected row turns to "unSelect"
3. I changed my code to this,even doesn't work,
I don't know what else affect this datagrid
    onLoadSuccess:function(){
        $(this).datagrid('selectRow',0);
        $(this).datagrid('checkRow',0);
        $(this).datagrid('checkRow',1);
    }   

I have already set "view:groupview",but the following codes doesn't work:
Thanks in advance .

$("#xxx").datagrid({
  ... ...
  onLoadSuccess:function(){
    var dg = $(this);
    checkedItems=dg.datagrid("options").checkedItems;

    for(var i=0;i<checkedItems.length;i++){
      // this row doesn't work
      dg.datagrid("checkRow",dg.datagrid("getRowIndex",checkedItems.id));
      ... ...
    }
}