The issue targets a Grid with cell selection and DragToSelect feature disabled where at least one column has Visible="false". With this configuration, when using Shift + Click to select multiple cells, the result is a mismatch in the cells that should be selected, after the position where the invisible column is placed.

Video reproduction attached. Reproduction code: https://blazorrepl.telerik.com/GyFuQwPf37H8riAM19.

Currently, when there is a blank or null value, no text is rendered next to the CheckBox in the CheckBoxList filter. I want to be able to customize that and easily set my desired text. For example, "(Blanks)" as in Excel.

I'm using an OnRead grid with ExpandoObjects. The error happens on the backend when trying to process the result of ToDataSourceResult(...)

When trying to access the Items property of AggregateFunctionsGroup in a multi level grouping scenario, using ExpandoObject, and the top level group has a null key, trying to access the Items property will result in a NullReferenceException. I've made this helper, but it cannot process the subgroups because of this error.

private static void FlattenGroup<T>(AggregateFunctionsGroup group, List<T> result)
{
    if (group == null)
    {
        return;
    }

    if (group.HasSubgroups)
    {
        foreach (var sub in group.Items.OfType<AggregateFunctionsGroup>())
        {
            FlattenGroup(sub, result);
        }
    }
    else
    {
        result.AddRange(group.Items.OfType<T>());
    }
}

In a scenario where I have an ExpandoObject with properties A and B, where A = 1 and B = null; grouping by A then B works. Grouping by A or B alone also works. But grouping by B then A causes the NullReferenceException when trying to access the group.Items. 

If the grid has Filterable=true, at the moment, all columns must have a Field defined. If a column does not have a Field, an exception similar to this one will be thrown:

Error: System.ArgumentNullException: Value cannot be null.
Parameter name: name
   at System.Type.GetProperty(String name, BindingFlags bindingAttr)
   at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.get_PropInfo()
   at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.get_PropType()
   at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.get_PropTypeName()
   at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.ResetFilterText()
   at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.OnInit()
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

Instead, when no Field is provided, filtering, sorting and other operations that require a model field must be disabled internally without an exception.

For the time being, a workaround is to set Filterable=false to the desired column.

Here is an example where the workaround is highlighted

I want to be able to control the page at which the user is in the grid. I will later use that to call my own API through the OnRead event. Binding the Page parameter does not seem to work, however.

Reproducible:

while the similar approach works without OnRead:

If we enable grouping on a grid which has `FilterMode="Telerik.Blazor.FilterMode.FilterRow"` then we can no longer successfully get focus into any of the filter row edit controls.

Clicking on filter text input box (I think you need to do it a few times) causes a js error and does not put the text input focus into the filter text input.

JS exception is:

telerik-blazor.js:35 Uncaught TypeError: Cannot read property 'getAttribute' of null

Hi there, 

Is it possible to have multi-column headers for the data grid, like we have in Kendo grid. 

if so, what would be the ETA? 

Thanks,

Deepa

Hi,

how to select ALL items in the grid data source using GridCheckboxColumn in the grid header when grid is in Virtual scroll mode?
When I click on the GridCheckboxColumn in the grid header it selects only the items in the current visible page but I would like to select all items in the grid data source.

Selecting all items in the grid (not only visible ones) is a must have feature and current behavoiur is kind of misleading because the user would expect that all items are selected.

ADMIN EDIT: This has been available since 2.10.0 through the SelectAllMode parameter of the selection column.

Hi,

I'm trying to set an empty column title

 <Telerik.Blazor.Components.GridColumn Field="@item.FieldName"
                                       Title=""
                                       Resizable="true"
                                       Width="@width">

I would expect it to show an empty header title but instead fieldName is displayed.

We have a Telerik grid which is customized by some CSS rules. The problem is that the header width does not fill the width of the table if no scrollbar is shown.

My question is: Why did you create the table like it is right now in HTML (See screenshot as well)? In my opinion, it would be easier to use something more simple like described here: https://www.w3schools.com/html/html_tables.asp

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

This would make it easier to customize the table / grid as well as having no issues with the widths at all. This rectangle on the right top edge doesn't look good...

I'm not sure if this is a feature request or just a discussion / idea for the developers :) I just wanted to bring this in and get an explanation why you chose to do it that way (And maybe get a fix for this as well).

Best regards,

Christian

Please add an attribute to Blazor GridColumn which allows to easily align text horizontal in a GridColumn

e.g. <GridColumn Field="@(nameof(Item.Price))" Title="Price" HorizontalAlignment="Right" />

At least: Left, Right, Center

Hi!

When i set GridCommandButton 

<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Save</GridCommandButton>

in a Grid component, I always get a Button with a label "Update". How can I change this? 

Thank you!

I have a blazor grid with a large number of columns which I would like to have the width of the page and a horizontal scrollbar to be able to scroll through all of the columns.

According the the documentation I have found (https://demos.telerik.com/blazor-ui/grid/scrolling), setting the width of the grid to 100% and providing widths for the columns which exceed that of the width of the grid/page should cause the horizontal scrollbar to appear. Instead of doing this, however, the grid just expands horizontally to fit all of the columns, no matter what I try. In addition, it appears to be expanding the entire page horizontally to fit itself, as it is increasing the size of all of my bootstrap columns so that it fits within the bootstrap container.

Here is an example of a page containing a grid where I am experiencing this:

@page "/admin/users/manageusers"
@inherits ManageUsersBase


<h3>Manage Users</h3>

<WS7.Components.PDAuthorizeBase AllowedRoleIds="ManageAllUsers,ManageAssignedUsers" />
@if (this.Users == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <div class="form-group">
        <label for="UserSearch" class="col-form-label">Search</label>
        <input id="UserSearch" class="form-control" type="search" aria-label="User Search" placeholder="Search" @bind-value="Filter" @bind-value:event="oninput" />
    </div>


    <TelerikGrid Data="@FilteredUsers" TItem="WS7.Engine.Models.ViewModels.ManageUsersViewModel" Height="600px" Width="100%" Pageable="true" PageSize="40" Sortable="true" Groupable="false"
                 FilterMode="GridFilterMode.FilterMenu" Resizable="true" Reorderable="true" OnEdit="EditUser" ScrollMode="@GridScrollMode.Scrollable">
        <GridToolBar>
            <GridCommandButton OnClick="(()=>AddUser())">
                <span class="oi oi-plus"></span> Add
            </GridCommandButton>
        </GridToolBar>
        <GridColumns>
            <GridCommandColumn Width="100px">
                <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>


            </GridCommandColumn>

            <GridColumn Field="UserName" Title="User Name" Width="500px" />
            <GridColumn Field="Email" Title="Email" Width="500px" />
            <GridColumn Field="FirstName" Title="First Name" Width="500px" />
            <GridColumn Field="LastName" Title="Last Name" Width="500px" />
            <GridColumn Field="AccountStatus" Title="Account Status" Width="500px">
                <Template>
                    @{
                        string toolTip;
                        WS7.Engine.Models.ViewModels.ManageUsersViewModel user = context as WS7.Engine.Models.ViewModels.ManageUsersViewModel;
                        toolTip = "Account Status: " + user.AccountStatus;
                        toolTip += Environment.NewLine + "Active: " + user.Active.ToString();
                        toolTip += Environment.NewLine + "Email Confirmed: " + user.EmailConfirmed.ToString();
                    }
                    <div class="badge badge-pill badge-info">
                        <span class="oi oi-info" data-toggle="tooltip" data-placement="top" title="@toolTip"></span>
                    </div>
                </Template>
            </GridColumn>

            @*<GridCommandColumn Width="90px">
                    <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
                </GridCommandColumn>*@
        </GridColumns>
    </TelerikGrid>
}

---

ADMIN EDIT

You can find some more details on  the origin of the issue in the thread below and in the following Knowledge Base article, which also offers a few ideas for solutions to this browser behavior: https://docs.telerik.com/blazor-ui/knowledge-base/grid-bootstrap-flex-width-issue

---