Setting Grid attributes on javascript does not work

Hi guys,

I have a question about setting up the Grid attributes in javascript vs setting up the Grid attributes in the return XML.

Case 1: Keep the xml head minimum

	var mygrid = new dhtmlXGridObject('mygrid_condition_container');
	mygrid.setImagePath("http://192.168.10.89/assets/tools/dhtmlx/imgs/");
	mygrid.setSkin("light");
        mygrid.setInitWidths("130,130,*,200,50,40");
        mygrid.setColTypes('ro,coro,coro,txt,ch,ro');
        mygrid.setColSorting("str,str,str,int,");
	mygrid.attachHeader(",#select_filter,#text_filter,#text_filter,,");
	mygrid.enableEditEvents(true,false,false);
	mygrid.attachFooter(["Add a condition","#cspan", "#cspan","#cspan",$('#condition_footer').html(),"#cspan"], ['text-align:right']);
           $out .= <<< OUT
                    <rows>
                        <head>
                            <column>Date Modified</column>
                            <column xmlcontent="true">Status
                                    $conditionStatus
                            </column>
                            <column xmlcontent="true">Condition
                                    $conditionOptions
                            </column>
                            <column>Details</column>
                            <column>Met</column>
                            <column></column>
                        </head>
                        $rows
                    </rows>

Case 2: keep most the the Grid attribute in XML

	var mygrid = new dhtmlXGridObject('mygrid_condition_container');
	mygrid.setImagePath("http://192.168.10.89/assets/tools/dhtmlx/imgs/");
	mygrid.setSkin("light");
	mygrid.attachHeader(",#select_filter,#text_filter,#text_filter,,");
	mygrid.enableEditEvents(true,false,false);
	mygrid.attachFooter(["Add a condition","#cspan", "#cspan","#cspan",$('#condition_footer').html(),"#cspan"], ['text-align:right']);
           $out .= <<< OUT
                    <rows>
                        <head>
                            <column type="ro" width="130" sort="str">Date Modified</column>
                            <column type="coro" width="130" sort="str" xmlcontent="true">Status
                                    $conditionStatus
                            </column>
                            <column type="coro" width="*" sort="str" xmlcontent="true">Condition
                                    $conditionOptions
                            </column>
                            <column type="txt" width="200" sort="str">Details</column>
                            <column type="ch" width="50" sort="int">Met</column>
                            <column type="ro" width="40"></column>
                        </head>
                        $rows
                    </rows>
OUT;

In general, Case#1 does not work. Case #2 works as intended. In case #1, I do not see the header where mygrid.attachHeader(",#select_filter,#text_filter,#text_filter,") should render.

Also, [Met] is displayed as an integer instead of checkbox.

Is there anyway to make case#1 work ?

Thanks.

When you are loading data in grid in case #1?

I am facing a similar problem. When I load the grid object with the data and then use javascript to apply features on it like attaching header, enabling sorting, it does not work .
When I add a alert in between and allow the grid to load completely in the browser and then press ok to continue with the additional code, it works perfectly fine. Please let me know how can I solve this.

content =innerLayout.cells(“a”).attachGrid();
content.setSkin(“dhx_skyblue”);
content.setImagePath("…/lib/dhtmlx/dhtmlxGrid/codebase/imgs/");
content.enableSmartRendering(true);
reportId = id;
content.load(“cgi-bin/getGrid/” + id);

// when i add this and wait for the grid to load in the webpage and then press Ok to proceed, everything works well
//alert("Wait Here , tabCount = " + tabCount);

var cols = content.getColumnsNum();
var sortString ="";
for (i=0;i< cols;i++)
{
sortString = sortString + “str,”;
}
content.setColSorting(sortString);

Hi Olga,

I load the XML for case#1 on page load.

<script>
$(document).ready(function(){
        Cgrid.ds = '......' // this is the datasource that return data in xml
	conditionGrid.load(Cgrid.ds,function(){
            conditionGrid.sortRows(CONDITION_SORT_BY_DATE,"str","des");
        });
});
</script>

Another question: what is the purpose of xmlcontent=“true” as in

 <rows>
        <head>
              <column>Date Modified</column>
              <column xmlcontent="true">Status
              $conditionStatus
         </head>
</rows>

To solve most issues you should call
mygrid.setColTypes(‘ro,coro,coro,txt,ch,ro’);
mygrid.setColSorting(“str,str,str,int,”);

after the the loadng of XML where you initialize the header.

Thanks, I keep it in mind.