Hierarchical Grid inside vertical splitter pane

Brian posted over 16 years ago

When I put a hierarchical grid inside a vertical splitter pane, the scrollbar for the splitter pane does not limit the size of the grid. The grid keeps enlarging and goes outside of the pane.

Here is my sample page.

Here is the code behind that populates the grid.

    DataSet ds = new DataSet();

    protected void Page_Load(object sender, EventArgs e)
    {
        uwgTest.DisplayLayout.ViewType = Infragistics.WebUI.UltraWebGrid.ViewType.Hierarchical;

        DataTable dt = new DataTable();
        dt.Columns.Add(new DataColumn("Region", typeof(string)));
        dt.Columns.Add(new DataColumn("Country", typeof(string)));

        DataRow newrow = null;

        newrow = dt.NewRow();
        newrow["Region"] = "Europe";
        newrow["Country"] = "Germany";
        dt.Rows.Add(newrow);
        newrow = dt.NewRow();
        newrow["Region"] = "Europe";
        newrow["Country"] = "France";
        dt.Rows.Add(newrow);
        newrow = dt.NewRow();
        newrow["Region"] = "Europe";
        newrow["Country"] = "Great Britain";
        dt.Rows.Add(newrow);
        newrow = dt.NewRow();
        newrow["Region"] = "Europe";
        newrow["Country"] = "Netherlands";
        dt.Rows.Add(newrow);

        newrow = dt.NewRow();
        newrow["Region"] = "Asia";
        newrow["Country"] = "China";
        dt.Rows.Add(newrow);

        newrow = dt.NewRow();
        newrow["Region"] = "Asia";
        newrow["Country"] = "China";
        dt.Rows.Add(newrow);

        newrow = dt.NewRow();
        newrow["Region"] = "Asia";
        newrow["Country"] = "Japan";
        dt.Rows.Add(newrow);

        newrow = dt.NewRow();
        newrow["Region"] = "Asia";
        newrow["Country"] = "Philipines";
        dt.Rows.Add(newrow);

        newrow = dt.NewRow();
        newrow["Region"] = "NA";
        newrow["Country"] = "US";
        dt.Rows.Add(newrow);

        newrow = dt.NewRow();
        newrow["Region"] = "NA";
        newrow["Country"] = "Canada";
        dt.Rows.Add(newrow);

        newrow = dt.NewRow();
        newrow["Region"] = "NA";
        newrow["Country"] = "Mexico";
        dt.Rows.Add(newrow);

        DataTable dt2 = new DataTable();
        dt2.Columns.Add(new DataColumn("Country", typeof(string)));
        dt2.Columns.Add(new DataColumn("City", typeof(string)));

        newrow = dt2.NewRow();
        newrow["Country"] = "Mexico";
        newrow["City"] = "Mexico City";
        dt2.Rows.Add(newrow);

        newrow = dt2.NewRow();
        newrow["Country"] = "US";
        newrow["City"] = "Chicago";
        dt2.Rows.Add(newrow);

        newrow = dt2.NewRow();
        newrow["Country"] = "US";
        newrow["City"] = "New York";
        dt2.Rows.Add(newrow);

        newrow = dt2.NewRow();
        newrow["Country"] = "US";
        newrow["City"] = "LA";
        dt2.Rows.Add(newrow);

        newrow = dt2.NewRow();
        newrow["Country"] = "US";
        newrow["City"] = "Boise";
        dt2.Rows.Add(newrow);

        newrow = dt2.NewRow();
        newrow["Country"] = "US";
        newrow["City"] = "Madison";
        dt2.Rows.Add(newrow);

        newrow = dt2.NewRow();
        newrow["Country"] = "US";
        newrow["City"] = "LaCrosse";
        dt2.Rows.Add(newrow);

        newrow = dt2.NewRow();
        newrow["Country"] = "US";
        newrow["City"] = "Milwaukee";
        dt2.Rows.Add(newrow);

        newrow = dt2.NewRow();
        newrow["Country"] = "US";
        newrow["City"] = "Downers Grove";
        dt2.Rows.Add(newrow);

        newrow = dt2.NewRow();
        newrow["Country"] = "US";
        newrow["City"] = "Lisle";
        dt2.Rows.Add(newrow);

        newrow = dt2.NewRow();
        newrow["Country"] = "US";
        newrow["City"] = "Naperville";
        dt2.Rows.Add(newrow);

        newrow = dt2.NewRow();
        newrow["Country"] = "US";
        newrow["City"] = "Waukegan";
        dt2.Rows.Add(newrow);

        newrow = dt2.NewRow();
        newrow["Country"] = "US";
        newrow["City"] = "Whitewater";
        dt2.Rows.Add(newrow);

        newrow = dt2.NewRow();
        newrow["Country"] = "US";
        newrow["City"] = "Glendale Heights";
        dt2.Rows.Add(newrow);

        newrow = dt2.NewRow();
        newrow["Country"] = "US";
        newrow["City"] = "Lombard";
        dt2.Rows.Add(newrow);

        newrow = dt2.NewRow();
        newrow["Country"] = "US";
        newrow["City"] = "Crystal Lake";
        dt2.Rows.Add(newrow);

        newrow = dt2.NewRow();
        newrow["Country"] = "US";
        newrow["City"] = "Algonquin";
        dt2.Rows.Add(newrow);

        newrow = dt2.NewRow();
        newrow["Country"] = "US";
        newrow["City"] = "Cary";
        dt2.Rows.Add(newrow);

        newrow = dt2.NewRow();
        newrow["Country"] = "US";
        newrow["City"] = "Harvard";
        dt2.Rows.Add(newrow);

        newrow = dt2.NewRow();
        newrow["Country"] = "US";
        newrow["City"] = "River Forest";
        dt2.Rows.Add(newrow);

        newrow = dt2.NewRow();
        newrow["Country"] = "US";
        newrow["City"] = "Hillside";
        dt2.Rows.Add(newrow);

        DataTable dt3 = new DataTable();
        dt3.Columns.Add(new DataColumn("City", typeof(string)));
        dt3.Columns.Add(new DataColumn("Building", typeof(string)));

        newrow = dt3.NewRow();
        newrow["City"] = "Chicago";
        newrow["Building"] = "John Hancock";
        dt3.Rows.Add(newrow);

        newrow = dt3.NewRow();
        newrow["City"] = "Chicago";
        newrow["Building"] = "Sears Tower";
        dt3.Rows.Add(newrow);

        newrow = dt3.NewRow();
        newrow["City"] = "Chicago";
        newrow["Building"] = "125 S. Wacker";
        dt3.Rows.Add(newrow);

        newrow = dt3.NewRow();
        newrow["City"] = "Lisle";
        newrow["Building"] = "5631 Elm St.";
        dt3.Rows.Add(newrow);

        newrow = dt3.NewRow();
        newrow["City"] = "Chicago";
        newrow["Building"] = "Building 1";
        dt3.Rows.Add(newrow);

        newrow = dt3.NewRow();
        newrow["City"] = "Chicago";
        newrow["Building"] = "Building 2";
        dt3.Rows.Add(newrow);

        newrow = dt3.NewRow();
        newrow["City"] = "Chicago";
        newrow["Building"] = "Building 3";
        dt3.Rows.Add(newrow);

        newrow = dt3.NewRow();
        newrow["City"] = "Chicago";
        newrow["Building"] = "Building 4";
        dt3.Rows.Add(newrow);

        newrow = dt3.NewRow();
        newrow["City"] = "Chicago";
        newrow["Building"] = "Building 5";
        dt3.Rows.Add(newrow);

        newrow = dt3.NewRow();
        newrow["City"] = "Chicago";
        newrow["Building"] = "Building 6";
        dt3.Rows.Add(newrow);

        newrow = dt3.NewRow();
        newrow["City"] = "Chicago";
        newrow["Building"] = "Building 7";
        dt3.Rows.Add(newrow);

        ds.Tables.Add(dt);
        ds.Tables.Add(dt2);
        ds.Tables.Add(dt3);

        ds.Relations.Add("Country_City", dt.Columns[1], dt2.Columns[0], false);
        ds.Relations.Add("City_Building", dt2.Columns[1], dt3.Columns[0], false);
        uwgTest.DataSource = ds;
        uwgTest.DataBind();

        uwgTest.Bands[0].AllowColSizing = Infragistics.WebUI.UltraWebGrid.AllowSizing.Free;
        uwgTest.Bands[1].AllowColSizing = Infragistics.WebUI.UltraWebGrid.AllowSizing.Free;
        uwgTest.Bands[2].AllowColSizing = Infragistics.WebUI.UltraWebGrid.AllowSizing.Free;
        uwgTest.Bands[0].DefaultColWidth = new Unit("300px");
        uwgTest.Bands[1].DefaultColWidth = new Unit("300px");
        uwgTest.Bands[2].DefaultColWidth = new Unit("300px");
    }

19308

[Infragistics] Tony Lombardo posted over 16 years ago

Try adding a style="position:reltive" to the container of the grid. If you're putting the grid directly inside of the splitter pane, try wrapping it with a div (and setting position:relative on the div).

-Tony
Cancel
Reply

Cancel