Questions on UI for ASP.NET AJAX Forum

1 answer

160 views

IE8: Header column widths out of sync with Item column widths when icon added

I've got a grid where one of the columns for each item adds an icon before the text of that column. It seems that this pushes the width of all of the item columns out so that the item widths are not the same as the header widths. I've managed to resolve this issue in IE6 & 7, but in IE8 I just can't get the column widths to sync up and I think there must be a better way to do this... I've tried going in and changing the column widths when the browser is IE8, but it just never seems to sync up - once I get one column synced with it's header, another column is out of alignment... Here's an example screenshot:

Grid Screenshot

Here's the aspx code:

    
            <telerik:RadGrid ID="RadGrid1" EnableViewState="true" runat="server" AllowSorting="True"   
        
                AutoGenerateColumns="false" Skin="WebBlue"   
        
                ClientSettings-EnableRowHoverStyle="true" OnItemDataBound="RadGrid_ItemDataBound"   
        
                Width="718px" Height="480px" OnNeedDataSource="RadGrid1_NeedDataSource"   
        
                AllowPaging="false" PageSize="100" OnDataBound="rgResults_DataBound">  
        
                <ClientSettings AllowColumnsReorder="False" EnablePostBackOnRowClick="True">  
        
                    <Resizing AllowColumnResize="true" EnableRealTimeResize="true" /> 
        
                    <Scrolling  AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" /> 
        
                    <Selecting AllowRowSelect="True" /> 
        
                </ClientSettings> 
        
                <MasterTableView DataKeyNames="Id" ShowHeadersWhenNoRecords="false"   
        
                    VirtualItemCount="100" ItemStyle-Font-Size="11px"   
        
                    HeaderStyle-CssClass="gvHeader">  
        
                    <Columns> 
        
                        <telerik:GridClientSelectColumn ButtonType="PushButton" Visible="False" CommandName="Select" Text="Select" UniqueName="column">  
        
                        </telerik:GridClientSelectColumn> 
        
                        <telerik:GridTemplateColumn HeaderText="PIC" UniqueName="colPic">  
        
                            <HeaderStyle Width="27px" Font-Size="10px"/>  
        
                            <ItemStyle Width="27px" HorizontalAlign="center" /> 
        
                            <ItemTemplate> 
        
                                <img alt="face" id="face" src="imageProcessor.ashx?x=<%# Eval("ID") %>" width="30" height="38" style="border:0px;">  
        
                            </ItemTemplate> 
        
                        </telerik:GridTemplateColumn> 
        
                        <telerik:GridTemplateColumn HeaderText="FLAGS" UniqueName="colFlags">  
        
                            <ItemStyle Width="40px" Wrap="false" Font-Size="10px"/>  
        
                            <HeaderStyle Width="40px" Font-Size="10px" /> 
        
                            <ItemTemplate> 
        
                                <asp:Label ID="lblAlerts" CssClass="flags" runat="server"></asp:Label> 
        
                            </ItemTemplate> 
        
                        </telerik:GridTemplateColumn> 
        
                        <telerik:GridTemplateColumn HeaderText="NAME" SortExpression="LastName"   
        
                            UniqueName="colName">  
        
                            <ItemTemplate> 
        
                                <asp:ImageButton runat="server" ImageUrl="~/images/icons/zoom.png"   
        
                                    ImageAlign="AbsMiddle" AlternateText="Quick Summary" ID="targetControl" />   
        
                                    <%# Eval("LastName") + ", " + Eval("FirstName") + " " + Eval("MiddleName") %> 
        
                            </ItemTemplate> 
        
                        </telerik:GridTemplateColumn> 
        
                        <telerik:GridTemplateColumn HeaderText="ADDRESS" 
        
                            SortExpression="StreetAddress" UniqueName="colAddress">  
        
                            <HeaderStyle Width="160px" /> 
        
                            <ItemStyle Width="160px" Wrap="True" /> 
        
                            <ItemTemplate> 
        
                                <%# Eval("StreetAddress") %> 
        
                            </ItemTemplate> 
        
                        </telerik:GridTemplateColumn> 
        
                        <telerik:GridBoundColumn HeaderText="S" DataField="Sex" HeaderStyle-Wrap="false"   
        
                            UniqueName="colSex">  
        
                            <HeaderStyle Width="10px" /> 
        
                            <ItemStyle Width="10px" /> 
        
                        </telerik:GridBoundColumn> 
        
                        <telerik:GridBoundColumn HeaderText="R" DataField="Race" HeaderStyle-Wrap="false"   
        
                            UniqueName="colRace">  
        
                            <HeaderStyle Width="10px" /> 
        
                            <ItemStyle Width="10px" /> 
        
                        </telerik:GridBoundColumn>   
        
                        <telerik:GridBoundColumn HeaderText="HGT" DataField="Height" HeaderStyle-Wrap="false"   
        
                            HeaderStyle-Width="18px" ItemStyle-HorizontalAlign="center" UniqueName="colHeight">  
        
                            <HeaderStyle Width="18px" /> 
        
                            <ItemStyle Width="18px" /> 
        
                        </telerik:GridBoundColumn>   
        
                        <telerik:GridBoundColumn HeaderText="WGT" DataField="Weight" UniqueName="colWeight">  
        
                            <HeaderStyle Width="20px" Wrap="false" /> 
        
                            <ItemStyle Width="20px" HorizontalAlign="center"/>  
        
                        </telerik:GridBoundColumn>   
        
                        <telerik:GridBoundColumn HeaderText="AGE" DataField="Age" UniqueName="colAge">  
        
                            <HeaderStyle Width="18px" Wrap="false" /> 
        
                            <ItemStyle Width="18px" HorizontalAlign="center"/>  
        
                        </telerik:GridBoundColumn>   
        
                        <telerik:GridBoundColumn HeaderText="DOB" DataField="Dob" AllowSorting="false"   
        
                            ItemStyle-HorizontalAlign="center" DataFormatString="{0:d}" UniqueName="colDob">  
        
                            <HeaderStyle Width="52px" /> 
        
                            <ItemStyle Width="52px" /> 
        
                        </telerik:GridBoundColumn>   
        
                        <telerik:GridBoundColumn HeaderText="ID" DataField="Id" UniqueName="colId">  
        
                            <HeaderStyle Width="44px" /> 
        
                            <ItemStyle Width="44px" /> 
        
                        </telerik:GridBoundColumn>   
        
                    </Columns> 
        
                </MasterTableView> 
        
            </telerik:RadGrid>

Here's the code to adjust column widths based on browser version:

    
            protected void rgResults_DataBound(object sender, EventArgs e)  
        
            {  
        
                if(bVersion < 8)  
        
                {  
        
                    //PICS  
        
                    RadGrid1.Columns[1].HeaderStyle.Width = 40;  
        
                    RadGrid1.Columns[1].ItemStyle.Width = 40;  
        
                    //FLAGS  
        
                    RadGrid1.Columns[2].HeaderStyle.Width = 50;  
        
                    RadGrid1.Columns[2].ItemStyle.Width = 50;  
        
                    //SEX  
        
                    RadGrid1.Columns[5].HeaderStyle.Width = 20;  
        
                    RadGrid1.Columns[5].ItemStyle.Width = 20;  
        
                    //RACE  
        
                    RadGrid1.Columns[6].HeaderStyle.Width = 20;  
        
                    RadGrid1.Columns[6].ItemStyle.Width = 20;  
        
                    //HEIGHT  
        
                    RadGrid1.Columns[7].HeaderStyle.Width = 30;  
        
                    RadGrid1.Columns[7].ItemStyle.Width = 30;  
        
                    //WEIGHT  
        
                    RadGrid1.Columns[8].HeaderStyle.Width = 32;  
        
                    RadGrid1.Columns[8].ItemStyle.Width = 32;  
        
                    //AGE  
        
                    RadGrid1.Columns[9].HeaderStyle.Width = 30;  
        
                    RadGrid1.Columns[9].ItemStyle.Width = 30;  
        
                    //DOB  
        
                    RadGrid1.Columns[10].HeaderStyle.Width = 68;  
        
                    RadGrid1.Columns[10].ItemStyle.Width = 68;  
        
                    //ID  
        
                    RadGrid1.Columns[11].HeaderStyle.Width = 52;  
        
                    RadGrid1.Columns[11].ItemStyle.Width = 52;  
        
                }  
        
            }

You can see that the only column I don't set specific widths for is the Name column. I want that column to adjust it's width based on what's available. I did try setting this specifically and couldn't get the columns to line up that way either... I've checked the rest of my code for this page and there's no other manipulation of the column widths. So if leave this code out I get column widths that are WAY too narrow for the content in IE6 & 7.

Does anyone know of a better way of approaching this?

Thanks for the help!
Eddie

Grid

answered on 28 Aug 2009

6 answers

153 views

Exporting to Excel

Hi,
I'm very glad to point out that all solutions provided by you people are very much useful.
Now I'm facing another problem. In my project I want to download the data from grid to Excel sheet. My grid is a single level hirearchial grid. I'm hiding the child table from user if there is no record to display. But when we export the grid content to excel this child table is visible in excel sheet with content "No child recored to display". I don't want to show the 'child table with no data 'in excel sheet. How can I do this.

Thanks in advance...

Grid

answered on 28 Aug 2009

1 answer

73 views

Size of Subject on month view

Is there a way to expand the size of the subject in month view? Right now it shows only the first line of the subject even when there is more text in the subject.

Scheduler

answered on 28 Aug 2009

1 answer

49 views

same Grid style looks different on development machine and server

in some of the grid columns i used

FilterControlWidth="40px"

HeaderStyle Width="50px"

it looks perfectly fine on development machine during debugging. However once i uploaded the page onto the server the little triangle image on side of the filter textboxes all moved below these texboxes....

any idea why?

Grid

answered on 28 Aug 2009

1 answer

174 views

ComboBox Events

Is there any event in radcombobox like textbox's event onClientTextChanged.
in combobox it is onClienttextChange which ido no want.
i just want to fire event when the selected text of the combobox changed.
i am using onkeypress but it is not giving me the correct out put as if i click the mouse then event is not fired.
i want to check something is the selected value is empty on client side

ComboBox

answered on 28 Aug 2009

2 answers

105 views

telerik radgrid hierarchical grid

Hi,

I have couple of queries. Please let me know how we can implement them?

1. Can we have different detail table view for each row of a master table view?

MasterTableView

Item1 (Row1) ---------------------------------------------------------------------------------------
DetailTableView 1
Item2 (Row 2) ---------------------------------------------------------------------------------------
DetailTableView2

2. Can we drag and drop the items of DetailTableView1 to DetailTableView2 and vice-versa?

Please let me know if this possible.

Thanks in advance.

Grid

answered on 28 Aug 2009

3 answers

371 views

[Solved] Setting the Property from Codebehind

<MasterTableView ShowGroupFooter="True" Width="100%">
                        <GroupHeaderItemStyle Font-Bold="true" ForeColor="Yellow" />

                        <%--   <Columns>
                            <telerik:GridBoundColumn HeaderText="Proposals" SortExpression="Proposal_ID" UniqueName="Proposal_ID">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataType="System.Int32" FooterText="Total : " Aggregate = "Count"
                                HeaderText="EstTrials" SortExpression="EstTrials" UniqueName="Trials :">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataType="System.Decimal" Aggregate="Sum"
                               DataFormatString ="{0:c}" HeaderText="EstCost" SortExpression="EstCost" UniqueName="Cost :">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="CropName" Visible ="false"
                                SortExpression="CropName" UniqueName="CropName">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="ProdName" Visible ="false"
                                SortExpression="ProdName" UniqueName="ProdName">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="TerritoryName" Visible ="false"
                                ReadOnly="True" SortExpression="TerritoryName" UniqueName="TerritoryName">
                            </telerik:GridBoundColumn>
                            <telerik:GridButtonColumn ButtonType ="ImageButton" ImageUrl ="images/Delete.gif" HeaderText ="Remove">

                            </telerik:GridButtonColumn>
                        </Columns>--%>
                    </MasterTableView>

I want to set the all above property through code behind in VB.net ...... I want to hide last 3 columns
I hv bind the data to radgrid throght databind from codebehind, but it binds all columns from code .... How to set visiblilty of columns?

Thnkas
Regards
Rahul

Grid

answered on 28 Aug 2009

1 answer

112 views

Remove Validation from DateInput

I am using a RadDatePicker with a DateInput and a Calendar.

- How do I remove the built-in validation for the DateInput control?

- Is it possible to use a standard asp:Textbox instead of the DateInput control?

Roy

Calendar

answered on 28 Aug 2009

2 answers

302 views

set_value on ReadOnly RadTextBox failed?

aspx:
<telerik:RadTextBox runat="server" ID="rtxtUserName" ReadOnly="true"></telerik:RadTextBox>
<input type="button" value="Assign Value" onclick="assignValue()">
<asp:Button runat="server" ID="Button1" OnClick="Button1_OnClick"></asp:Button>
js:

function assignValue()
{
var userName = $find('<%= rtxtUserName.ClientID %>');
userName.set_value('Thomas');
}

cs:

Button1_Click
{
string userName = rtxtUserName.Text;
}

when clicking the "Assign Value" button, nothing happens on rtxtUserName if ReadOnly set to be true.

Input

answered on 28 Aug 2009

1 answer

170 views

Disable ajax for add new button

Hi,
I have a radgrid and an ajax manager on my page.
The add new button in the grid uses the onitemcommand event and redirects the user to another page.
But when clicking on the button the grid first makes an ajax request and the loading panel is showing up, then redirects the user.
Is it possible to disable the ajax function for the add new button so the user is redirected instantly?

Regards,
Mattias

Grid

answered on 27 Aug 2009