Grid column header and content alignment (horizontal +Vertical)

---

ADMIN EDIT

For the time being, this is possible through the CellRender event, see below in the thread for an example.

---

Description

The left offset style value is not correctly formatted. It is culture-specific, however, the CSS rules should be formatted with culture invariant decimal separator - dot. 

Reproduction (if bug)

1. Create a grid with locked columns. 

2. Set the culture to one that has a comma as the decimal separator.

3. Resize the frozen columns, the left value is formatted with a comma instead of a dot.

Expected (if bug)

The value should be formatted with a dot.

Browser (if bug)
All

Project type (if bug)
All

I want to place the Pager on top of the Grid. I know it can be handled with a Pager component integration in the Grid Toolbar, but I want to use the Toolbar for other purposes/actions. Please allow control over the Pager position.

I set the GridColumn DisplayFormat="{0: yyyy-MM-dd}" and the data reflects that format. The default filter control doesn't. How can I make the control do that?

---

ADMIN EDIT

For the time being, the way to affect the filter behavior is through a custom filter template. The format for date pickers and numeric textboxes comes from the app culture settings (see more here). You may also want to Follow this idea for easier selection of a default filter operator and limiting the filter operators choices.

---

Navigable="true" + OnRead data binding allow the user to go beyond the last Grid page. The component shows no rows, and even though the user can return to previous pages, it's cumbersome.

The workaround is to manage the Page value manually in the PageChanged handler.

@using Telerik.DataSource.Extensions

@*  workaround:  *@

@*Page="@GridPage"
PageChanged="@OnGridPageChanged"*@

<TelerikGrid OnRead="@OnGridRead"
             Navigable="true"
             TItem="@Product"
             Pageable="true">
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)" Title="Product Name" />
    </GridColumns>
</TelerikGrid>

@code {
    List<Product> GridData { get; set; }
    int GridPage { get; set; } = 1;
    int GridTotal { get; set; }

    // workaround
    void OnGridPageChanged(int newPage)
    {
        if (newPage > 0 && newPage <= Math.Ceiling((double)GridTotal / (double)10))
        {
            GridPage = newPage;
        }
    }

    void OnGridRead(GridReadEventArgs args)
    {
        var result = GridData.ToDataSourceResult(args.Request);

        args.Data = result.Data;
        args.Total = result.Total;

        // workaround
        //GridTotal = result.Total;
    }

    protected override void OnInitialized()
    {
        GridData = new List<Product>();
        var rnd = new Random();

        for (int i = 1; i <= 12; i++)
        {
            GridData.Add(new Product()
            {
                Id = i,
                Name = "Product " + i.ToString()
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

When Grid is nested in a Window, pressing Escape key will bubble to the Window causing it to close during edit operation of the Grid.

1. Go to https://blazorrepl.telerik.com/mQaUcSlP59yrfqmM16 
2. Trigger Grid's keyboard navigation.
3. Press Escape(whether it is to close an Editor, or not).
4. Observe Window will close.

Hello Team,

I am using "FilterMode="GridFilterMode.FilterRow". For int values there is a "numeric chooser" in the column header and the filter option "contains" is not available.

This is the correct behaviour. But when I bind the column to a ulong, ushort, ... value theses seems to be considered as string. There is no "numeric chooser"  and the filter "contains" is available, which resullts in further problems with the OData endpoint.

I noticed Telerik Blazor grid is rendered into two tables. One for the headers and one for the contents.

My assumption is that Allyable Scan expects to find a th element inside the second table and it did not find any. Is my assumption correct? 

Element source:

<table role="grid" style="width: ;">

If the Grid has no data, selecting null PageSize throws:

Error: System.ArgumentException: Page Size cannot be less than one (Parameter 'PageSize') 

---

ADMIN EDIT

---

A possible workaround for the time being will be to use some conditional CSS to disable the PageSize dropdown while there is no data in the Grid: https://blazorrepl.telerik.com/QcOpkTlb38EDFboT34.

I want to customize the appearance of the header of a certain column, and a bit of CSS backgrounds could help, but I can't do this with the HeaderTemplate alone, nor with content in it because of the padding the cells have.

So, I would like the ability to set the CSS class of the header cell of the column.

The idea of the feature is to be able to customize the list of FilterOperators displayed in the list of the FilterRow and FilterMenu.

FilterRow UI element

FilterMenu UI element

In hierarchical Grid with InCell edit the DateTime cells of the child Grid cannot be edited through the calendar popup. Trying to open the DatePicker or DateTimePicker popup of the child Grid automatically closes the edited cell.

The Grid OnEdit event cannot be cancelled if the user tabs into a cell that should not allow editing.

REPL test page: https://blazorrepl.telerik.com/QcERELbm37c9SzzZ32

Click on "Foo 2" or "Bar 2", and start tabbing. You will be able to edit the values on row 3, which should not happen.

There are two possible workarounds: use a conditional EditorTemplate, or check editability in OnUpdate.

<TelerikGrid Data="@GridData" EditMode="@GridEditMode.Incell" Navigable="true"
             OnEdit="@EditItem" OnUpdate="@UpdateItem">
    <GridColumns>
        <GridColumn Field="@nameof(GridModel.Foo)" Title="Foo (bug)" />
        <GridColumn Field="@nameof(GridModel.Bar)" Title="Bar (workaround)">
            @*<EditorTemplate>
                @{
                    var item = context as GridModel;
                    // workaround 1
                    if (item.IsEditable)
                    {
                        <TelerikTextBox @bind-Value="@item.Bar" />
                    }
                    else
                    {
                        <span class="k-textbox k-input k-rounded-md">
                            <input class="k-input-inner" tabindex="0" readonly value="@item.Bar" />
                        </span>
                    }
                }
            </EditorTemplate>*@
        </GridColumn>
        <GridColumn Field="@nameof(GridModel.IsEditable)" Title="Is Row Editable?" Editable="false" />
    </GridColumns>
</TelerikGrid>

@code {
    List<GridModel> GridData { get; set; }

    void EditItem(GridCommandEventArgs args)
    {
        GridModel item = args.Item as GridModel;
        if (!item.IsEditable)
        {
            args.IsCancelled = true;
        }
    }

    void UpdateItem(GridCommandEventArgs args)
    {
        var argsItem = args.Item as GridModel;
        var index = GridData.FindIndex(i => i.Id == argsItem.Id);
        // workaround 2
        //if (index != -1 && argsItem.IsEditable)
        //{
            GridData[index] = argsItem;
        //}
    }

    protected override void OnInitialized()
    {
        GridData = new List<GridModel>();

        for (int i = 1; i <= 5; i++)
        {
            GridData.Add(new GridModel()
            {
                Id = i,
                Foo = "Foo " + i.ToString(),
                Bar = "Bar " + i.ToString(),
                IsEditable = i % 2 == 0
            });
        }
    }

    public class GridModel
    {
        public int Id { get; set; }
        public string Foo { get; set; }
        public string Bar { get; set; }
        public bool IsEditable { get; set; }
    }
}