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
550
UltrawebGrid to webData Grid
posted

we are upgrading from Ingragistics 10 to  14 version . so in my page i had ULTRAWEBGRID which i am upgrading to WEbDataGrid 

 so  i am s loloking for display lay out and could  not find on WDG  , I need to convert the below  from UWG   to WDG(webdatagrid) and its really urgent , kindly reply 

<DisplayLayout RowHeightDefault="16px" Version="4.00" BorderCollapseDefault="Separate"
CellClickActionDefault="RowSelect" RowSelectorsDefault="No" Name="LicenseGrid"
AllowDeleteDefault="Yes" AllowUpdateDefault="No" AllowColSizingDefault="Fixed"
FixedCellStyleDefault-Font-Names="Arial" TableLayout="Auto" >
<AddNewBox style="border-width:1px;;background-color:lightgray">

</AddNewBox>
<Pager style="border-width:1px;border-style:solid;background-color:lightgray">

</Pager>
<HeaderStyleDefault Height="16px" Font-Size="X-Small" Font-Names="Arial" Font-Bold="True"
BorderStyle="Solid" ForeColor="Black" BackColor="#86C9EC" CustomRules="background-image:url(/AMF/images/pei_TableHeaderImage_blue.png);background-repeat:repeat-x;">
<Padding Bottom="4px" Left="4px" Top="4px" Right="4px"></Padding>
<BorderDetails ColorTop="#86C9EC" WidthLeft="0px" WidthTop="0px" ColorLeft="#86C9EC"
ColorBottom="#86C9EC" WidthBottom="1px"></BorderDetails>
</HeaderStyleDefault>
<FrameStyle BorderWidth="1px" Font-Size="XX-Small" Font-Names="Arial" BorderStyle="Solid"
HorizontalAlign="Justify" BorderColor="#86C9EC">
</FrameStyle>
<FooterStyleDefault BorderWidth="1px" BorderStyle="Solid" BackColor="LightGray">
<BorderDetails ColorTop="White" WidthLeft="1px" WidthTop="1px" ColorLeft="White">
</BorderDetails>
</FooterStyleDefault>
<ClientEvents />
<EditCellStyleDefault BorderWidth="0px" BorderStyle="None">
</EditCellStyleDefault>
<SelectedRowStyleDefault Font-Bold="True" ForeColor="White" BackColor="#000080" CustomRules="background-image:url(/AMF/images/pei_SelectedItemImage_blue.png);background-repeat:repeat-x;">
</SelectedRowStyleDefault>
<RowAlternateStyleDefault>
</RowAlternateStyleDefault>
<RowStyleDefault Cursor="Default" BorderWidth="1px" BorderColor="Black" BorderStyle="Solid"
BackColor="White">
<Padding Left="3px"></Padding>
<BorderDetails WidthLeft="0px" WidthTop="0px"></BorderDetails>
</RowStyleDefault>
</DisplayLayout>

  • 17590
    Verified Answer
    Offline posted

    Hello Sreevani,

    Thank you for posting in our community.

    Styling WebDataGrid could be achieved via the css files attached to the grid by default. In this css files there are classes applied to the different elements of the grid, that you could modify in order to achieve the desired look and feel for the grid.  A list with css classes used for each control could be found at:

    http://ko.infragistics.com/community/blogs/engineering/archive/2010/08/10/which-are-my-css-files.aspx

    The CSS file for the WebDataGrid is ig_dataGrid.css and is located in the ig_res/Default folder in your application(if you are using any style sheet different than the Default this file is going to be named after it). For example, if you would like to modify the grid header, you could modify the .igg_Header class, or for the grid cells the tbody.igg_Item>tr>td is the class that you are looking for and etc. Please note that css selectors, that are used to select the target element, are crucial for this way of styling. I believe you might consider the following article with CSS styling guide helpful:

    http://ko.infragistics.com/community/blogs/engineering/archive/2010/08/25/webdatagrid-css-styling-guide.aspx

    Additionally, what I can suggest is inspecting the elements that you would like to style with any of the browser development tools(such as Firebug) in order to check which classes are applied to any particular element.

    I hope you find this information helpful.

    Please feel free to contact me if you need any further assistance with this matter.