Hello
I have a radGrid with a masterTableView. In that mastertableview, I have many fields to display, For now, I see all my fields but I have to scroll in my Explorer window. And I see the right vertical line of the radgrid under my 7th fields (as I have more than 10 fields). Something like the radgrid finish before the fields diplaying as they are on the radgrid.
I don't know if I have to specified that my radgrid is in a Telerik:RadPageView control...
here is some code (I took off some column to be less long)
<
telerik:RadPageView ID="RadPageView2" Width="100%" runat="server">
<br />
<telerik:RadGrid
ID="RadGrid_Entreprise"
runat="server"
DataSourceID="SQLDSEntreprise"
autogeneratecolumns="False"
Skin="Office2007"
GridLines="None"
AllowAutomaticInserts="True"
AllowAutomaticUpdates="True"
AllowAutomaticDeletes="True"
CommandItemSettings-AddNewRecordText="Ajouter une nouvelle entreprise">
<PagerStyle
NextPageText="Suivant" PrevPageText="Pr‚c‚dent" Mode="NextPrevAndNumeric"
NextPagesToolTip="Pages suivante"
NextPageToolTip="Page suivante"
PrevPagesToolTip="Pages pr‚c‚dente"
PrevPageToolTip="Page pr‚c‚dente"/>
<MasterTableView
Name="MTVEntreprise"
EditMode="EditForms"
DataSourceID="SqlDSEntreprise"
NoMasterRecordsText="Il y a aucune entreprise."
DataKeyNames="NO_ENTREPRISE"
CommandItemDisplay="bottom"
InsertItemDisplay="Bottom"
EditFormSettings-EditColumn-CancelText="Annuler"
EditFormSettings-EditColumn-EditText="Modifier"
EditFormSettings-EditColumn-InsertText="Ajouter"
EditFormSettings-EditColumn-UpdateText="Mise … jour"
CommandItemSettings-AddNewRecordText="Ajouter une entreprise"
CommandItemSettings-RefreshText="Rafraichir">
<Columns>
<telerik:GridBoundColumn
SortExpression="NO_ENTREPRISE"
HeaderText="NO_ENTREPRISE"
DataField="NO_ENTREPRISE"
UniqueName="NO_ENTREPRISE"
visible="false"
readonly="true">
</telerik:GridBoundColumn>
<telerik:GridEditCommandColumn
ButtonType="ImageButton"
UniqueName="EditCommandColumn">
<ItemStyle CssClass="MyImageButton" />
</telerik:GridEditCommandColumn>
<telerik:GridBoundColumn
SortExpression="NOM_ENTREPRISE"
HeaderText="Nom"
DataField="NOM_ENTREPRISE"
UniqueName="NOM_ENTREPRISE"
MaxLength="50">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn
SortExpression="DESCR"
HeaderText="Description"
DataField="DESCR"
UniqueName="DESCR"
MaxLength="255">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn
SortExpression="ADRESSE"
HeaderText="Adresse"
DataField="ADRESSE"
UniqueName="ADRESSE"
MaxLength="50">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn
SortExpression="VILLE"
HeaderText="Ville"
DataField="VILLE"
UniqueName="VILLE"
MaxLength="40">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn
SortExpression="CODE_POSTAL"
HeaderText="Code postal"
DataField="CODE_POSTAL"
UniqueName="CODE_POSTAL"
MaxLength="10">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn
SortExpression="NO_TEL"
HeaderText="No tel"
DataField="NO_TEL"
UniqueName="NO_TEL"
MaxLength="16">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn
SortExpression="NO_FAX"
HeaderText="No fax"
DataField="NO_FAX"
UniqueName="NO_FAX"
MaxLength="16">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn
SortExpression="RESP_COURRIEL"
HeaderText="Courriel du responsable"
DataField="RESP_COURRIEL"
UniqueName="RESP_COURRIEL"
MaxLength="65">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn
SortExpression="RESP_NOM"
HeaderText="Nom du responsable"
DataField="RESP_NOM"
UniqueName="RESP_NOM"
MaxLength="40">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn
SortExpression="RESP_PRENOM"
HeaderText="Pr‚nom du responsable"
DataField="RESP_PRENOM"
UniqueName="RESP_PRENOM"
MaxLength="25">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn
UniqueName="TemplateColumn"
HeaderText="Logo"
DataField="Logo">
<ItemTemplate>
<asp:Label ID="LbLogo" runat="server" Text='<%#Eval("LOGO") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:FileUpload ID="LOGO" Text='<%#Eval("LOGO") %>' runat="server" />
</EditItemTemplate>
</telerik:GridTemplateColumn>
</
Columns>
</MasterTableView>
</telerik:RadGrid>
</telerik:RadPageView>
12 Answers, 1 is accepted
Apparently, the number of columns and their content is larger than the space available for RadGrid. As a consequence, the MasterTableView overflows out of the boundaries of the control and that is why you are seeing the control's right border below the 7th column.
Please enable scrolling for RadGrid (in ClientSettings -> Scrolling) to solve the issue.
Kind regards,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
I have to bring back this thread.
This is working fine with your solution but now, I have a radgrid in a RadPageView which is in a RadTabStrip.
I'll try to explain it the best that I can.
I have many fields as I mentionned above in my radgrid. With the scroll enabled it fit in my radgrid now. But It put the radgrid far from the left border of my screen. I have to scroll my page (not my grid) to the right to see it. In other RadPageView I have another radgrid which contain 2 or 3 fields which doesn't cause the problem. So it put the grid at the left of the page, I mean at the right place. But if I have many fields in my grid it fit in the grid but not in the my screen...and the RadTabStrip is also more to the right that it supposed to be...
I don't know if this is clear...this is hard to explain for me as english is not my first language ( NO WAY!?!) :D
Thanks again
It seems to me that you some uncleared CSS floats. Please check this. Alternatively, check for some HorizontalAlign properties.
If you can't resolve the issue, please send us a sample web page or a live URL. Thanks.
Greetings,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
Rank 1
I think I found how to solve it
first of all I took off all width and height for each radtab
I put for each radgrid width and height to "100%"
On the RadTabStrip I put a CSSclass like that
{
position
:absolute;
top
:190px;
left
:90px;}
And on the RadMultiPage I put a CSSclass like this:
{
position:absolute;
top:220px;
left:90px;
width:850px;
height:300px;
}
I Also put ClientSettings-Scrolling-AllowScroll="true" to each radgrid
And this is working fine
Hope it will help someone if they need it.
Thanks a lot telerik team!
Rank 1
Now I want to have only the horizontal scroll bar
So I check on the forum and see that post:
http://www.telerik.com/community/forums/aspnet-ajax/grid/scrolling.aspx
So I tried it but now I have the same issue as the beginning. I mean the issue "And I see the right vertical line of the radgrid under my 7th fields (as I have more than 10 fields). Something like the radgrid finish before the fields diplaying as they are on the radgrid."
So now I don't know what to do!!!
.RadGridSeul
{
top:260px;
left:90px;
}
<div style="overflow-x: scroll" >
<
telerik:RadGrid
ID="RadGrid_Offre"
runat="server"
datasourceid="SqlDSOffre"
autogeneratecolumns="False"
Skin="Office2007"
GridLines="None"
BorderWidth=1
AllowAutomaticInserts="false"
AllowAutomaticUpdates="false"
AllowAutomaticDeletes="false"
CssClass="RadGridSeul"
ClientSettings-Scrolling-AllowScroll=false
AllowFilteringByColumn=true
AllowSorting=true HorizontalAlign=Left>
<MasterTableView
Name="MTVOffre"
DataSourceID="SqlDSOffre"
NoMasterRecordsText="Il n'y a aucune offre disponible pour vos programmes d'‚tude."
DataKeyNames="NO_OFFRE"
AllowAutomaticDeletes=false
AllowAutomaticInserts=false
AllowAutomaticUpdates=false>
<ExpandCollapseColumn>
<HeaderStyle Width="20px" />
</ExpandCollapseColumn>
<Columns>
...
</Columns>
</MasterTableView>
</telerik:RadGrid>
</div>
hanks in advance! Again!
Rank 1
I want a radgrid with a horizontal scroll only
For the vertical, I want the browser scroll and now the radgrid scroll.
I'm surely not the first one who try to do that, but I can't find any solution..
Please help...
Thanks again
Myriam
Rank 1
http://img240.imageshack.us/my.php?image=radgrid1pf4.png
http://img113.imageshack.us/my.php?image=radgrid2rr2.png
http://img113.imageshack.us/my.php?image=radgrid3gl5.png
You should have seen that I don't have any left border in my radgrid...And my top border is only until the half of the horizontal width. I don't know why but maybe that could help you to understand what happen and how to solve it...I have almost finish my project but without solving this issue, I can't finish it...Please help!
Here are some notes on your questions:
1. I don't have any left border in my radgrid
I am not sure why this happens. Probably due to some custom CSS styles applied to the RadGrid or its parent elements. I see you have a lot of positioning styles, please verify that they are not causing troubles. Generally, absolute positioning should be used in specific cases only. I am not familiar with your application, but judging by your screenshots, you don't need absolute positioning.
2. my top border is only until the half of the horizontal width
This is because RadGrid has no explicit width set. In this case its width is 100% and it is applied to the control's outer <div>. However, the MasterTableView is wider due to the large number of columns and it overflows. One solution is to set some large width to RadGrid, or to enable RadGrid scrolling.
3. I want a radgrid with a horizontal scroll only
In order to make this happen, you need to enable scrolling set ScrollHeight (in ClientSettings > Scrolling) programmatically, depending on the number of rows to be displayed. Here is a related example:
http://www.telerik.com/community/forums/aspnet-ajax/grid/radgrid-scrolling-blank-space.aspx#721875
Best wishes,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
First of all, Thank you SO MUCH for taking time to help me! This is REALLY appreciate!!
I don't know if I don't understand quitly but here is what it gave me
http://img156.imageshack.us/my.php?image=radgrid4mz9.png
I have a scroll verticaly as I want the horizontal one...and it seems like it doesn't have a ScrollWidth property.
I'm a little bit lost
here is my radgrid
| <div style="overflow-x: scroll" > |
| <telerik:RadGrid |
| ID="RadGrid_Offre" |
| runat="server" |
| datasourceid="SqlDSOffre" |
| autogeneratecolumns="False" |
| Skin="Office2007" |
| BorderWidth=1 |
| AllowAutomaticInserts="false" |
| AllowAutomaticUpdates="false" |
| AllowAutomaticDeletes="false" |
| Width="800px" |
| AllowFilteringByColumn=true |
| AllowSorting=true > |
| <MasterTableView TableLayout="Fixed" /> |
| <ClientSettings> |
| <Scrolling AllowScroll="true" UseStaticHeaders="true" /> |
| </ClientSettings> |
| <MasterTableView |
| Name="MTVOffre" |
| DataSourceID="SqlDSOffre" |
| NoMasterRecordsText="Il n'y a aucune offre disponible pour vos programmes d'étude." |
| DataKeyNames="NO_OFFRE" |
| AllowAutomaticDeletes=false |
| AllowAutomaticInserts=false |
| AllowAutomaticUpdates=false> |
| <ExpandCollapseColumn> |
| <HeaderStyle Width="20px" /> |
| </ExpandCollapseColumn> |
| <Columns> |
| <telerik:GridBoundColumn |
| SortExpression="NO_OFFRE" |
| HeaderText="Num. Réf." |
| DataField="NO_OFFRE" |
| UniqueName="NO_OFFRE" |
| visible="false" |
| readonly="true"> |
| </telerik:GridBoundColumn> |
| <telerik:GridButtonColumn |
| ButtonType="LinkButton" |
| CommandName="Postuler" |
| Text="Postuler" |
| UniqueName= "PostulerColumn"> |
| </telerik:GridButtonColumn> |
| <telerik:GridBoundColumn |
| SortExpression="TITRE_OFFRE" |
| HeaderText="Titre du poste" |
| DataField="TITRE_OFFRE" |
| UniqueName="TITRE_OFFRE"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn |
| SortExpression="NOM" |
| HeaderText="Programme d'étude" |
| DataField="NOM" |
| UniqueName="NOM"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn |
| SortExpression="NB_POSTE_DISPO" |
| HeaderText="Nbre poste dispo." |
| DataField="NB_POSTE_DISPO" |
| UniqueName="NB_POSTE_DISPO"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn |
| SortExpression="TACHES_RELIEES" |
| HeaderText="Tâches reliées" |
| DataField="TACHES_RELIEES" |
| UniqueName="TACHES_RELIEES"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn |
| SortExpression="DESCRIPTION_COMPLEMENTAIRE" |
| HeaderText="Description complémentaire" |
| DataField="DESCRIPTION_COMPLEMENTAIRE" |
| UniqueName="DESCRIPTION_COMPLEMENTAIRE"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn |
| SortExpression="COMPETENCES" |
| HeaderText="Compétences" |
| DataField="COMPETENCES" |
| UniqueName="COMPETENCES"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn |
| SortExpression="EXIGENCES" |
| HeaderText="Exigences" |
| DataField="EXIGENCES" |
| UniqueName="EXIGENCES"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn |
| SortExpression="APTITUDES" |
| HeaderText="Aptitudes" |
| DataField="APTITUDES" |
| UniqueName="APTITUDES"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn |
| SortExpression="TYPE_EMPLOI" |
| HeaderText="Type d'emploi" |
| DataField="TYPE_EMPLOI" |
| UniqueName="TYPE_EMPLOI"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn |
| SortExpression="NB_HEURE_SEMAINE" |
| HeaderText="Nbre d'heure/semaine" |
| DataField="NB_HEURE_SEMAINE" |
| UniqueName="NB_HEURE_SEMAINE"> |
| </telerik:GridBoundColumn> |
| <telerik:GridTemplateColumn |
| UniqueName="TemplateNomContact" |
| HeaderText="Responsable"> |
| <ItemTemplate> |
| <asp:Label ID="LbNomContact" runat="server" Text='Marlène Gagné'></asp:Label> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn |
| UniqueName="TemplateFaxContact" |
| HeaderText="Fax de la Responsable"> |
| <ItemTemplate> |
| <asp:Label ID="LbFaxContact" runat="server" Text='418-555-1234'></asp:Label> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn |
| UniqueName="TemplateCourrielContact" |
| HeaderText="Courriel de la Responsable"> |
| <ItemTemplate> |
| <asp:Label ID="LbCourrielContact" runat="server" Text='<%emailAdmin%>'></asp:Label> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn |
| UniqueName="TemplateColumnDateDebut" |
| HeaderText="Date de début" |
| DataField="DATE_DEBUT"> |
| <ItemTemplate> |
| <asp:Label ID="LbDATE_DEBUT" runat="server" Text='<%#Eval("DATE_DEBUT") %>'></asp:Label> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn |
| UniqueName="TemplateColumnDateFin" |
| HeaderText="Date de fin" |
| DataField="DATE_FIN"> |
| <ItemTemplate> |
| <asp:Label ID="LbDATE_FIN" runat="server" Text='<%#Eval("DATE_FIN") %>'></asp:Label> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn |
| UniqueName="TemplateColumnDateDebutEmploi" |
| HeaderText="Date de début de l'emploi" |
| DataField="DATE_DEBUT_EMPLOI"> |
| <ItemTemplate> |
| <asp:Label ID="LbDATE_DEBUT_EMPLOI" runat="server" Text='<%#Eval("DATE_DEBUT_EMPLOI") %>'></asp:Label> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridBoundColumn |
| SortExpression="SALAIRE_OFFERT" |
| HeaderText="Salaire offert" |
| DataField="SALAIRE_OFFERT" |
| UniqueName="SALAIRE_OFFERT"> |
| </telerik:GridBoundColumn> |
| </Columns> |
| </MasterTableView> |
| </telerik:RadGrid> |
| </div> |
| Private Sub RadGrid_Offre_DataBound(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadGrid_Offre.DataBound |
| Dim grid As RadGrid = TryCast(sender, RadGrid) |
| Dim gridItems As Integer = grid.MasterTableView.Items.Count |
| If gridItems < 7 Then |
| grid.ClientSettings.Scrolling.ScrollHeight = Unit.Pixel(gridItems * 24) |
| End If |
| End Sub |
| Private Sub RadGrid_Offre_ItemCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles RadGrid_Offre.ItemCommand |
| Dim item As GridDataItem |
| If e.CommandName = "Postuler" Then |
| item = CType(e.Item, GridDataItem) |
| Response.Redirect("FEN_POSTULER.aspx?NoOffre=" & (item("NO_OFFRE").Text)) |
| End If |
| End Sub |
Thanks!
Yes, there is no ScrollWidth property, but there is no need for one. You can set Width to the MasterTableView, if you want to expand it horizontally.
Another option that you can try in order to increase the data area width is to set column widths of your preference. In this case, please use the HeaderStyle-Width property of the columns.
By the way, I see that you have copy-pasted the content of your RadGrid_Offre_DataBound handler from that forum thread I gave you and you have not made any modifications to it. If you are not sure what you should do with it, let me know. Anyway, I don't think this handler will be useful in your case, because you have multiline rows. Setting ScrollHeight programmatically is a good option when the table rows are mostly single lined.
Kind regards,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
Thanks again for your answers!
With a combinaison of what you told me I found how to solve my problem. The only thing is that I have a limit to the height but that's also okay like that
So here is my code if it can help someone.
| Private Sub RadGrid_offre_DataBound(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadGrid_offre.DataBound |
| Dim grid As RadGrid = TryCast(sender, RadGrid) |
| Dim gridItems As Integer = grid.MasterTableView.Items.Count |
| If gridItems < 6 Then |
| grid.Height = 250 |
| Else |
| grid.Height = 250 + (gridItems * 30) |
| End If |
| If grid.Height.Value > 650 Then |
| grid.Height = 650 |
| End If |
| End Sub |
<telerik:RadGrid |
| ID="RadGrid_offre" |
| DataSourceID="SqlDSEntrepriseOffre" |
| runat="server" |
| autogeneratecolumns="False" |
| Skin="Office2007" |
| GridLines="None" |
| AllowAutomaticInserts="true" |
| AllowAutomaticUpdates="True" |
| AllowAutomaticDeletes="True" |
| AllowMultiRowSelection="true" |
| AllowFilteringByColumn=true |
| ClientSettings-Scrolling-AllowScroll="true" |
| AllowSorting=true |
| HorizontalAlign=Left |
| width="98%" |
| > |
| <PagerStyle |
| NextPageText="Suivant" PrevPageText="Précédent" Mode="NextPrevAndNumeric" |
| NextPagesToolTip="Pages suivante" |
| NextPageToolTip="Page suivante" |
| PrevPagesToolTip="Pages précédente" |
| PrevPageToolTip="Page précédente"/> |
| <ClientSettings enablepostbackonrowclick= "true" > |
| <Selecting AllowRowSelect="True"/> |
| </ClientSettings> |
| <MasterTableView |
| Name="MTVEntrepriseOffre" |
| DataSourceID="SqlDSEntrepriseOffre" |
| NoMasterRecordsText="Il n'y a aucune entreprise." |
| DataKeyNames="NO_ENTREPRISE" |
| AllowAutomaticDeletes=false |
| AllowAutomaticInserts=false |
| AllowAutomaticUpdates=false Width="100%"> |
| <ExpandCollapseColumn> |
| <HeaderStyle Width="20px" /> |
| </ExpandCollapseColumn> |
| <Columns> |
| ... I also have detailtables but nothing special to add there |
| </Columns> |
| </MasterTableView> |
| </telerik:RadGrid> |