Completed
Last Updated: 25 Feb 2022 10:34 by ADMIN
Release 3.1.0
Eric
Created on: 09 Mar 2020 08:45
Category: Grid
Type: Feature Request
21
Allow customizations in the Editing Popup

I would like to be able to customize the title in Editing Popup. 

 

<AdminEdit>

We plan to expose the following customization options:

  • Title,
  • Width
  • Height
  • MaxWidth
  • MaxHeight

</AdminEdit>

15 comments
ADMIN
Joana
Posted on: 25 Feb 2022 10:34

Hello Andy,

Yes, it will be included in the 3.2.0 release planned for next week.

Regards,
Joana
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Andy F.
Posted on: 24 Feb 2022 13:28
Hi Joana, thank you, that was fast, going from planned to development to completed, does that mean title will be included in the release now?
ADMIN
Joana
Posted on: 24 Feb 2022 07:15

Hi Andy,

Thank you for the quick response.

We have moved this item to In Development, and we added the Title parameter as well based on your feedback. It is in testing stage and if everything works as expected we will change the status to Completed.

Regards,
Joana
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Andy F.
Posted on: 23 Feb 2022 21:32
Title is the big deal to me.  Size didn't matter as much.  That's why I found a workaround... is this update going to break that workaround?
ADMIN
Joana
Posted on: 23 Feb 2022 21:29

Hi everyone,

We will release PopupEditSettings in our 3.1 release scheduled for early March for our databound components that support popup editing.

We will provide options to configure Width, MaxWidth, MinWidth, Height, MaxHeight, MinHeight, Class parameters of the Window. The title of the popup is controlled through our localization resource, and thus it will not be a customizable parameter of the settings tag. However, we would really appreciate any feedback on the matter.

In addition, we will provide PopupEditFormSettings that will allow you to customize the Orientation of the form along with Columns, ColumnSpacing parameters of the form.

Regards,
Joana
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

improwise
Posted on: 25 Jan 2022 14:51
3.0 release with these settings for most other controls but not for the Grid where at least we would need it the most?
improwise
Posted on: 13 Jan 2022 11:53

Since the sizing of Popup edit form obviously isn't working (window to small to fit even simple content) we added this as a temporary fix

 

.k-window.k-window-wrapper.telerik-blazor.k-widget.k-centered {
    width: 1000px;
}

 

But perhapas there is a better "target" for this than .k-window.k-window-wrapper.telerik-blazor.k-widget.k-centered with less side effects?

 

Thanks.

improwise
Posted on: 12 Jan 2022 14:01
Is there a way we could work around this until a fix is implemented, like forcing the popup edit form to always be a specific size via CSS like always full screen or something like that? Of course not ideal but for the time being that seems to be the only way as an alternative so make your own custom implementation. 
improwise
Posted on: 12 Jan 2022 01:03
So if I understand this correctly, the TelerikGrid is currently unable to produce a popup edit form that can fit the fields of the grid and you have to do it manually and as of now, there is not time plan for when this will be fixed? 
ADMIN
Svetoslav Dimitrov
Posted on: 07 Dec 2021 10:17

Hello Jura,

We have added this item into our short-term planning, thus the absence of a specific release. Once we do our planning, the release will be available here as well. 

Regards,
Svetoslav Dimitrov
Progress Telerik

Learn about the important changes coming in UI for Blazor 3.0 in January 2022!
jura
Posted on: 30 Nov 2021 12:04
When is this planned to be done?
Andy F.
Posted on: 04 Aug 2021 21:59
Use headerTemplate for the header text in the grid, and title for the label in the popup.  👍
ADMIN
Marin Bratanov
Posted on: 12 Dec 2020 09:01

Hi Peter,

The best way to get news is to click the Follow button on the page - when something happens you will get an email. For example, when we know the release that will contain it, we update the portal pages.

For the time being, using a custom popup form is the option.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Peter
Posted on: 11 Dec 2020 18:56
Any news for this small feature? I need german titles for the popup.
ADMIN
Svetoslav Dimitrov
Posted on: 09 Mar 2020 10:44

Hello Eric,


As a workaround you could create a custom Window that will contain your Edit form (you can see an example of custom editing popup here) and where you can assign a title to your liking. I have created a code snippet for you that you can use as a starting point.

The custom things i did are highlighted in the code snippet. Basically, I have created a bool property that will show the Window (for more information on Blazor Window click here). I used that Window as a container for my custom edit form. On click of the Save button the information will change in the Grid. You can Close/Minimize/Maximize the Window from the built-in functionality.

 

<TelerikGrid Data=@GridData
             Height="500px" Pageable="true" PageSize=@PageSize>
    <GridToolBar>
        <GridCommandButton Command="Add" Icon="add">Add Employee</GridCommandButton>
    </GridToolBar>
    <GridColumns>
        <GridColumn Field=@nameof(SampleEmployee.Id) Editable="false" Width="70px" />
        <GridColumn Field=@nameof(SampleEmployee.Name) />
        <GridColumn Field=@nameof(SampleEmployee.LastName) Title="Surname" />
        <GridColumn Field=@nameof(SampleEmployee.AgeInYears) Title="Age" />
        <GridColumn Field=@nameof(SampleEmployee.HireDate) Title="Hire Date" />
        <GridCommandColumn Width="120px">
            <GridCommandButton OnClick="@((arg) => OpenEditWindow(arg.Item as SampleEmployee))">My custom edit</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@if (ShowEdit == true)
{
    <TelerikWindow Class="demo-window" Width="500px" Height="300px" Centered="true" Visible="true">
        <WindowTitle>
            <strong>My title</strong>
        </WindowTitle>
        <WindowActions>
            <WindowAction Name="Minimize"></WindowAction>
            <WindowAction Name="Maximize"></WindowAction>
            <WindowAction Name="Close"></WindowAction>
        </WindowActions>
        <WindowContent>
            <div class="form-group ">
                <label class="control-label" for="productName">
                    Product Name
                </label>
                <input class="form-control" @bind="@selectedEmployee.Name" type="text" />
            </div>
            <div class="form-group ">
                <label class="control-label" for="productName">
                    Product Name
                </label>
                <input class="form-control" @bind="@selectedEmployee.LastName" type="text" />
            </div>
            <div class="form-group">
                <div>
                    <TelerikButton Icon="save" Class="k-primary" OnClick="@CustomEdit">Save</TelerikButton>
                </div>
            </div>
        </WindowContent>
    </TelerikWindow>
}

@code {
    public class SampleEmployee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string LastName { get; set; }
        public int AgeInYears { get; set; }
        public DateTime HireDate { get; set; }
    };

    private SampleEmployee selectedEmployee { get; set; }
    private SampleEmployee originalEmployee { get; set; }

    private bool ShowEdit { get; set; } = false;

    private void OpenEditWindow(SampleEmployee employee)
    {
        originalEmployee = employee;
        selectedEmployee = new SampleEmployee()
        {
            Id = employee.Id,
            Name = employee.Name,
            LastName = employee.LastName,
            AgeInYears = employee.AgeInYears,
            HireDate = employee.HireDate
        };
        ShowEdit = !ShowEdit;

    }
    private void CustomEdit()
    {
        originalEmployee.Name = selectedEmployee.Name;
        originalEmployee.LastName = selectedEmployee.LastName;
    }

    int PageSize = 15;
    public List<SampleEmployee> GridData { get; set; }

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

        for (int i = 0; i < 100; i++)
        {
            GridData.Add(new SampleEmployee()
            {
                Id = i,
                Name = "Name " + i.ToString(),
                LastName = "Surname " + i.ToString(),
                AgeInYears = rand.Next(10, 80),
                HireDate = DateTime.Now.Date.AddDays(rand.Next(-20, 20))
            });
        }
    }
}
<style type="text/css">
    .demo-window {
        z-index: 44444;
    }
</style>

 

Regards,
Svetoslav Dimitrov
Progress Telerik

 UI for Blazor