WebDataGrid with scrollbar, fixed header and rowadding

Hello,
I'm working on a project update from infragistic UI for ASP.NET WebForm version 10.2 to 20.1.
I have some problems with the WebDataGrids for obtain the same graphics of UltraWebGrid.

My Grids should have a fixed size, fixed header, vertical scroll bar and "add new rows" on the last of many rows.

Until now I have attempted to use sizeless WebDataGrid placed inside a DIV with vertical scroll bars (for have a similar "addNewRow" graphics).
But when using fixed header function ( .igg_Header { position: fixed; } ) in css,  I have the following problems:

– After loading, the grid header is covered by the first row (it's displayed only after a click edit on a cell)
– Once displayed, the header covers the first row of the grid.

I've tried to using the JQuery script (as explained here in a old post) to overwrite a padding-top of the first grid <TR>, but the script doesn't seem to change the attribute in html.

<script src="../scripts/jquery-3.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $("tbody.igg_Item > tr:first-child td").css("padding-top", "20px");
</script>

The definition of this script is still right?

I use a MasterPage which contains the HEAD tag for many pages containing Grids, where I should load the JQueryScript (* .js) and where I should insert the "header padding correction" scripts?

If I have more than one WebDataGrid on the same page with different graphics (es. header hidden), how I can point to the right grid?

Could you tell me how to proceed?

Thanks!

Hello Andrea,

After investigating this further, I determined that the WebDataGrid automatically displays a scrollbar when the rows cannot fit into the container. Additionally, the headers and the “addRow” row are fixed and displayed on scroll, this is why no additional css is required for setting the header. The headers could also be hidden by setting the WebDataGrid’s property “ShowHeader” to false. Custom css could be applied to one of the two WebDataGrids on the page by setting the property “CssClass” of that grid.

Regarding the script tag, it could be added in the inside the body of the master page below the definition of the WebDataGrids.

Below I am attaching a sample, demonstrating the described behavior. Please test it on your side and let me know if you need any further information regarding this matter.

Regards,

Monika Kirkova,

Infragistics

Thanks Monika, I still have another question about the WebDataGrids that I was unable to insert because the formu queue is under maintenance…

My project Grids have frequently many Columns with WebCombo inside and each one has a visible "Text" and a hidden "Value" (both string).
I would need to get the "Value" set by  user, when saving page, by reading the Grid update with a loop on "rows" and "columns" and read a Cells (server side in C # code) to write them in a recordset.

The DropDown value obtained, once saved on the recordset, in a new Grid DataBind, should load the DropDown displaying the relative Text.

This procedure worked with old UltraWebGrids.

CmbValueField = Grid.Rows[Rig].Items[Col].Value.ToString();  (Value sample)

CmbTextField = Grid.Rows[Rig].Items[Col].Text;   (Text sample)

Instead, using the WebDataGrid and setting the Grid Column as "BoundDataField" (string) and adding an editor DropDownEditorProvider I can only obtain by code the displayed Text of the DropDown.
By making a different selection on the DropDown and reading the new "Value" server side, I always get the value loaded at the first Grid databind: all user changes are ignored.

How can I proceed to get the correct "value"?

This is my Grid:

<ig:WebDataGrid ID="Grid" runat="server" AutoGenerateColumns="False"
                EnableDataViewState="True" EnableRelativeLayout="True" BorderWidth="0px"
                Height="435px" Width="745px">
                <Columns>
                    <ig:BoundDataField DataFieldName="KKK" DataType="System.Int32" Hidden="True" HtmlEncode="False" Key="KKK" Width="20px">
                        <Header Text="KKK" />
                    </ig:BoundDataField>
                    <ig:BoundDataField DataFieldName="X99V" DataType="System.Int32" Hidden="True" HtmlEncode="False" Key="X99V" Width="20px">
                        <Header Text="X99V" />
                    </ig:BoundDataField>
                    <ig:BoundDataField DataFieldName="KC02" DataType="System.String" HtmlEncode="False" Key="KC02" Width="40px">
                        <Header Text="KC02" />
                    </ig:BoundDataField>
                    <ig:BoundDataField DataFieldName="C02Y" DataType="System.String" HtmlEncode="False" Key="C02Y" Width="200px">
                        <Header Text="C02Y" />
                    </ig:BoundDataField>
                    <ig:BoundDataField DataFieldName="C02Z" DataType="System.String" HtmlEncode="False" Key="C02Z" Width="200px">
                        <Header Text="C02Z" />
                    </ig:BoundDataField>
                    <ig:BoundDataField DataFieldName="WC01" HtmlEncode="True" Key="WC01"  Width="140px" DataType="System.String">
                        <Header Text="WC01" />
                    </ig:BoundDataField>
                    <ig:UnboundCheckBoxField HeaderChecked="False" Key="Del" HeaderCheckBoxMode="Off" Width="20px" CssClass="igg_CheckBoxAlignCentrer">
                    </ig:UnboundCheckBoxField>
                </Columns>
            
                <EditorProviders>
                    <ig:TextEditorProvider ID="Grid_TextEditor_KC02">
                        <EditorControl ID="EditorControl1" runat="server" CssClass="igg_EditCell">
                        </EditorControl>
                    </ig:TextEditorProvider>
                    <ig:TextEditorProvider ID="Grid_TextEditor_C02Y">
                        <EditorControl ID="EditorControl2" runat="server" CssClass="igg_EditCell">
                        </EditorControl>
                    </ig:TextEditorProvider>
                    <ig:TextEditorProvider ID="Grid_TextEditor_C02Z">
                        <EditorControl ID="EditorControl3" runat="server" CssClass="igg_EditCell">
                        </EditorControl>
                    </ig:TextEditorProvider>
                    <ig:DropDownProvider ID="Grid_Cmb_WC01" StretchHeight="True" >
                        <EditorControl ID="EditorControl4" runat="server" CssClass="igdd_GTComboInGrid" DropDownOffsetX="3"
                                       TextField="Valore" ValueField="Chiave" ClientIDMode="Predictable">
                            <Button DisabledImageUrl="../../Images/Combo/Style1/btn_comboGrid_disabled.gif"
                                HoverImageUrl="../../Images/Combo/Style1/btn_comboGrid_normal.gif"
                                ImageUrl="../../Images/Combo/Style1/btn_comboGrid_normal.gif"
                                PressedImageUrl="../../Images/Combo/Style1/btn_comboGrid_pressed.gif" />

                            <DropDownItemBinding TextField="Valore" ValueField="Chiave"></DropDownItemBinding>
                        </EditorControl>
                    </ig:DropDownProvider>
                </EditorProviders>
            
                <Behaviors>
                    <ig:Activation>
                    </ig:Activation>
                    <ig:EditingCore AutoCRUD="False" BatchUpdating="True">
                        <Behaviors>
                            <ig:CellEditing>
                                <ColumnSettings>
                                    <ig:EditingColumnSetting ColumnKey="KC02" EditorID="Grid_TextEditor_KC02" ReadOnly="True" />
                                    <ig:EditingColumnSetting ColumnKey="C02Y" EditorID="Grid_TextEditor_C02Y" />
                                    <ig:EditingColumnSetting ColumnKey="C02Z" EditorID="Grid_TextEditor_C02Z" />
                                    <ig:EditingColumnSetting ColumnKey="WC01" EditorID="Grid_Cmb_WC01" />
                                </ColumnSettings>
                                <EditModeActions MouseClick="Single" />
                            </ig:CellEditing>
                            <ig:RowAdding>
                                <ColumnSettings>
                                    <ig:RowAddingColumnSetting ColumnKey="KC02" EditorID="Grid_TextEditor_KC02" />
                                    <ig:RowAddingColumnSetting ColumnKey="C02Y" EditorID="Grid_TextEditor_C02Y" />
                                    <ig:RowAddingColumnSetting ColumnKey="C02Z" EditorID="Grid_TextEditor_C02Z" />
                                    <ig:RowAddingColumnSetting ColumnKey="WC01" EditorID="Grid_Cmb_WC01" />
                                </ColumnSettings>
                                <EditModeActions MouseClick="Single" />
                            </ig:RowAdding>
                        </Behaviors>
                    </ig:EditingCore>
                    <ig:RowSelectors>
                    </ig:RowSelectors>
                </Behaviors>      
            </ig:WebDataGrid>

Thanks in advance.