Can you add a confirmation popup to the grid row delete like what is in the JQuery UI library?

---

ADMIN EDIT

As of 2.23.0 predefined confirmation dialog is available for use with just a few lines of code and you can achieve that behavior through the OnClick event of the command button:

<TelerikGrid Data=@GridData EditMode="@GridEditMode.Inline"
             Height="500px" AutoGenerateColumns="true" Pageable="true"
             OnDelete="@DeleteItem">
    <GridColumns>
        <GridAutoGeneratedColumns />

        <GridCommandColumn Width="100px">
            <GridCommandButton Command="Delete" Icon="delete" OnClick="@ConfirmDelete">Delete</GridCommandButton>
        </GridCommandColumn>

    </GridColumns>
</TelerikGrid>

@code {
    //for the confirmation - see the OnClick handler on the Delete button
    [CascadingParameter]
    public DialogFactory Dialogs { get; set; }

    async Task ConfirmDelete(GridCommandEventArgs e)
    {
        Product productToDelete = e.Item as Product;
        string confirmText = $"Are you sure you want to delete {productToDelete.Name}?";
        string confirmTitle = "Confirm Deletion!";
        //the actual confirmation itself
        bool userConfirmedDeletion = await Dialogs.ConfirmAsync(confirmText, confirmTitle);
        e.IsCancelled = !userConfirmedDeletion;//cancel the event if the user did not confirm
    }

    // only sample data operations follow

    public List<Product> GridData { get; set; }

    protected override async Task OnInitializedAsync()
    {
        GridData = Enumerable.Range(1, 50).Select(x => new Product { Id = x, Name = $"Name {x}" }).ToList();
    }

    private void DeleteItem(GridCommandEventArgs args)
    {
        Console.WriteLine("DELETING ITEM");
        var argsItem = args.Item as Product;

        GridData.Remove(argsItem);
    }

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

---

Hi !

How can i hide some columns on small device ?

Telerik.Blazor.Components.GridColumn.Class does not exist ?

Regards,

--------

ADMIN EDIT

This will be done through the Visible parameter of the column. You can bind it to a flag that hides the column for the desired scenarios (resolution, user settings, etc.). The new feature we provide to facilitate this will be a MediaQuery component that lets you have an easy flag in the C# code based on the media query for the desired resolution. There will be a demo how to use it with the grid columns when the 2.23.0 release is live. With this approach you will still use a CSS media query, but this will give you more flexibility to use it in more functionality than just the grid columns, and will avoid adding extra properties to the column.

--------

Hi,

I'm testing the grid on mobile and I've noticed that the pager can end up being cut off the edge of the screen. The app is designed to not allow scrolling in the HTML window but it does allowing scrolling in the grid (and navbar). This works, but the pager is cutting off. Is there any way it can be made more responsive or made to wrap in a relatively neat way without breaking the control?

See attached image.

Thanks,

Nick

The GroupFooterTemplate works great for showing aggregate values per group.

Need the same functionality for the entire Grid, ie, sum of all values displayed for a column even if no grouping is applied.

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.

---

I have a grid with the excell Export. Now I have two custom Export buttons on the Page (Over and under the Grid).

Can I somehow trigger the Grid Excell Export command Manually? 

---

ADMIN EDIT

Here is a workaround - a bit of JS to click the desired button and the second snippet shows how to invoke it from a blazor component and code.

 <script>
        function clickButton(selector) {
            var btn = document.querySelector(selector);
            if (btn && btn.click) {
                btn.click();
            }
        }
    </script>

@inject IJSRuntime _js

<style>
    /* hide the built-in button if you like */
    .myExcelExportButton {
        display:none;
    }
</style>

<button @onclick="@MyExternalExportTrigger">my external export button</button>

<TelerikGrid Data="@GridData" Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
             FilterMode="@GridFilterMode.FilterRow" Groupable="true"
             Class="@GridClass">
    <GridToolBar>
        <GridCommandButton Class="@ExportBtnClass" Command="ExcelExport" Icon="@IconName.FileExcel">Export to Excel</GridCommandButton>
        <label><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
    </GridToolBar>
    <GridExport>
        <GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
    </GridExport>

    <GridColumns>
        <GridColumn Field="@nameof(SampleData.ProductId)" Title="ID" Width="100px" />
        <GridColumn Field="@nameof(SampleData.ProductName)" Title="Product Name" Width="300px" />
        <GridColumn Field="@nameof(SampleData.UnitsInStock)" Title="In stock" Width="100px" />
        <GridColumn Field="@nameof(SampleData.Price)" Title="Unit Price" Width="200px" />
        <GridColumn Field="@nameof(SampleData.Discontinued)" Title="Discontinued" Width="100px" />
        <GridColumn Field="@nameof(SampleData.FirstReleaseDate)" Title="Release Date" Width="300px" />
    </GridColumns>
</TelerikGrid>

@code {
    // cascade through classes on the grid and/or on the built-in button to click it with JS
    // so that it can invoke the built-in export operations
    string GridClass { get; set; } = "MyGrid";
    string ExportBtnClass { get; set; } = "myExcelExportButton";
    async Task MyExternalExportTrigger()
    {
        var selector = $".{GridClass} .k-header .{ExportBtnClass}";
        await _js.InvokeVoidAsync("clickButton", selector);
    }



    List<SampleData> GridData { get; set; }
    bool ExportAllPages { get; set; }

    protected override void OnInitialized()
    {
        GridData = Enumerable.Range(1, 100).Select(x => new SampleData
        {
            ProductId = x,
            ProductName = $"Product {x}",
            UnitsInStock = x * 2,
            Price = 3.14159m * x,
            Discontinued = x % 4 == 0,
            FirstReleaseDate = DateTime.Now.AddDays(-x)
        }).ToList();
    }

    public class SampleData
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public int UnitsInStock { get; set; }
        public decimal Price { get; set; }
        public bool Discontinued { get; set; }
        public DateTime FirstReleaseDate { get; set; }
    }
}

---

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.

How do I get the filter menu to allow input of Date *and* Time for a DateTime column?

When a column is displayed conditionally, it's order is not preserved. In the code sample below, the ProductId column is the first column in the grid.  When you click the checkbox to hide the column, it is removed.  Click the checkbox again and the column reappears but it is the last column in the grid.

ADMIN EDIT: At the end of this post there is an attachment with a workaround through a custom column chooser.

<input type="checkbox" @onchange="@ToggleColumn" />

<TelerikGrid Data=@GridData>
    <GridColumns>
        @if (ShowColumn)
        {
            <GridColumn Field=@nameof(Product.ProductId) Title="Id" />
        }
        <GridColumn Field=@nameof(Product.ProductName) Title="Product Name" />
        <GridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price">
            <Template>
                @(String.Format("{0:C2}", (context as Product).UnitPrice))
            </Template>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    public IEnumerable<Product> GridData { get; set; }
    bool ShowColumn = true;

    protected override void OnInitialized()
    {
        List<Product> products = new List<Product>();
        for (int i = 0; i < 20; i++)
        {
            products.Add(new Product()
            {
                ProductId = i,
                ProductName = "Product" + i.ToString(),
                UnitPrice = (decimal)(i * 3.14)
            });
        }

        GridData = products.AsQueryable();
    }

    private void ToggleColumn(ChangeEventArgs args)
    {
        ShowColumn = (bool)args.Value;
    }

    public class Product
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public decimal UnitPrice { get; set; }
    }
}

Like this (example taken from "https://demos.telerik.com/aspnet-mvc/grid/editing-custom-validation"): 

Hello,

First of all: thank you for implementing the Excel like filtering with the new CheckBox Filter! This was a feature that was highly sought after in our development team.

But there is one thing I am missing: the checkbox list has no option for sorting.

If we want to sort our filters now we have to implement the FilterMenuTemplate in every column that has filtering active (which are a lot) and define the list with filter options and filter it ourselves. 

Is this something that can be fixed easily?

---

ADMIN EDIT

We will probably sort ascending the values by default (out-of-the0box), and any other custom sorts should be implemented through the filter menu template.

---