IWETHEY v. 0.3.0 | TODO
1,095 registered users | 0 active users | 1 LpH | Statistics
Login | Create New User
IWETHEY Banner

Welcome to IWETHEY!

IWETHEY Home / IWETHEY Board / Theory and Practice of Programming Forum / How is "sortable" implemented?
Post #306,133
by altmann
3/24/09 7:08:37 PM
Reply
New How is "sortable" implemented?
Is it all client side or is there a server round trip? If the former, look at the JS that is generated for the column header or whatever it is you click to sort and see what it is doing.

Also, you could have some sort of conflict with any styling generated by the control and set by its properties vs. and styling you are applying via your separate CSS. This article discusses that:

http://devcenter.inf...px?ArticleID=8643

Post #306,139
by lincoln
3/24/09 9:35:47 PM
Reply
New Re: How is "sortable" implemented?
The sorting capability is set in the VB.Net code behind, but when running the program it is all done within the grid on the client. There is no round trip to the server when the user clicks on the column header to resort the data, nor is there any Javascript on the page being used by the control.

Here is the code to allow sorting: 

        '--- set up so that the YEAR column will be used to sort the data in the grid

        WebGrid.DisplayLayout.AllowSortingDefault = AllowSorting.OnClient

        WebGrid.DisplayLayout.HeaderClickActionDefault = HeaderClickAction.SortSingle

        WebGrid.Columns.FromKey("Year").IsSortable()

        WebGrid.Columns.FromKey("Year").SortIndicator = SortIndicator.Ascending

There is no styling for the grid in the CSS - I only use the CSS for sizing and positioning.




"Chicago to my mind was the only place to be. ... I above all liked the city because it was filled with people all a-bustle, and the clatter of hooves and carriages, and with delivery wagons and drays and peddlers and the boom and clank of freight trains. And when those black clouds came sailing in from the west, pouring thunderstorms upon us so that you couldn't hear the cries or curses of humankind, I liked that best of all. Chicago could stand up to the worst God had to offer. I understood why it was built--a place for trade, of course, with railroads and ships and so on, but mostly to give all of us a magnitude of defiance that is not provided by one house on the plains. And the plains is where those storms come from."

-- E.L. Doctorow
Post #306,146
by jay
3/24/09 10:49:05 PM
Reply
New Looks like a .NET control
I googled it and it looks like it is a .NET control that runs client side.

In any case, if the same problem is happening in IE and Firefox, then the control is doing something. It may be moving things around through the document object model client side, and in the process messing up the style information which is also in the DOM. Or it may be something specific to .NET.

If your styles are named, try changing the names and see if it goes away. It could be that the UltraWebGrid happens to use the same name internally.

If that doesn't help, trying removing elements from the page until the problem goes away. That should give you some idea what it is conflicting with. Think of it as an undefined scientific problem, where you experiment at whim until you find some pattern you can use to serve as a platform for tracking down the source.

Jay
Post #306,190
by lincoln
3/25/09 5:46:09 PM
Reply
New correct
I don't have Firefox installed; will have to get permission from our hardware guy to grant me temporary Admin rights to my PC.

I have 3 Infragistics controls on the form - 1 grid and 2 Webboxes, each contained within a separate <div>. I have everything between the "<form></form>" tags contained within a <div> called "divContainer", which is set at 565px high by 1000px wide.

I hard-coded each <div> around the 2 webboxes to be 200px high by 320px wide. For the <div> around the grid I set it to 245px high by 840px wide, and I have the grid itself set to Height="225px" Width="800px". (I have a vertical "divSidebar" on the left side of the page set at 155px wide by 100% high). At the bottom of the page I have a "divCopyright" which contains only a <asp:Label> with a copyright statement. Should I hard-code a height in pixels for this?

Now when I click on the column header to sort the grid, neither of the webboxes resize - and the grid no longer tries to resize itself horizontally; only vertically. I can see the copyright statement momentarily get pushed down off-screen as the grid makes itself taller, then returns to starting size all in less than 1 second.




"Chicago to my mind was the only place to be. ... I above all liked the city because it was filled with people all a-bustle, and the clatter of hooves and carriages, and with delivery wagons and drays and peddlers and the boom and clank of freight trains. And when those black clouds came sailing in from the west, pouring thunderstorms upon us so that you couldn't hear the cries or curses of humankind, I liked that best of all. Chicago could stand up to the worst God had to offer. I understood why it was built--a place for trade, of course, with railroads and ships and so on, but mostly to give all of us a magnitude of defiance that is not provided by one house on the plains. And the plains is where those storms come from."

-- E.L. Doctorow
Post #306,220
by jay
3/26/09 9:06:33 AM
Reply
New It's worth trying
Should I hard-code a height in pixels for this?

It's worth trying. Another thing worth trying is taking all of the fixed pixel sizes out of the page and see if that helps.

Also, look at your padding and margins, I've seen weird behavior in situations where the content + padding + margins was actually bigger then the fixed space allocated.

Based on what you have written, I would guess that that there is a conflict somewhere between how the grid controls it's size and how you have your page setup. But I've never used that specific grid control and there are several things that could be causing the symptoms you are seeing.

Jay
Post #306,222
by lincoln
3/26/09 9:19:21 AM
Reply
New Re: It's worth trying
I don't have any padding or margins explicitly set in the CSS or .ASPX file, such as "margin: 5%; padding: 1;". I originally had everything for size and position set in percentages, i.e. "left: 16%; width: 43%;".

I've added everything up and confirmed that nothing would extend beyond the 565px height and 1000px width.





"Chicago to my mind was the only place to be. ... I above all liked the city because it was filled with people all a-bustle, and the clatter of hooves and carriages, and with delivery wagons and drays and peddlers and the boom and clank of freight trains. And when those black clouds came sailing in from the west, pouring thunderstorms upon us so that you couldn't hear the cries or curses of humankind, I liked that best of all. Chicago could stand up to the worst God had to offer. I understood why it was built--a place for trade, of course, with railroads and ships and so on, but mostly to give all of us a magnitude of defiance that is not provided by one house on the plains. And the plains is where those storms come from."

-- E.L. Doctorow
Post #306,230
by lincoln
3/26/09 10:22:19 AM
Reply
New Here's the page layout 
<form id="PensionHistory" runat="server">
    <div id="divContainer">
        <asp:ScriptManager ID="ScriptManager" runat="server"> </asp:ScriptManager>
        <igmisc:WebPageStyler ID="WebPageStyler" runat="server"  EnableAppStyling="True" StyleSetName="Nautilus" StyleSetPath="/ig_common/20082CLR20/styles"/>                                      
        
        <div id="divSidebar">
            <div id="divTimeInfo">
                <igmisc:WebGroupBox ID="grpTimeInfo" runat="server" EnableAppStyling="False">
                    <Template>
                        <asp:Label ID="lblDate" cssClass="HeaderDate" runat="server"></asp:Label>
                        <asp:Label ID="lblTime" CssClass="HeaderTime" runat="server"></asp:Label>
                        <asp:Label ID="lblEmpName" CssClass="EmpName" runat="server"></asp:Label>
                    </Template>
                </igmisc:WebGroupBox>
            </div>  <!-- divtimeInfo -->
            <div id="divButtonPanel" class="CommonButtonPanel">
                <igmisc:WebGroupBox ID="grpButtonPanel" runat="server" EnableAppStyling="False">
                    <Template>
                        <asp:ImageButton ID="btnBack" cssClass="BackButton" runat="server" ImageUrl="~/Images/BTN_Back.gif"/>
                        <asp:ImageButton ID="btnLogout" cssClass="LogoutButton" runat="server" ImageUrl="~/Images/BTN_Logout.gif"/>
                        <asp:Button ID="btnHome" CssClass="HomeButton" runat="server" Text="Home" />
                    </Template>           
                </igmisc:WebGroupBox>
            </div>  <!-- divCommonButtonPanel -->
        </div>  <!-- divSideBar -->
        
        <div id="divContentNoHeader">
            <div id="divEmployeePanel" style="height: 198px; width: 400px;">
                <igmisc:WebGroupBox ID="grpMember" runat="server" CssClass="grpBox" StyleSetName="Nautilus" Text="" TitleAlignment="Left">
                    <Template>
                    <asp:Label CssClass="CreditPanelLabels" ID="Label6" runat="server" style="top: 2%;">Name</asp:Label>
                    <asp:Label CssClass="CreditPanelLabels" ID="Label7" runat="server" style="top: 11%;">Address</asp:Label>        
                    <asp:Label CssClass="CreditPanelLabels" ID="Label8" runat="server" style="top: 20%;">City/State/Zip</asp:Label>
                    <asp:Label CssClass="CreditPanelLabels" ID="Label9" runat="server" style="top: 29%;">Phone</asp:Label>        
                    <asp:Label CssClass="CreditPanelLabels" ID="Label10" runat="server" style="top: 38%;">Mem. ID#</asp:Label>
                    <asp:Label CssClass="CreditPanelLabels" ID="Label11" runat="server" style="top: 47%;">Birthday</asp:Label>
                    <asp:Label CssClass="CreditPanelLabels" ID="Label12" runat="server" style="top: 56%;">Age</asp:Label>    
                    <asp:Label CssClass="CreditPanelLabels" ID="Label13" runat="server" style="top: 65%;">Marital Status</asp:Label>
                    <asp:Label CssClass="CreditPanelLabels" ID="Label25" runat="server" style="top: 74%;">Break</asp:Label>
                    <asp:Label CssClass="CreditPanelLabels" ID="Label26" runat="server" style="top: 83%;">Status</asp:Label>
                    <asp:Label CssClass="CreditPanelLabels" ID="Label17" runat="server" style="top: 92%;">SSN</asp:Label>
                
                    <asp:Label CssClass="MemberInfo" ID="lblName" runat="server" style="top: 2%;"></asp:Label>
                    <asp:Label CssClass="MemberInfo" ID="lblAddress" runat="server" style="top: 11%;"></asp:Label>
                    <asp:Label CssClass="MemberInfo" ID="lblCityStateZip" runat="server" style="top: 20%;"></asp:Label>
                    <asp:Label CssClass="MemberInfo" ID="lblPhone" runat="server" style="top: 29%;"></asp:Label>
                    <asp:Label CssClass="MemberInfo" ID="lblMemID" runat="server" style="top: 38%;"></asp:Label>
                    <asp:Label CssClass="MemberInfo" ID="lblBirthday" runat="server" style="top: 47%;"></asp:Label>
                    <asp:Label CssClass="MemberInfo" ID="lblAge" runat="server" style="top: 56%;"></asp:Label>
                    <asp:Label CssClass="MemberInfo" ID="lblMaritalStatus" runat="server" style="top: 65%;"></asp:Label>
                    <asp:Label CssClass="MemberInfo" ID="lblBreak" runat="server" style="top: 74%;"></asp:Label>
                    <asp:Label CssClass="MemberInfo" ID="lblStatus" runat="server" style="top: 83%;"></asp:Label>
                    <asp:Label CssClass="MemberInfo" ID="lblSSN" runat="server" style="top: 92%;"></asp:Label>
                    </Template>
                </igmisc:WebGroupBox>
            </div>  <!-- employee panel -->
    
            <div id="divCreditPanel" style="height: 198px; width: 200px;">
                <igmisc:WebGroupBox ID="grpCredit" runat="server" CssClass="grpBox" StyleSetName="Nautilus" Text="" TitleAlignment="Left">
                    <Template>
                    <asp:Label CssClass="CreditPanelLabels" ID="Label1" runat="server" Text="Past" style="top: 2%;"></asp:Label>
                    <asp:Label CssClass="CreditPanelLabels" ID="Label2" runat="server" Text="Middle" style="top: 11%;"></asp:Label>
                    <asp:Label CssClass="CreditPanelLabels" ID="Label3" runat="server" Text="Future" style="top: 20%;"></asp:Label>
                    <asp:Label CssClass="CreditPanelLabels" ID="Label4" runat="server" Text="Bank" style="top: 29%;"></asp:Label>
                    <asp:Label CssClass="CreditPanelLabels" ID="Label5" runat="server" Text="Total" style="top: 38%;"></asp:Label>
                    <asp:Label CssClass="CreditPanelLabels" ID="Label14" runat="server" Text="Vesting" style="top: 47%;"></asp:Label>
                    <asp:Label CssClass="CreditPanelLabels" ID="Label15" runat="server" Text="V Status" style="top: 56%;"></asp:Label>
                    <asp:Label CssClass="CreditPanelLabels" ID="Label16" runat="server" Text="Vest YR" style="top: 65%;"></asp:Label>
                
                    <asp:Label CssClass="CreditInfo" ID="lblPast" runat="server" style="top: 2%;"></asp:Label>            
                    <asp:Label CssClass="CreditInfo" ID="lblMiddle" runat="server" style="top: 11%;"></asp:Label>
                    <asp:Label CssClass="CreditInfo" ID="lblFuture" runat="server" style="top: 20%;"></asp:Label>
                    <asp:Label CssClass="CreditInfo" ID="lblBank" runat="server" style="top: 29%;"></asp:Label>       
                    <asp:Label CssClass="CreditInfo" ID="lblTotal" runat="server" style="top: 38%;"></asp:Label>            
                    <asp:Label CssClass="CreditInfo" ID="lblVesting" runat="server" style="top: 47%;"></asp:Label>            
                    <asp:Label CssClass="CreditInfo" ID="lblVestingStatus" runat="server" style="top: 56%;"></asp:Label>            
                    <asp:Label CssClass="CreditInfo" ID="lblVestYear" runat="server" style="top: 65%;"></asp:Label>
                    </Template>
                </igmisc:WebGroupBox>
            </div> <!-- credit panel -->
       
            <div id="divEmpGrid" style="position: absolute; height: 245px; width: 840px;">
                <igtbl:UltraWebGrid ID="WebGrid" runat="server" EnableTheming="True" StyleSetName="Nautilus" Height="225px" Width="800px">
                    <Bands>
                        <igtbl:UltraGridBand>
                            <AddNewRow View="NotSet" Visible="NotSet"></AddNewRow>
                        </igtbl:UltraGridBand>
                    </Bands>
                    <DisplayLayout BorderCollapseDefault="Separate" Name="WebGrid" RowHeightDefault="20px" Version="4.00">                   
                        <ActivationObject BorderColor="" BorderWidth=""></ActivationObject>
                        <%--<FrameStyle Height="63%" Width="90%"></FrameStyle>--%>
                        <FrameStyle Height="225px" Width="840px"></FrameStyle>
                        <FooterStyleDefault BackColor="#84A2C6"></FooterStyleDefault>
                    </DisplayLayout>
                </igtbl:UltraWebGrid>
            </div>   <!-- divEmpGrid -->
            
        </div> <!-- divContentNoHeader -->                    
        
        <div id="divCopyright" class="divCopyright">
            <asp:Label ID="lblCopyright" runat="server">Copyright 2009 BICC Systems, Inc. All Rights Reserved</asp:Label>
        </div>   <!-- divCopyright -->            
        
    </div>  <!-- divContainer -->
    
</form>



"Chicago to my mind was the only place to be. ... I above all liked the city because it was filled with people all a-bustle, and the clatter of hooves and carriages, and with delivery wagons and drays and peddlers and the boom and clank of freight trains. And when those black clouds came sailing in from the west, pouring thunderstorms upon us so that you couldn't hear the cries or curses of humankind, I liked that best of all. Chicago could stand up to the worst God had to offer. I understood why it was built--a place for trade, of course, with railroads and ships and so on, but mostly to give all of us a magnitude of defiance that is not provided by one house on the plains. And the plains is where those storms come from." -- E.L. Doctorow
Post #306,248
by altmann
3/26/09 6:11:51 PM
Reply
New Re: Here's the page layout
It looks like you are both setting some CSS yourself and enabling Infragistics' "Application Styling Framework" on a number of those controls. There could be a conflict between the CSS generated by those two mechanisms.

Since the sort action that triggers this problem is client side, it would be more helpful to see the client side HTML generated by this aspx page and any style sheets referenced by that client side code.

You could also look at that client side code using a DOM inspector like that in the IE Developer Toolbar or similar tools in other browsers to see what is changing in the style of a given control when you sort.
Post #306,275
by lincoln
3/27/09 9:12:07 AM
Reply
New Here's the CSS for all elements on the page
@media screen, print, projection
{

body
{
position: absolute;
font-family: Arial, 'Times New Roman', Sans-Serif, Verdana, Tahoma;
font-size: 62.5%;
background-image: url(../../Images/BGD_Brushed_Metal.jpg);
}

/* Style Classes used on all Search web pages */

#divSidebar
{
position: absolute;
left: 0%;
top: 0%;
width: 160px;
height: 565px;
background-color: #84A2C6;
border: Groove 1px Black;
}

#divTimeInfo
{
position: absolute;
top: 2%;
left: 2%;
width: 94%;
height: 17%;
background-color: #E9E9E9;
}

#grpTimeInfo
{
position: absolute;
top: 0%;
left: 0%;
Height: 100%;
background-color: #E9E9E9;
border: 5px ridge #97B1FF;
width: 95%;
}

.HeaderDate
{
position: absolute;
top: 10%;
left: 2%;
width: 75%;
font-size: 7pt;
text-align: left;
font-weight: bold;
background-color: Transparent;
}

.HeaderTime
{
position: absolute;
top: 25%;
left: 2%;
width: 75%;
font-size: 7pt;
text-align: left;
font-weight: bold;
background-color: Transparent;
}

.EmpName
{
position: absolute;
top: 35%;
left: 2%;
width: 95%;
font-size: 7pt;
text-align: left;
font-weight: bold;
background-color: Transparent;
}

.CommonButtonPanel
{
position: absolute;
left: 2%;
top: 22%;
width: 94%;
height: 12%;
background-color: Transparent;
}

#grpButtonPanel
{
position: absolute;
top: 0%;
left: 0%;
Height: 100%;
background-color: #E9E9E9;
border: 5px ridge #97B1FF;
width: 95%;
}

.BackButton
{
position: absolute;
top: 55%;
cursor: hand;
left: 5%;
}

.HomeButton
{
position: absolute;
top: 10%;
cursor: hand;
left: 5%;
font-weight: bold;
}

.LogoutButton
{
position: absolute;
top: 68%;
cursor: hand;
left: 5%;
}

.divCopyright
{
position: absolute;
top: 97%;
left: 20%;
height: 10%;
width: 50%;
text-align: center;
font-weight: bold;
font-size: 8pt;
}

/* Style Classes shared by the SearchResults and PensionHistory pages */

#divEmpGrid
{
position: absolute;
top: 37%;
left: 17%;
width: 83%;
height: 63%;
}

/* Style Classes shared by the PensionHistory and PensionHistoryDetail pages */

.grpBox
{
position:absolute;
top: 0%;
left: 0%;
Height: 100%;
Width: 100%;
border: 1px #000000 solid;
border-style: groove;
}

.CreditPanelLabels
{
position: absolute;
left: 3%;
text-align: left;
font-weight: bold;
font-size: 8pt;
font-family: Arial, 'Times New Roman', Sans-Serif;
}

.MemberInfo
{
position: absolute;
left: 32%;
width: 70%;
text-align: left;
vertical-align: middle;
font-size: 8pt;
font-family: Arial, 'Times New Roman', Sans-Serif;
}

.CreditInfo
{
position: absolute;
left: 32%;
width: 80%;
text-align: left;
vertical-align: middle;
font-size: 8pt;
font-family: Arial, 'Times New Roman', Sans-Serif;
}

#divEmployeePanel
{
background-color: #99CCFF;
position: absolute;
left: 17%;
top: 1%;
height: 35%;
width: 40%;
}

#divContentNoHeader
{
top: 2%;
left: 410px;
height: 90%;
width: 590px;
}

#divCreditPanel
{
background-color: #99CCFF;
position: absolute;
left: 58%;
top: 1%;
height: 35%;
width: 25%;
}

.divCopyright
{
position: absolute;
top: 97%;
left: 20%;
height: 10%;
width: 50%;
text-align: center;
font-weight: bold;
font-size: 8pt;
}

}




"Chicago to my mind was the only place to be. ... I above all liked the city because it was filled with people all a-bustle, and the clatter of hooves and carriages, and with delivery wagons and drays and peddlers and the boom and clank of freight trains. And when those black clouds came sailing in from the west, pouring thunderstorms upon us so that you couldn't hear the cries or curses of humankind, I liked that best of all. Chicago could stand up to the worst God had to offer. I understood why it was built--a place for trade, of course, with railroads and ships and so on, but mostly to give all of us a magnitude of defiance that is not provided by one house on the plains. And the plains is where those storms come from."

-- E.L. Doctorow
Post #306,282
by jay
3/27/09 9:56:47 AM
3/28/09 3:29:38 PM
Reply
New Nothing jumps out
Nothing jumps out as obviously wrong. And without the underlying .NET controls, there isn't much I can do to test it here.

Jay
Expand Edited by jay March 28, 2009, 03:29:38 PM EDT
Expand All History
     This just blows my mind - (lincoln) - (14) - March 24, 2009, 05:13:44 PM EDT
         any chance the controls are being sorted? -NT - (boxley) - March 24, 2009, 07:02:54 PM EDT
         How is "sortable" implemented? - (altmann) - (9) - March 24, 2009, 07:08:37 PM EDT
             Re: How is "sortable" implemented? - (lincoln) - (8) - March 24, 2009, 09:35:47 PM EDT
                 Looks like a .NET control - (jay) - (7) - March 24, 2009, 10:49:05 PM EDT
                     correct - (lincoln) - (6) - March 25, 2009, 05:46:09 PM EDT
                         It's worth trying - (jay) - (5) - March 26, 2009, 09:06:33 AM EDT
                             Re: It's worth trying - (lincoln) - March 26, 2009, 09:19:21 AM EDT
                             Here's the page layout - (lincoln) - (3) - March 26, 2009, 10:22:19 AM EDT
                                 Re: Here's the page layout - (altmann) - (1) - March 26, 2009, 06:11:51 PM EDT
                                     Here's the CSS for all elements on the page - (lincoln) - March 27, 2009, 09:12:07 AM EDT
                                 Nothing jumps out - (jay) - March 28, 2009, 03:29:38 PM EDT
         I finally gave up - (lincoln) - (2) - April 6, 2009, 12:16:40 PM EDT
             who said, "It flickers just like the other way" - (boxley) - (1) - April 6, 2009, 12:40:37 PM EDT
                 Re: who said, "It flickers just like the other way" - (lincoln) - April 6, 2009, 01:06:09 PM EDT

Any more detail than what's there and you'd have to have the magic software they use in movies to pull a license plate out of five pixels.
52 ms