RadGrid 508 compliance request for hierarchical grid.

RF-5

Complex Tables are Missing ID or Headers Attributes

Data tables have multiple logical levels of row or column headers and lack the necessary coding associating the data cells with their respective headers. This issue is a violation of 1194.22(h) in Section 508 and 1.3.1 in WCAG 2.0.

Add id= and headers= attributes to all cells to correctly associate data cells with their respective row and column headers. For further assistance see http://www.hhs.gov/web/policies/webstandards/htmltable.html  and http://webaim.org/techniques/tables/data.

When using RadGrid GridDropDownColumn that displays referenced data from a different table allow filter to be replaced with a dropdown of available values. For example if my database has a table called Groups with and Id field and Name field; and it also contains a Members table with a GroupId field which contains the Id from the Groups table when I configure the Members GroupId Field with GridDropDownColumn with ListTextField="Name" ListValueField="Id" DataField="GroupId" as the values for the dropdown I should be able to choose FilterType="DropDownControl" to get the functionality found here http://demos.telerik.com/aspnet-ajax/grid/examples/functionality/filtering/filter-templates/defaultcs.aspx for City and Country columns.

You would get something like

(([createddate] >= '01/08/2017,00:00:00') AND ([createddate] <= '14/08/2017,23:59:59'))

while you should get something like

(([createddate] >= '01/08/2017 00:00:00') AND ([createddate] <= '14/08/2017 23:59:59'))

so that the SQL syntax is valid.

RadGrid, does not send the FilterExpression to the SqlDataSource, however. It executes the SELECT statement and then filters the resulting data on its own. This works fine.

If you will be performing operations yourself, you could use a string operation before passing the filter expression. For example:

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
	if (!string.IsNullOrEmpty(this.RadGrid1.MasterTableView.FilterExpression))
	{
		if (this.RadGrid1.MasterTableView.FilterExpression.Contains("createddate"))
		{
			this.RadGrid1.MasterTableView.FilterExpression = this.RadGrid1.MasterTableView.FilterExpression.Replace(",", " ");
		}
		DataView dv =GetData("select * from [myTable] where ", this.RadGrid1.MasterTableView.FilterExpression);
                //where you would need to have something like (([createddate] >= '01/08/2017 00:00:00') AND ([createddate] <= '14/08/2017 23:59:59'))
		this.RadGrid1.DataSource = dv;
	}
}

Note that implementing such a change may break existing code that relies on the current syntax that contains the comma.

For Bug Report :

Note: We are using MM/dd/yyyy as Internal Date format to prevent issue while inserting or updating value.

Steps to reproduce:
When we use dd-MM-yyyy and yyyy-dd-MM Date DisplayFformat for RadDatePicker/RadDateTimePicker control as well as view mode in Radgrid Batch Edit mode it's render behaviour is inconsistent
1. When dd is less than or equal to 12 then while rendering in edit mode Month and Date is interchanged
2. When dd is greather than 12 then while rendering in edit mode Month and Date is rendered correctly.

Provide a simple interface to showcase exactly in what order the columns have been sorted in (ex. 1, 2, 3, etc in column header) - matching the functionality in Kendo UI Grid:

http://demos.telerik.com/kendo-ui/grid/sorting

In some cases, inside the Grid table, the tfoot element is rendered before the tbody element. This causes some readers to read the footer before the body. 

A possible workaround is moving the tfoot after the tbody in the OnGridCreated event:

<script>
function OnGridCreated(sender, args) {
    var $ = $telerik.$;
    $('tfoot').each(function (index, item) {
        var $item = $(item);
        var $next = $item.next();
        if ($next[0]) {
            if ($next[0].tagName.toLowerCase() == "tbody") {
                 $item.insertAfter($next);
            }
        }
    });
}
</script>

 
A forum discussion on the topic: 
Any way to change the order in which RadGrid renders THEAD, TBODY, and TFOOT?
 

The reason for the behavior is that the column editor does not move to the cell when you cancel its opening. Opening a cell in the same column expects the column editor to be in the previously opened cell, however, and this causes the error. Repro is attached to illustrate the scenario.

Workarounds:
- Use EditType=Cell so that each cell opens independently of the row (wokaround 1).
- Use the provided function override (workaround 2). Make sure to remove it after upgrading to a release that has the fix. This function override may prevent you from getting other updates and fixes in this function.
- Use a template column and hide the editor based on your condition in the OnBatchEditOpened event (workaround 3)

Time independent filtering (EqualTo problem) is currently not supported with client-side binding in RadGrid, using a WCF with odata  binding.
When i use the filter in a date column, the filter does not return records, it is because is passing date AND TIME to the OData service. 
I have open a support ticket #932463, but Daniel says it is a new feature and not a bug.
So i request it.

There are two possible approaches to overcome this issue:
- First approach would be to get a reference to the GridHTMLEditorColumn and add the desired tools in the code behind using the "OnItemCreated" server event handler of RadGrid.
- Second approach would be to use GridTemplateColumn with RadEditor.

Enable filtering, Enable HeaderContextMenu and HeaderContextMenuFilter.

First, filter using the HeaderContextMenu filter (e.g. OrderDate GreaterThanOrEqualTo "someDate" AND OrderDate LessThanOrEqualTo "someOtherDate"

Second, apply a filter on another column using the Header filter only (e.g. Freight GreaterThanOrEqualTo "4")

At this point, the filtering applied by the HeaderContexFilterMenu is now partially removed.

Issue only appears when Header filter and HeaderContextMenu filter are used in combination. They work as expected when used separately.

Currently ExcelML format does not work when both hierarchy and grouping are used.

Hello,

I have Radgrid with editable & non editable columns. I edit a row.

If I click an editable cell, it places the cursor within the editable cell. Its correct.

But if I click a readonly cell, it places the cursor in the first editable cell of the line. If the readonly cell is the last cell of the line and if I click the readonly cell, it places the cursor in the first editable cell. If the grid column width is very large, the grid is scrolled to show the first editable cell, and I loose the data which I am visualizing.

If I click in readonly cell, I want to open all the editable cells of the line, but the page should remain in same place. I don't want to place the cursor in any of the editable cells of the line. 

Example grid:
I have a simple Radgrid with batch mode and edit type row.
I have 3 columns id,name and age.
Id and name columns are editable columns. Age column is non editable column.
If I click on age column which is  non editable , the focus moves to id column, which is the first editable column.
If there many columns in my grid and if I click the last  non editable  column, the grid scrolls to first editable column, and I lose the focus of data which I am seeing.
If I click in  non editable column, I want the grid to remain in same place.

This feature can be added as an option by adding property of grid ForceFocusinEdit.
When ForceFocusinEdit= true, if we click in readonly column, focus moves to first editable column.
When ForceFocusinEdit = false, if we click in readonly column, focus is in clicked cell.

Please refer to Ticket ID: 1168296 for more informations.
Thank you

Images that reside in the grid will get resized (scaled down with about 3-5 %) which might cause issues, specially if exporting bar-codes, thus the bar-code scanners won't be able to read them.

Current workaround is to use the Telerik Documents Processing Library  and build the table manually where the images are inserted without changing the size.

Here is an example:

        protected void RadGrid1_InfrastructureExporting(object sender, GridInfrastructureExportingEventArgs e)
        {
            Telerik.Web.UI.ExportInfrastructure.Table table = e.ExportStructure.Tables[0];

            Workbook workbook = new Workbook();
            workbook.Worksheets.Add();

            Worksheet worksheet = workbook.ActiveWorksheet;


            foreach (var row in table.Rows)
            {
                if (row.Index > 1)
                {
                    worksheet.Rows[row.Index - 1].SetHeight(new RowHeight(55, true));
                }

                foreach (var cell in row.Cells)
                {
                    if (row.Index == 1 || cell.ColIndex != 2)
                    {
                        worksheet.Cells[cell.Index.Y - 1, cell.Index.X - 1].SetValue(cell.Value.ToString());
                    }
                    else
                    {
                        FloatingImage image = new FloatingImage(worksheet, new CellIndex(cell.Index.Y - 1, cell.Index.X - 1), 0, 0);
                        Stream stream = File.Open(Server.MapPath(cell.Value.ToString()), FileMode.Open);
                        using (stream)
                        {
                            image.ImageSource = new Telerik.Windows.Documents.Media.ImageSource(stream, "jpg");
                        }
                        worksheet.Shapes.Add(image);
                    }
                }
            }

            byte[] data;

            using (MemoryStream ms = new MemoryStream())
            {
                XlsxFormatProvider xlsProvider = new XlsxFormatProvider();
                xlsProvider.Export(workbook, ms);
                data = ms.ToArray();
            }

            Response.ContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
            Response.Headers.Remove("Content-Disposition");
            Response.AppendHeader("Content-Disposition", "attachment; filename=" + RadGridLista.ExportSettings.FileName + ".xlsx");
            Response.BinaryWrite(data);
            Response.End();
        }

With a lot of columns, in some cases, the latest column is clipped in a zoomed OS. For example, resolution 1920x1080 and the scale is 150% or 3840 x 2160 and the 150% scale.

Adding the following script somewhere after the ScriptManager(e.g. near the closing </form> or </body> tag) can improve the experience with zoomed scenarios:

<telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
    <script>
        if (Telerik && (Telerik.Web.Browser.chrome || Telerik.Web.Browser.edgeChromium) && Telerik.Web.UI.GridScrolling) {
            Telerik.Web.UI.GridScrolling.prototype.onGridFrozenScroll = function (args) {
                if (!this._frozenScrollCounter) {
                    this._frozenScrollCounter = 0;
                }

                this._frozenScrollCounter++;
                this._needToUpdateClientState = false;

                var gridControl = this;

                gridControl._currentElement = Telerik.Web.UI.Grid.GetCurrentElement(args);

                Telerik.Web.UI.Grid.frozenScrollHanlder = function (count) {
                    var operaVersion = 10.00;

                    if ($telerik.isOpera) {
                        operaVersion = navigator.userAgent.substring(navigator.userAgent.indexOf("Version/") + "Version".length + 1) * 1;
                    }
                    if (gridControl._frozenScrollCounter != count || gridControl._owner._isResize)
                        return;

                    if (!gridControl._lastScrollIndex) {
                        gridControl._lastScrollIndex = 0;
                    }
                    var masterTableView = gridControl._owner.get_masterTableView();
                    var masterTableViewHeader = gridControl._owner.get_masterTableViewHeader();

                    var currentElement = gridControl._currentElement;

                    if (gridControl._owner.ClientSettings.Scrolling.FrozenColumnsCount > masterTableViewHeader.get_columns().length) {
                        gridControl.isFrozenScroll = false;
                    }
                    var column, i;
                    if (gridControl.isFrozenScroll) {
                        var notFrozenColumns = gridControl._getNotFrozenColumns();

                        var scrollPercent = 0;
                        var notShownSpaceWidth = -1;

                        var currentElementWidthDiff = currentElement.scrollWidth - currentElement.offsetWidth;

                        if ((currentElementWidthDiff) != 0)
                            notShownSpaceWidth = currentElementWidthDiff;

                        scrollPercent = currentElement.scrollLeft / notShownSpaceWidth;

                        if (scrollPercent < 0)
                            scrollPercent = -1 * scrollPercent;

                        if (scrollPercent > 1)
                            scrollPercent = 1;

                        if (Telerik.Web.UI.Grid.IsRightToLeft(gridControl._owner.GridHeaderDiv) && ($telerik.isSafari || $telerik.isIE7))
                            scrollPercent = 1 - scrollPercent;

                        var gridColumns = masterTableView.get_columns();

                        var currentScrollPosition = currentElement.scrollLeft;
                        i = 0;
                        while (i < notFrozenColumns.length)//always show the last column
                        {
                            column = notFrozenColumns[i];

                            var prerviousForzenDisplayWidth = notFrozenColumns._getPreviousNotFrozenColumnWidth(column.Index);

                            if ((currentElementWidthDiff) < 0)
                                break;

                            var columnPercent = (column.Width + prerviousForzenDisplayWidth - 50) / notShownSpaceWidth; 

                            if (columnPercent <= scrollPercent && currentScrollPosition != 0) {
                                if (column.FrozenDisplay) {
                                    masterTableViewHeader._hideNotFrozenColumn(column.Index);
                                }
                            }
                            else {
                                if (!column.FrozenDisplay) {
                                    masterTableViewHeader._showNotFrozenColumn(column.Index);
                                }
                            }

                            i++;

                            if (i == (notFrozenColumns.length - 1)) {
                                var prevWidthBeforeLastHidden = 0;
                                var lastHiddenColumnIndex = 0;
                                var k = 0;
                                for (var j = 0; j < gridColumns.length - 1; j++) {
                                    if (typeof (gridColumns[j].FrozenDisplay) == 'boolean' && !gridColumns[j].FrozenDisplay) {
                                        prevWidthBeforeLastHidden += notFrozenColumns[k].Width;
                                        k++;
                                        lastHiddenColumnIndex = j;
                                    }
                                }
                                if ((prevWidthBeforeLastHidden - notShownSpaceWidth) < notFrozenColumns[notFrozenColumns.length - 1].Width + 25) {
                                    if (scrollPercent < 0.5) {
                                        var nextColumnToHide = notFrozenColumns[notFrozenColumns.length - 1];
                                        masterTableViewHeader._hideNotFrozenColumn(nextColumnToHide.Index);
                                    } else {
                                        var nextColumnToHide = notFrozenColumns[k];
                                        masterTableViewHeader._hideNotFrozenColumn(nextColumnToHide.Index);
                                    }
                                }
                            }
                        }

                        gridControl._afterColumnFreeze(masterTableView, masterTableViewHeader, scrollPercent);

                        if (scrollPercent > 0.9999 && $telerik.isFirefox) {
                            masterTableViewHeader.get_element().style.width = masterTableViewHeader.get_element().offsetWidth + "px";
                            masterTableViewHeader.get_element().style.tableLayout = "auto";
                            masterTableViewHeader.get_element().style.tableLayout = "fixed";

                            masterTableView.get_element().style.width = masterTableViewHeader.get_element().offsetWidth + "px";
                            masterTableView.get_element().style.tableLayout = "auto";

                            masterTableViewHeader.get_element().style.tableLayout = "";
                            setTimeout(
                                function () {
                                    if ($telerik.isFirefox && Sys.Browser.version >= 4)
                                        masterTableView.get_element().style.tableLayout = "fixed";
                                    masterTableViewHeader.get_element().style.tableLayout = "auto";
                                    masterTableViewHeader.get_element().style.tableLayout = "fixed";
                                },
                                100);
                        }

                        if (gridControl._owner.get_masterTableViewFooter()) {

                            gridControl._owner.get_masterTableViewFooter().get_element().style.width = masterTableViewHeader.get_element().offsetWidth + "px";
                            gridControl._owner.get_masterTableViewFooter().get_element().style.tableLayout = "auto";
                            gridControl._owner.get_masterTableViewFooter().get_element().style.tableLayout = "fixed";
                        }

                    }
                    else {
                        gridControl._owner.GridDataDiv.scrollLeft = currentElement.scrollLeft;
                    }

                    /////////////////////////////////////
                    gridControl._frozenScrollCounter = 0;
                    gridControl._needToUpdateClientState = true;
                    //gridControl._owner.updateClientState();
                    setTimeout(Telerik.Web.UI.Grid._clientStateUpdater, 500);

                    if (gridControl._owner.get_events().getHandler("scroll")) {
                        gridControl._owner.raise_scroll(new Telerik.Web.UI.GridScrollEventArgs(gridControl._currentElement));
                    }
                };

                Telerik.Web.UI.Grid._clientStateUpdater = function () {
                    if (gridControl._needToUpdateClientState) {
                        gridControl._needToUpdateClientState = false;
                        gridControl._owner.updateClientState();
                    }
                };
                clearTimeout(window.frozenScrollTimeout);
                window.frozenScrollTimeout = setTimeout("Telerik.Web.UI.Grid.frozenScrollHanlder(" + this._frozenScrollCounter + ")", 30);

            }

        }
    </script>
</telerik:RadCodeBlock>