Hi, how can i set the height of the footer.
<ig:WebDataGrid ID="WebDataGridPlaneamentoHorarios" runat="server" Height="500px" AutoGenerateColumns="False" Width="1300px" BorderColor="#666666" ShowFooter="True" > <Columns> <ig:BoundDataField DataFieldName="ID" Key="ID" Width="50px" Hidden="true"> <Header Text="ID" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="Nome" Key="Nome" Width="100px"> <Header Text="Nome" /> <Footer TemplateId="footerTemplate" CssClass=""; /> </ig:BoundDataField> <ig:TemplateDataField Key="Segmentos" Width="1510px"> <ItemTemplate> <uc1:Segmento ID="Segmento1" runat="server" /> </ItemTemplate> <Header Text="Segmentos" /> <FooterTemplate > <div id="Quant"> <uc2:SegNecessidades ID="SegNecessidades" runat="server" /></div> <br /><br /> <div id="Totais"><uc2:SegNecessidades ID="SegNecessidades2" runat="server" /></div> </FooterTemplate> </ig:TemplateDataField> </Columns> <Templates> <ig:ItemTemplate ID="WebDataGridPlaneamentoHorariosTemplate1" runat="server" TemplateID="footerTemplate"> <Template > <uc3:FooterControl ID="FooterC" runat="server" /> </Template> </ig:ItemTemplate> </Templates> </ig:WebDataGrid>
in this gird ive got a user control on the footer, that user control connects to a database on page load and create diferent lines, in this case 50.
What i want to do is restrict the height of the footer, so that the footer doesnt occupied all the grid, if possible the user can view 3 or 4 lines, and a scroll next to it to pull down and see the rest.
Thanks in advance...
Hello Hugo,
I have a couple of suggestions. So in order to set different css footer styles for the grids you could set a different StyleSetName property for the second grid. This approach suggests having an additional bundle of styles folder in the project. For example: <ig:WebDataGrid StyleSetName="IG" …>There is a dozen of styles you could choose from, as you could see in the attached screenshot.
In general, you could override the Default css class located in the ig_res folder(.igg_Footer) by setting a css class with the same name in the <style> tag of your html, but it will apply for all the grids existing as well. You could set FooterCaptionCssClass for the WebDataGrid, and it will apply for the content of the footer if there is such.
For more details, you could take advantage of our online sources, blogs and forum threads. Here is a great source describing how to manipulate the default Css Classes and which Class to be used on every grid control level: http://es.infragistics.com/community/blogs/engineering/archive/2010/08/25/webdatagrid-css-styling-guide.aspx There is also the possibility to change the css style of a particular DOM element via JavaScript.
Thank you for contacting Infragistics Developers Support!
Yes, but we went in another direction, we have created another grid below with the other data that was needed. By doing what you told every grid in the project assume the same css class.
Can you tell me how can i set the css class of footer only for this grid?
Hello,I am checking about the progress of this issue. Have you been able to solve it, based on my suggestions?
Thank you for posting in the community.In order to set your own footer height, you could set your own CssClass that overrides the default one, located in ig_res folder/ ig_dataGrid.css or use the existing one. Make sure that you set an overflow attribute to scroll Or auto, so a scrollbar will appear if needed. For example I have modified the existing CssClass:.igg_Footer{ background-color:#F0F0F0; height: 60px; overflow:auto; line-height: 20px;}
Also please make sure that you don’t set a pixel height for the Footer in the .aspx file, so the CssStyle is applied correctly.
Please let me know how this approach works for you.