This is my code, who can make it work normal?(about subgrid)

Suite and Optimus Suite 5
#1

Hi, everybody! My english is very bad, so i hope you can understand my means. My goal is to show data in subgrid, data form DB!

my *.aspx code is:

<script type="text/javascript">
        
            var mygrid;
            function loadData() {
                mygrid = new dhtmlXGridObject('gridbox');
                mygrid.setImagePath("../dhtmlx-2.5-pro/imgs/");
                mygrid.setHeader("&nbsp;,Order ID,Customer ID,Order Date,Freight,Ship Address");
                mygrid.setInitWidths("30,150,150,200,150,*");
                mygrid.setColAlign("right,left,left,left,left,left");
                mygrid.setColTypes("sub_row_grid,ro,ro,ro,ro,ro");
                mygrid.setSkin("dhx_skyblue");
                mygrid.init();
                mygrid.load("../PageAjax/OrderHandler.ashx", "json");

                mygrid.attachEvent("onSubGridLoaded", function(subgrid, rId, rInd, data) {
                    subgrid.setImagePath("../dhtmlx-2.5-pro/imgs/");
                    subgrid.setHeader("Product Name,Unit Price ID,Quantity");
                    subgrid.setInitWidths("150,150,150");
                    subgrid.setColAlign("left,left,left");
                    subgrid.setColTypes("ro,ro,ro");
                    subgrid.setSkin("dhx_skyblue");
                    subgrid.enableAutoHeight(true);
                    subgrid.setSizes(true);
                    subgrid.init();
                    subgrid.load("../PageAjax/OrderDetailHandler.ashx?OrderID=" + mygrid.cells(rId, 1).getValue(), "json");
                    return false;
                });
            }
        </script>

my OrderHandler.ashx code is:

SqlServerHelper.connectionString = "server=localhost;database=northwind;uid=sa;pwd=19781107;";

            DataTable dtOrder = SqlServerHelper.ExecuteDataset(CommandType.Text, "SELECT TOP 5 * FROM Orders").Tables[0];
            StringBuilder sb = new StringBuilder();
            if (dtOrder.Rows.Count == 0)
            {
                context.Response.Write("{rows:[]}");
            }
            else
            {
                int i = 0;
                sb.Append("{rows:[");
                foreach (DataRow dr in dtOrder.Rows)
                {
                    i++;
                    sb.Append("{id:").Append(i.ToString()).Append(",data:[");
                    sb.Append("\"").Append("../PageAjax/OrderDetailHandler.ashx?OrderID=" + dr["OrderID"].ToString()).Append("\",");
                    sb.Append("\"").Append(dr["OrderID"].ToString()).Append("\",");
                    sb.Append("\"").Append(dr["CustomerID"].ToString()).Append("\",");
                    sb.Append("\"").Append(DateTime.Parse(dr["OrderDate"].ToString()).ToString("yyyy-MM-dd")).Append("\",");
                    sb.Append("\"").Append(dr["Freight"].ToString()).Append("\",");
                    sb.Append("\"").Append(dr["ShipAddress"].ToString() + " , " + dr["ShipCity"].ToString() + " , " + dr["ShipCountry"].ToString()).Append("\"");
                    sb.Append("]},");
                }

                string json = sb.ToString();
                json = json.Substring(0, json.Length - 1) + "]}";
                context.Response.Write(json);
            }

my OrderDetailHandler.ashx code is :

string orderID = context.Request.QueryString["OrderID"];

            SqlServerHelper.connectionString = "server=localhost;database=northwind;uid=sa;pwd=19781107;";
            DataTable dtDetail = SqlServerHelper.ExecuteDataset(CommandType.Text, "SELECT * FROM [Order Details Extended] WHERE OrderID='" + orderID + "'").Tables[0];
            StringBuilder sb = new StringBuilder();
            if (dtDetail.Rows.Count == 0)
            {
                context.Response.Write("{rows:[]}");
            }
            else
            { 
                int i = 0;
                sb.Append("{rows:[");
                foreach (DataRow dr in dtDetail.Rows)
                {
                    i++;
                    sb.Append("{id:").Append(i.ToString()).Append(",data:[");
                    sb.Append("\"").Append(dr["ProductName"].ToString()).Append("\",");
                    sb.Append("\"").Append(dr["UnitPrice"].ToString()).Append("\",");
                    sb.Append("\"").Append(dr["Quantity"].ToString()).Append("\"");
                    sb.Append("]},");
                }

                string json = sb.ToString();
                json = json.Substring(0, json.Length - 1) + "]}";
                context.Response.Write(json);
            }

From this code, i find these question:
(1)when i first click “+” icon, occur a error, tell me data format is not right! why ??

(2)when i first click “+” icon, will Occurred two http requests, why ??

(3)when i first click “+” icon, subgrid will cover main grid, why ?? (at the second, subgrid show normal)

(4)How to control subgrid’s width? in my code, main grid show Horizontal scrollbar, so ugly!!

Please help me, Thank you very much!!!

#2

Try to use onSubGridCreated () event instead of onSubGridLoaded ()

http://docs.dhtmlx.com/doku.php?id=dhtmlxgrid:event_onsubgridcreated_onsubgridloaded

#3

Thank you very much, your answer help me solve the first and second questions, Thanks!

en…, by the way, can you help me solve the anther questions? thank you

#4

(3)when i first click “+” icon, subgrid will cover main grid, why ?? (at the second, subgrid show normal)

Unfortunately the issue cannot be reconstructed. PLease provide a completed demo.
docs.dhtmlx.com/doku.php?id=othe … leted_demo

(4)How to control subgrid’s width? in my code, main grid show Horizontal scrollbar, so ugly!!

Try to use setInitWidthsP() method. It will allow you to to set the width of your subgrid’s columns in percentages.
docs.dhtmlx.com/doku.php?id=dhtm … nitwidthsp