Services
Support
Store
©2015 Intersoft Solutions. All rights reserved.

Webgrid performance

3 replies. Last post: October 15, 2013 11:21 PM by Bernard Xiang
Tags :
  • (None)
Create New
  • New Discussion
  • New Question
  • New Product Feedback
Post Reply
luwen zhangMember
Posted: October 10, 2013 7:33 PM

Hi,

We use a webgrid of about 2000 rows and it is very slow to use arrow keys to navigate the grid. Please take a look of our layout setting and our client script and see how can we improve the performance.


Thanks,

Luwen

<ISWebGrid:WebGrid ID="WebGrid1" runat="server" OnBatchUpdate="WebGrid1_BatchUpdate"

                         OnExport="WebGrid1_Export" OnInitializeRow="WebGrid1_InitializeRow" 
                        OnInitializeLayout="WebGrid1_InitializeLayout"
                        OnInitializeDataSource="WebGrid1_InitializeDataSource"
                        OnInitializePostBack="WebGrid1_InitializePostBack"   >
                        <RootTable DataKeyField="TranSeq" DataMember="TransList" >
                            <ChildTables>
                                <ISWebGrid:WebGridTable Caption="Preparer Notes" ColumnFooters="Yes" 
                                DataMember="PrepNotesList" AllowAddNew="Yes">
                                    <Columns>                                        
                                        <ISWebGrid:WebGridColumn ColumnType="ButtonImage" Caption=" " Width="25px" Name="Delete" ButtonImage="images/delete.gif" EditType="Custom" HeaderTooltip="Delete Item">                                             
                                            <ButtonStyle CssClass="ButtonStyle" HorizontalAlign="Left"></ButtonStyle>
                                        </ISWebGrid:WebGridColumn>
                                         <ISWebGrid:WebGridColumn Caption="Transaction Detail" DataMember="TranSeq" Name="TranSeq"
                                           Visible="true" >
                                        </ISWebGrid:WebGridColumn>
                                        <ISWebGrid:WebGridColumn Caption="Priority" FilterEditType="DropdownList" EditType="DropdownList"
                                            Name="NotePriority" DataMember="NotePrty"  HiddenDataMember="TranSeq" InputRequired="true" 
                                             DefaultText="Information" DefaultValue="0"
                                            FooterText="Total Rows:" AggregateFunction="Count">
                                        </ISWebGrid:WebGridColumn>                                       
                                      <ISWebGrid:WebGridColumn Caption="Explanation" DataMember="Explanation" Name="NoteExplanation"
                                            AllowMultiLine="false" Width="250px" TextboxMaxlength="180" EditType="ResizableTextbox" FilterEditType="TextBox"
                                            >
                                        </ISWebGrid:WebGridColumn>
                                        <ISWebGrid:WebGridColumn Caption="Created By" DataMember="AddedIni" Name="CreateBy"
                                            EditType="NoEdit"  >
                                            <CellStyle HorizontalAlign="Center">
                                            </CellStyle>
                                        </ISWebGrid:WebGridColumn>
                                        <ISWebGrid:WebGridColumn Caption="Created Date" DataMember="Added_Dt" Name="CreateDate"
                                            EditType="NoEdit"  >
                                            <CellStyle HorizontalAlign="Right">
                                            </CellStyle>
                                        </ISWebGrid:WebGridColumn>
                                        <ISWebGrid:WebGridColumn Caption="Updated By" DataMember="ChngIni" Name="UpdatedBy"
                                            EditType="NoEdit"  >
                                            <CellStyle HorizontalAlign="Center">
                                            </CellStyle>
                                        </ISWebGrid:WebGridColumn>
                                        <ISWebGrid:WebGridColumn Caption="Updated Date" DataMember="Chng_Dt" Name="UpdateDate"
                                            EditType="NoEdit" >
                                            <CellStyle HorizontalAlign="Right">
                                            </CellStyle>
                                        </ISWebGrid:WebGridColumn>
                                        
                                    </Columns>
                                </ISWebGrid:WebGridTable>
                            </ChildTables>
                            <Columns>
                                <ISWebGrid:WebGridColumn ColumnType="ButtonImage" Width="25px" Caption=" " Name="Delete" ButtonImage="images/delete.gif" EditType="Custom" HeaderTooltip="Delete Item">
                                    <ButtonStyle CssClass="ButtonStyle" HorizontalAlign="Left"></ButtonStyle>
                                </ISWebGrid:WebGridColumn>
                                 <ISWebGrid:WebGridColumn AllowGrouping="No" AllowSizing="No" AllowSorting="Yes" 
                                    ColumnType="CheckBox" FilterEditType="Checkbox" EditType="NoEdit" IsRowChecker="true" IsAutoIncrement="true"   Name="RowChecker"
                                    ShowInSelectColumns="No" Width="35px"  >
                                </ISWebGrid:WebGridColumn>
                                <ISWebGrid:WebGridColumn Caption="Preparer Note" EditType="NoEdit" Name="PrepCount"
                                    Width="65px" DataMember="PrepCount" FilterEditType="TextBox">
                                    <CellStyle HorizontalAlign="Center">
                                    </CellStyle>
                                </ISWebGrid:WebGridColumn>
                                <ISWebGrid:WebGridColumn Caption="Transaction Detail" Name="TranSeq" EditType="NoEdit"
                                    FilterEditType="TextBox" DataMember="TranSeq" ColumnType="HyperLink"
                                    HyperlinkFormatString="javascript: opendetails()" HyperlinkTarget="Self" FooterText="Total Rows:"
                                    AggregateFunction="Count" >
                                    <CellStyle HorizontalAlign="Center">
                                    </CellStyle>
                                </ISWebGrid:WebGridColumn>
                                <ISWebGrid:WebGridColumn Caption="Tax Code" DataMember="NumTax_Cd" 
                                EditType="TextBox" Name="TaxCodeTxt" Width="55px" FilterEditType="TextBox">
                                </ISWebGrid:WebGridColumn>
                                <ISWebGrid:WebGridColumn Caption="Tax Code" DataMember="NumTax_Cd"  FilterEditType="DropdownList"
                                EditType="WebComboNET" Name="TaxCode" WebComboID="WebCombo1" Width="350px">
                                </ISWebGrid:WebGridColumn>
                                <ISWebGrid:WebGridColumn Caption="Posting Date" Name="PostingDate" DataMember="Posting_Dt"
                                    DataFormatString="MM/dd/yyyy" EditType="NoEdit" FilterEditType="CalendarCombo">
                                    <CellStyle HorizontalAlign="Right">
                                    </CellStyle>
                                </ISWebGrid:WebGridColumn>
                                <ISWebGrid:WebGridColumn Caption="Tax Effective Date" Name="TaxEffDate"  
                                    DataMember="TaxEff_Dt" EditType="TextBox" DataFormatString="MM/dd/yyyy">
                                    <CellStyle HorizontalAlign="Right">
                                    </CellStyle>
                                </ISWebGrid:WebGridColumn>
                                <ISWebGrid:WebGridColumn Caption="Asset ID" EditType="TextBox" Name="AssetId" Width="70px"
                                    DataMember="AssetId" TextboxMaxlength="12"  FilterEditType="TextBox">
                                    <CellStyle HorizontalAlign="Right" CustomRules="text-transform: uppercase">
                                    </CellStyle>
                                </ISWebGrid:WebGridColumn>
                                <ISWebGrid:WebGridColumn Caption="Asset Name" Name="AssetName" Width="150px" DataMember="AssetName"
                                    AllowMultiLine="False" FilterEditType="TextBox">
                                </ISWebGrid:WebGridColumn>
                                <ISWebGrid:WebGridColumn Caption="Explanation" Name="Explanation" Width="300px" DataMember="Explanation"
                                     EditType="ResizableTextbox" TextboxMaxlength="1257"  AllowMultiLine="False" FilterEditType="TextBox">
                                </ISWebGrid:WebGridColumn>
                                <ISWebGrid:WebGridColumn Caption="Income Cash" EditType="NoEdit" Name="IncCash" Width="70px"
                                    DataMember="IncCash" DataFormatString="$##,###.00"  FilterEditType="TextBox">
                                    <CellStyle HorizontalAlign="Right">
                                    </CellStyle>
                                </ISWebGrid:WebGridColumn>
                                <ISWebGrid:WebGridColumn Caption="Principal Cash" EditType="NoEdit" Name="PrinCash"
                                    Width="70px" DataMember="PrinCash" DataFormatString="$##,###.00" FilterEditType="TextBox">
                                    <CellStyle HorizontalAlign="Right">
                                    </CellStyle>
                                </ISWebGrid:WebGridColumn>
                                <ISWebGrid:WebGridColumn Caption="Taxable Amount" EditType="TextBox" Name="TaxableAmt"
                                    Width="70px" DataMember="TaxableAmt" DataFormatString="$##,###.00">
                                    <CellStyle HorizontalAlign="Right">
                                    </CellStyle>
                                </ISWebGrid:WebGridColumn>    
                                <ISWebGrid:WebGridColumn Caption="Ex-Dividend Date" Name="ExDivDate" Width="90px"
                                    DataMember="ExDiv_Dt" DataFormatString="MM/dd/yyyy" EditType="CalendarCombo">
                                    <CellStyle HorizontalAlign="Right">
                                    </CellStyle>
                                </ISWebGrid:WebGridColumn>
                                <ISWebGrid:WebGridColumn Caption="Tax Code Description" DataMember="NumTax_Cd" 
                                EditType="NoEdit" Name="TaxCodeDesc" Width="300px" FilterEditType="TextBox" AllowMultiLine="false">
                                </ISWebGrid:WebGridColumn>
                                <ISWebGrid:WebGridColumn Caption="TAV Tax Code" EditType="TextBox" Name="TAVTaxCode"
                                    Width="70px" DataMember="TAVTax_Cd" DataType="System.Int"  FilterEditType="TextBox">
                                </ISWebGrid:WebGridColumn>
                                <ISWebGrid:WebGridColumn Caption="Revised Tran Type" EditType="DropdownList" Name="TranType"
                                    Width="190px" DataMember="Tran_Cd"   FilterEditType="DropdownList" AllowMultiLine="false">
                                </ISWebGrid:WebGridColumn>
                                <ISWebGrid:WebGridColumn Caption="HIT Reviewed" EditType="Checkbox" Name="HitReviewed"
                                    Width="75px" DataMember="HITReviewed_Cd" ColumnType="CheckBox" FilterEditType="Checkbox">
                                </ISWebGrid:WebGridColumn>
                                <ISWebGrid:WebGridColumn Caption="HIT Message" EditType="DropdownList" Name="HitMsg" AllowMultiLine="false"
                                    Width="350px" DataMember="HIT_Cd" ColumnType="Text" FilterEditType="DropdownList">
                                </ISWebGrid:WebGridColumn>
                            </Columns>
                        </RootTable>
                        <LayoutSettings AllowColumnSizing="Yes" 
                            AllowColumnMove="Yes"  
                            PersistRowChecker="true"
                            AllowEdit="Yes" 
                            AllowExport="Yes" 
                            AllowFilter="Yes" 
                            AllowGrouping="Yes" 
                            AllowSelectColumns="Yes"
                            AllowSorting="Yes" 
                            GridLineColor="#727272" 
                            GridLines="Both" 
                            GridLineStyle="Solid"
                            PagingMode="ClassicPaging" 
                            PagingSize="500" 
                            AllowBatchUpdate="true"
                            PagingStyleUI="Slider"
                            AllowMultipleSelection="Yes" 
                            GroupByBoxVisible="false" 
                            HeaderClickAction="SortMulti"
                            VerboseEditingInformation="true" 
                            NewRowLostFocusAction="AlwaysUpdate" 
                            FocusNewRowOnLastCell="true"
                            AllowColumnFreezing="No" 
                            ApplyFiltersKey="Enter" 
                            EditOnClick="True" 
                            AutoFilterSuggestion="true"
                            PagingExportMode="ExportAllData" 
                            InProgressUIBehavior="ChangeCursorToHourGlass"
                            HeaderWrapDefault="true"  
                            PagingDetectPartialGroupRows="True"  
                            Hierarchical="true" 
                            CellClickAction="CellSelect"
                            ColumnFooters="Yes" 
                            ShowFilterStatus="True" 
                            ShowColumnAction="true" 
                            RowHeightDefault="-1px"
                            ColumnFooterAggregateMode="CalculateAllData" 
                            AutoHeight="true" 
                            HelpURL="tools.aspx"
                            RestoreRowSelection="All"
                            AutoWidth="true">
                            
                        <FreezePaneSettings ShowInContextMenu="false" MaxFrozenColumns="6" />
                        <BatchUpdateSettings AllowReviewChanges="True" HighlightChanges="false" PromptUnsavedChanges="False"  AutomaticObjectUpdate="false"  />
                            
                        <ClientSideEvents OnAfterExitEditMode="OnCellValidate" 
                            OnEditKeyDown="OnEditKeyDown_Revised"                    
                            />
                        <EditFocusCellStyle CssClass="EditFocusCellStyle">
                        </EditFocusCellStyle>
                        <EditTextboxStyle CssClass="EditTextboxStyle">
                        </EditTextboxStyle>
                        <FrameStyle CssClass="FrameStyle">
                        </FrameStyle>
                        <GroupByBox>
                            <Style CssClass="GroupByBoxStyle">
                                </Style>
                            <LabelStyle CssClass="GroupByBoxLabelStyle" />
                        </GroupByBox>
                        <GroupRowInfoStyle CssClass="GroupRowInfoStyle">
                        </GroupRowInfoStyle>
                        <AlternatingRowStyle CssClass="AlternatingRowStyle" Wrap="true"></AlternatingRowStyle>
                        <RowStyle CssClass="RowStyle" Wrap="true"></RowStyle>
                        <SelectedRowStyle CssClass="SelectedRowStyle" />
                        <HeaderStyle CssClass="HeaderStyle" Wrap="true"></HeaderStyle>
                        <NewRowStyle CssClass="NewRowStyle">
                        </NewRowStyle>
                        <FooterStyle CssClass="FooterStyle" />
                        <StatusBarStyle CssClass="StatusBarStyle">
                        </StatusBarStyle>
                        <StatusBarCommandStyle>
                            <Normal CssClass="StatusBarCommandStyleNormal">
                            </Normal>
                            <Over CssClass="StatusBarCommandStyleOver">
                            </Over>
                            <Active CssClass="StatusBarCommandStyleOver">
                            </Active>
                        </StatusBarCommandStyle>
                        <HyperlinkStyle CssClass="HyperlinkStyle" />
                        <DeletedRowStyle CssClass="DeletedRowStyle">
                        </DeletedRowStyle>
                        <AddedRowStyle CssClass="AddedRowStyle">
                        </AddedRowStyle>
                        <FilterRowStyle CssClass="FilterRowStyle" Wrap="false" />
                        <RowHeaderStyle CssClass="RowHeaderStyle" />
                        </LayoutSettings>
                    </ISWebGrid:WebGrid>
                   <ISWebCombo:WebCombo ID="WebCombo1" runat="server" OnInitializeDataSource="WebCombo1_InitializeDataSource"
                        UseDefaultStyle="True" Width="350px" >                      
                        <LayoutSettings EntryMode="AutoComplete">
                        </LayoutSettings>         
                    </ISWebCombo:WebCombo>
                    
                    <ISWebInput:WebInput ID="WebInputDate" runat="server" Width="140px">
                        <HighLight IsEnabled="True" Type="Phrase" />
                        <CultureInfo CultureName="en-US">
                        </CultureInfo>
                        <EditFormat Format="MM/dd/yyyy" IsEnabled="True">
                            <MaskInfo MaskExpression="00/00/0000">
                            </MaskInfo>
                            <ErrorWindowInfo IsEnabled="True">
                            </ErrorWindowInfo>
                        </EditFormat>
                        <DateTimeEditor IsEnabled="false">
                        </DateTimeEditor>
                    </ISWebInput:WebInput>
                    <ISWebInput:WebInput ID="WebInputCurrency" runat="server" Width="140px">
                        <DisplayFormat Format="c" IsEnabled="True" Type="Number">
                            <ErrorWindowInfo IsEnabled="True">
                            </ErrorWindowInfo>
                        </DisplayFormat>
                    </ISWebInput:WebInput>
         
  
    </form>
<script type="text/javascript">
    function opendetails() {
    }
    function OnCellValidate(controlId, tblName, editObject) {
        try {
            var WebGrid1 = ISGetObject(controlId);
            var rootTable = WebGrid1.RootTable;
            var name1 = "";
            var name2 = "";
            var addr1 = "";
            var addr2 = "";
            var city = "";
            var state = "";
            var zip = "";
            var foreign = "";
            if (editObject != null) {
                var cell = wgGetCellByElement(editObject.cellElement);
                var cellObject = editObject.ToCellObject();
                var selectedObject = WebGrid1.GetSelectedObject();
                var selectedRow = selectedObject.ToRowObject(); // return WebGridRow object
                var cells = selectedRow.GetCells();  // get the WebGridCell collection 
                if (selectedRow.Type != "FilterRow") {
                    var colName = cell.Name;
                    var row = cell.Row;
                    var OrigValue = cell.OldValue;
                    var NewValue = cell.Value; //editObject.element.value;
                    var validTaxCode = false;
                    if (OrigValue != NewValue && selectedRow.Type != "NewRow") {
                        cellObject.CellElement.style.fontWeight = "bold";
                        selectedRow.SetDataChanged();
                        WebGrid1.MarkEdit();
                        window.setTimeout(function () { WebGrid1.ExitEdit(1, 0, 0); }, 10);
                    }
                }
            }
        }
        catch (err) 
        {
        }
    }
    //use arrow keys to navigate the grid
    function OnEditKeyDown_Revised(controlId) {
        try {
            var grid = ISGetObject(controlId);
            var selectedObject = grid.GetSelectedObject();
            var selectedRow = selectedObject.ToRowObject();
            var keyCode = event.keyCode;
            if (selectedRow.Type == "FilterRow") {
                return true;
            }
            else if (selectedRow.Type == "NewRow" && event.keyCode == 13) {
                window.setTimeout(function () { grid.ExitEdit(1, 0, 0); }, 10);
                return true;
            }
            else if (selectedRow.Type != "NewRow" && (keyCode == 13 ||
                keyCode == 40 || keyCode == 38 || keyCode == 37 || keyCode == 39)) {
                var curRow = grid.GetSelectedObject().rowIndex;
                var curCell = grid.GetActiveEditCell().cellIndex;
                var ac = grid.GetActiveEditCell();
                var tbl = grid.Tables[ac.tblName];
                var cellConst = 1;
                if (grid.RootTable.GetChildTables().length > 0) {
                    cellConst = (tbl.GetChildTables().length > 0) ? 2 : 3;
                }
                var cellIdx = curCell - cellConst;
                var oCell = selectedRow.GetCell(cellIdx);
                // ResizableTextbox, MultiLineTextBox, WebCombo and dropdown list are exceptions
                if (oCell != null && oCell.Column.EditType != null) {
                    var editType = oCell.Column.EditType.toUpperCase();
                    if (editType == "RESIZABLETEXTBOX" || editType == "MULTILINETEXTBOX")
                        return true;
                    if (editType == "DROPDOWNLIST" || editType == "WEBCOMBONET") {
                        if (keyCode == 38 || keyCode == 40)
                            return true;
                    }
                }
                window.setTimeout(function () { grid.ExitEdit(1, 0, 0); }, 10);
                switch (keyCode) {
                    case 38: //up
                        ArrowMove(grid, curRow, -1, curCell, 0);
                        break;
                    case 40: //down
                    case 13: //enter
                        ArrowMove(grid, curRow, 1, curCell, 0);
                        break;
                    case 37: //left
                        ArrowMove(grid, curRow, 0, curCell, -1);
                        break;
                    case 39: //right
                        ArrowMove(grid, curRow, 0, curCell, 1);
                        break;
                }
                return false;
            }
            return true;
        }
        catch (err) {
            window.setTimeout(function () { grid.ExitEdit(1, 0, 0); }, 20);
        }
    }
    /*  Arrow/Value          verticalAction  horizontalAction
    *       UP          :    -1              0
    *       DOWN        :     1              0
    *       LEFT        :     0             -1
    *       RIGHT       :     0              1  
    */
    function ArrowMove(grid, curRowIdx, verticalAction, curCellIdx, horizontalAction) {
        var selectedObject = grid.GetSelectedObject();
        var selectedRow = selectedObject.ToRowObject();
        var ac = grid.GetActiveEditCell();
        var curRow = ac.rowElement;
        var tblElm = wgGetTable(curRow);
        var tbl = grid.Tables[ac.tblName];
        var isParent = (tbl.GetChildTables().length > 0) ? true : false;
        var i = (isParent) ? 2 : 1;
        var rowConst = (verticalAction == 0) ? 0 : (verticalAction > 0) ? i : (-i);
        var cellConst = 1;
        if (grid.RootTable.GetChildTables().length > 0) {
            cellConst = (isParent) ? 2 : 3;
        }
        var nextRowIndex = curRowIdx + rowConst;
        var nextCellIndex = curCellIdx - cellConst + horizontalAction;
        if (horizontalAction == 0 && nextRowIndex >= 0 && nextRowIndex < tblElm.rows.length) {
            //different row, same column
            var destRow = wgGetRowByPosition(tblElm, nextRowIndex);
            var nextRow = wgGetRowByElement(destRow);
            var nextCell = nextRow.GetCell(nextCellIndex);
            if (nextCell != null) {
                grid.SetFocus();
                nextRow.Select();
                nextCell.Select(true);
            }
        }
        else if (verticalAction == 0 && nextCellIndex >= 0 && nextCellIndex < tbl.Columns.length) {
            //same row, different column
            var nextCell = selectedRow.GetCell(nextCellIndex);
            if (nextCell != null) {
                grid.SetFocus();
                selectedRow.Select();
                nextCell.Select(true);
            }
        }
    }
</script>


problem with ImagesDirectory for WebTextEditor
WEBGRID HOW TO MAKE READ ONLY CHECKBOX A CHECKBOX
All times are GMT -5. The time now is 1:44 AM.
Previous Next