Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
80
create a dynamic ultrawebgrid
posted

Hi, I need some help, how can i create a dynamic grid using a list and databind? what i have so far is the following: I have a grid that display day and time and shows two different colors if the cell value is a different value display blue else red. that's done.

what I need is if the list reads that there are two rooms on the header "Room" to genearte a second grid with the data similar as the first one that is already there.

Here is my aspx code:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<igtbl:UltraWebGrid ID="DashboardGridContainer2" runat="server" Height="186px"

 

 

Width="850px" EnableTheming="true"

 

 

OnInitializeLayout="DashboardGridContainer_InitializeLayout2" OnInitializeRow="DashboardGridContainer_InitializeRow2"

 

 

onprerender="DashboardGridContainer2_PreRender">

 

 

<Bands>

 

 

<igtbl:UltraGridBand CellClickAction="CellSelect" SelectTypeCell="Single" RowSizing="Free" AllowRowNumbering="Continuous">

 

 

<AddNewRow View="NotSet" Visible="NotSet">

 

 

</AddNewRow>

 

 

</igtbl:UltraGridBand>

 

 

</Bands>

<

 

DisplayLayout Version="4.00" SelectTypeRowDefault="Extended" Name="GridSummary" AllowSortingDefault="OnClient" AllowColSizingDefault="Free" RowHeightDefault="20px" TableLayout="Fixed" RowSelectorsDefault="No" AllowColumnMovingDefault="OnServer" HeaderClickActionDefault="SortMulti" StationaryMargins="Header" BorderCollapseDefault="Separate" StationaryMarginsOutlookGroupBy="True">

<

 

ClientSideEvents MouseOverHandler="Over" MouseOutHandler="Out" />

<

 

FrameStyle BackColor="Window" BorderColor="Transparent" BorderWidth="1px"

 

 

BorderStyle="None" Font-Names="Microsoft Sans Serif" Font-Size="8.25pt"

 

 

Height="186px" Width="850px"></FrameStyle>

<

 

Pager MinimumPagesForDisplay="2">

<

 

PagerStyle BackColor="LightGray" BorderWidth="1px" BorderStyle="Solid">

<

 

BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px"></BorderDetails>

</

 

PagerStyle>

</

 

Pager>

<

 

EditCellStyleDefault BorderWidth="0px" BorderStyle="None"></EditCellStyleDefault>

<

 

FooterStyleDefault BackColor="LightGray" BorderWidth="1px" BorderStyle="Solid">

<

 

BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px"></BorderDetails>

</

 

FooterStyleDefault>

<

 

HeaderStyleDefault HorizontalAlign="Left" BackColor="LightGray" BorderStyle="Solid">

<

 

BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px"></BorderDetails>

</

 

HeaderStyleDefault>

<

 

RowStyleDefault BackColor="Window" BorderColor="Silver" BorderWidth="1px" BorderStyle="Solid" Font-Names="Microsoft Sans Serif" Font-Size="11pt">

<Padding Left="3px"></Padding>

<

 

BorderDetails ColorLeft="Window" ColorTop="Window"></BorderDetails>

</

 

RowStyleDefault

>

<

 

 

GroupByRowStyleDefault BackColor="Control" BorderColor="Window"></GroupByRowStyleDefault

>

<

 

 

GroupByBox Hidden

="True">

<

 

 

BoxStyle BackColor="ActiveBorder" BorderColor="Window"></BoxStyle

>

</

 

 

GroupByBox

>

<

 

 

AddNewBox

>

<

 

 

BoxStyle BackColor="Window" BorderColor="InactiveCaption" BorderWidth="1px" BorderStyle

="Solid">

<

 

 

BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px"></BorderDetails

>

</

 

 

BoxStyle

>

</

 

 

AddNewBox

>

<

 

 

ActivationObject BorderColor="" BorderWidth=""></ActivationObject

>

<

 

 

FilterOptionsDefault

>

<

 

 

FilterDropDownStyle CustomRules="overflow:auto;" BackColor="White" BorderColor="Silver" BorderWidth="1px" BorderStyle="Solid" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Size="11px" Height="300px" Width

="200px">

<

 

 

Padding Left="2px"></Padding

>

</

 

 

FilterDropDownStyle

>

<

 

 

FilterHighlightRowStyle BackColor="#151C55" ForeColor="White"></FilterHighlightRowStyle

>

<

 

 

FilterOperandDropDownStyle CustomRules="overflow:auto;" BackColor="White" BorderColor="Silver" BorderWidth="1px" BorderStyle="Solid" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Size

="11px">

<

 

 

Padding Left="2px"></Padding

>

</

 

 

FilterOperandDropDownStyle

>

</

 

 

FilterOptionsDefault

>

</

 

 

DisplayLayout

>

</

 

 

igtbl:UltraWebGrid

>

<

 

 

script type="text/javascript" language="javascript">

 

 

function

Over(tableName, itemName, type)

{

 

 

if

(type == 0)

{

 

// Are we over a cell

 

 

var

row = igtbl_getRowById(itemName);

row.setSelected(

 

true

);

}

}

 

 

function

Out(tableName, itemName, type)

{

 

 

if

(type == 0)

{

 

// Are we over a cell

 

 

var

row = igtbl_getRowById(itemName);

 

 

var grid= igtbl_getGridById(row.gridId);

// Get the grid

 

 

var rowActive = grid.getActiveRow();

// Get the current active row

 

 

if (rowActive != null

)

{

 

 

// We verify if there is a selection made by click, if there is, we let it selected

 

 

if

(rowActive.Id != row.Id)

row.setSelected(

 

false

);

}

 

 

else

row.setSelected(

 

false

);

}

}

 

 

</script

>

 

 

 

</td

>

 

 

 

</tr

>

 

 

 

</table

>

 

 

</div>

Now, here is my .cs code:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

protected

 

 

void DashboardGridContainer2_PreRender(object sender, EventArgs

e)

{

 

 

Int32

_level = 2;

 

 

 

if (ConfigurationManager.AppSettings["WSE3enable"] == "true"

)

{

token =

 

new UsernameToken(ConfigurationManager.AppSettings["username"], ConfigurationManager.AppSettings["password"], PasswordOption

.SendPlainText);

 

 

//Apply Security Token to web service

wse.SetClientCredential(token);

 

 

//Set Client policy to web service

wse.SetPolicy(

 

"ClientPolicy"

);

}

 

 

//Set Security Token

 

 

if (ConfigurationManager.AppSettings["WSE3enable"] == "true"

)

{

token =

 

new UsernameToken(ConfigurationManager.AppSettings["username"], ConfigurationManager.AppSettings["password"], PasswordOption

.SendPlainText);

 

 

//Apply Security Token to web service

wse.SetClientCredential(token);

 

 

//Set Client policy to web service

wse.SetPolicy(

 

"ClientPolicy"

);

}

 

 

List<GetACADDE> list = new List<GetACADDE

>(wse3.getACADDE(SessionVal, SessionCampus, SessionBuilding, SessionRoom, _level));

 

 

//this.DashboardGridContainer1.Columns

 

 

 

foreach (GetACADDE course in

list)

{

 

 

string

startHour, endHour;

 

 

string

startMinute, endMinute;

 

 

string

startTime, endTime;

 

 

try

{

 

 

// extract hours and minutes

startHour = course.StartTime.Split(

 

':'

)[0];

startMinute = course.StartTime.Split(

 

':'

)[1];

endHour = course.EndTime.Split(

 

':'

)[0];

endMinute = course.EndTime.Split(

 

':'

)[1];

 

 

// round hours and minutes

 

 

if (int

.Parse(startMinute) < 30)

 

 

if (int

.Parse(startMinute) < 15)

startMinute =

 

"00"

;

 

 

else

startMinute =

 

"30"

;

 

 

else

 

 

if (int

.Parse(startMinute) < 45)

startMinute =

 

"30"

;

 

 

else

{

startHour =

 

String.Format("{0:00}", int

.Parse(startHour) + 1);

startMinute =

 

"00"

;

}

 

 

if (int

.Parse(endMinute) < 30)

 

 

if (int

.Parse(endMinute) < 15)

endMinute =

 

"00"

;

 

 

else

endMinute =

 

"30"

;

 

 

else

 

 

if (int

.Parse(endMinute) < 45)

endMinute =

 

"30"

;

 

 

else

{

endHour =

 

String.Format("{0:00}", int

.Parse(endHour) + 1);

endMinute =

 

"00"

;

}

startTime = startHour +

 

":"

+ startMinute;

endTime = endHour +

 

":"

+ endMinute;

 

 

//original code color cell loop

 

 

//for (int i = ScheduleTypes.TimeDictionary[startTime]; i <= ScheduleTypes.TimeDictionary[endTime]; i++)

 

 

//this.DashboardGridContainer2.Rows[ScheduleTypes.WeekDayDictionary[course.day]].Cells[i].Style.BackColor = System.Drawing.Color.Blue;

 

 

 

//int count = DashboardGridContainer2.Rows.Count;

 

 

//for(int i = ScheduleTypes.TimeDictionary[startTime]; i <=count; i++)

 

 

for (int i = ScheduleTypes.TimeDictionary[startTime]; i <= ScheduleTypes

.TimeDictionary[endTime]; i++)

{

 

 

//if (this.DashboardGridContainer2.DisplayLayout.Bands.FromKey("Section") != "M")

 

 

//if(this.DashboardGridContainer2.Columns.FromKey("Section".Substring(0,1).StartsWith!= "M"))

 

 

//this.DashboardGridContainer2.Rows[0].Cells.FromKey("Section");

 

 

//string cellsValue;

 

 

if (course.Section.StartsWith("S") || course.Section.StartsWith("M"

))

{

 

 

this.DashboardGridContainer2.Rows[ScheduleTypes.WeekDayDictionary[course.day]].Cells[i].Style.BackColor = System.Drawing.Color

.Red;

}

 

 

else

{

 

 

this.DashboardGridContainer2.Rows[ScheduleTypes.WeekDayDictionary[course.day]].Cells[i].Style.BackColor = System.Drawing.Color

.Blue;

}

}

 

 

 

//**************Color the grid******************************

 

 

this.DashboardGridContainer2.DisplayLayout.HeaderStyleDefault.BackColor = System.Drawing.Color

.Green;

 

 

this.DashboardGridContainer2.DisplayLayout.HeaderStyleDefault.ForeColor = System.Drawing.Color

.White;

 

 

this.DashboardGridContainer2.DisplayLayout.RowStyleDefault.BackColor = System.Drawing.Color

.WhiteSmoke;

 

 

this.DashboardGridContainer2.DisplayLayout.RowAlternateStyleDefault.BackColor = System.Drawing.Color

.White;

 

 

//*****************End color grid***************************

 

 

 

////**********this is a test****************************

 

 

//for (int x = ScheduleTypes.TimeDictionary[startTime]; x <= ScheduleTypes.TimeDictionary[endTime]; x++)

 

 

// this.DashboardGridContainer2.Bands[12].CellClickAction = CellClickAction.CellSelect;

 

 

//added this code to test ***this makes the grid wider/bigger*************

 

 

//this.DashboardGridContainer2.DataKeys.ToString();

 

 

//this.DashboardGridContainer2.Columns.FromKey("Section").CellStyle.BackColor.A.ToString();

 

 

//********************************

 

 

//this fixes the width of the Weekdays

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.WeekDayDictionary[course.day]].Width = Unit

.Pixel(85);

 

 

//this fixes the width of the Times

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["07:00"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["07:30"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["08:00"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["08:30"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["09:00"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["09:30"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["10:00"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["10:30"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["11:00"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["11:30"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["12:00"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["12:30"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["13:00"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["13:30"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["14:00"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["14:30"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["15:00"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["15:30"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["16:00"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["16:30"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["17:00"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["17:30"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["18:00"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["18:30"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["19:00"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["19:30"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["20:00"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["20:30"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["21:00"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["21:30"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["22:00"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["22:30"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.TimeDictionary["23:00"]].Width = Unit

.Pixel(47);

 

 

this.DashboardGridContainer2.Columns[ScheduleTypes.WeekDayDictionary[course.day]].Header.Fixed = true

;

}

 

 

catch (Exception

ex)

{

 

 

Console

.WriteLine(ex.ToString());

}

}

}

how can I generate another grid but dynamically that will show the data depending on the "Room" value, if there are more than 2 "Rooms" geneate another datagrid?

please help

  • 2677
    posted

    Hello,

    If you want to create a dynamic grid, you will have to have some sort of a container (div/ tr etc.) that is run at server to add it to.   Once you have a container, it is easy.  Here is the code you will need at bare minimum.

    dynamicGrid = new UltraWebGrid("DynamicGrid");
    dynamicGrid.DataSource = this.TestData();
    dynamicGrid.DataBind();
    this.MainContent.Controls.Add(dynamicGrid);

    You will see that I create a grid, set its datasource, and then databind.  Then, I add it to MainContent which in my case is a div which is runat=server.

    That will get you a default grid on the screen.  If you are using app styling in the application, the grid will automatically pick up those styles.  If you are not, you will have to do some of these styles via code like dynamicGrid.DisplayLayout.RowAlternateStyleDefault = some style;

    Also, one thing that I noticed.  You are doing a lot of extra looping which is un necessary.  for the row based settings, you can handle the Grids InitializeRow event.  This will loop through each row of the grid,  then you can make your check in there and set the row backcolor accordingly.  you can also do it cell by cell if you want by going e.Row.Cells[0].Style.BackColor and loop through them all. 

     void dynamicGrid_InitializeRow(object sender, RowEventArgs e)
            {
                if (someCondition)
                {
                    e.Row.Style.BackColor = Color.Blue;
                }
            }

    Another thing that might be of use is the grids InitializeLayout Event.  This is just a good location to put grid specific code like how you set the widths on columns.  It is fired after binding the grid to its datasource. 

     If you want to use the same events on the dynamic grid, you can use the += syntax to add the event to the grid.

    dynamicGrid.InitializeRow += new InitializeRowEventHandler(dynamicGrid_InitializeRow);

    I hope this helps.  Any questions please let me know.