Duplicated
Last Updated: 22 Apr 2024 12:34 by ADMIN
Steve
Created on: 10 Mar 2020 11:19
Category: Grid
Type: Feature Request
1
Edit Date *and* Time

I would like to be able to edit both Date and Time in Grid editing mode.

===

Telerik edit: Possible since version 3.1.0 with through the column EditorType parameter.

Duplicated
This item is a duplicate of an already existing item. You can find the original item here:
1 comment
ADMIN
Svetoslav Dimitrov
Posted on: 10 Mar 2020 13:25

Hello Steve,

At the moment the editor is a DatePicker, but ideally it should be either a DateTimePicker or a configurable option (Date, DateTime or DateTimePicker), maybe in a fashion similar to this one: https://feedback.telerik.com/blazor/1454076-filter-date-time-in-grid.

As a workaround, for the time being, I would suggest you use a custom editor template, here's an example, just a couple more lines in the column definition:

 

<TelerikGrid Data=@GridData
             Height=@Height
             Pageable="true" PageSize=@PageSize
             OnUpdate="UpdateHandler">
    <GridColumns>
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
        </GridCommandColumn>
        <GridColumn Field=@nameof(Product.ProductName) Title="Product Name" />
        <GridColumn Field=@nameof(Product.DeliveryDate) Title="Delivery Date">
            <EditorTemplate>
                @{
                    CurrentlyEdittedProduct = context as Product;
                    <TelerikDateTimePicker @bind-Value="@CurrentlyEdittedProduct.DeliveryDate" Width="300px" Id="select-date" />
                }
            </EditorTemplate>
        </GridColumn>
        <GridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price">
            <Template>
                @(String.Format("{0:C2}", (context as Product).UnitPrice))
            </Template>
        </GridColumn>
    </GridColumns>
</TelerikGrid>


@code {
    public class Product
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public int SupplierId { get; set; }
        public decimal UnitPrice { get; set; }
        public short UnitsInStock { get; set; }
        public DateTime DeliveryDate { get; set; }
    }

    public List<Product> GridData { get; set; }
    int PageSize = 10;
    string Height = "400px";
    public Product CurrentlyEdittedProduct { get; set; }

    public void UpdateHandler(GridCommandEventArgs args)
    {
        Product item = (Product)args.Item;

        var index = GridData.FindIndex(i => i.ProductId == item.ProductId);
        if (index != -1)
        {
            GridData[index] = item;
        }
    }

    protected override void OnInitialized()
    {
        GridData = new List<Product>();
        for (int i = 0; i < 100; i++)
        {
            GridData.Add(new Product()
            {
                ProductId = i,
                ProductName = "Product " + i.ToString(),
                SupplierId = i,
                UnitPrice = (decimal)(i * 3.14),
                UnitsInStock = (short)(i * 1),
                DeliveryDate = DateTime.Now.AddDays(4)
            });
        }
    }
}

 

 

Regards,
Svetoslav Dimitrov
Progress Telerik

 UI for Blazor