Questions on UI for Blazor Forum

1 answer

405 views

I want to add the x Close icon in the Confirmation modal

Hello there,

I am using the Telerik confirmation dialog to delete the user functionality, during the delete the user open confirmation pop-up I want to add the x Close icon top of the Confirmation modal.

here is my code for confirmation modal

var isDelete = await Dialogs.ConfirmAsync("Are you sure you would like to delete this User?", "Confirmation!");

please check the attached image for reference

I want to customize this Dialog as the attached image.

Dialog

answered on 10 Jan 2022

1 answer

136 views

Export All Pages as a button instead of a checkbox?

I would like two buttons that Export Page and Export All Pages, instead of the checkbox in the example. I tried setting the ExportAllPages in the OnClick, but as expected, the export runs before that OnClick. Maybe I'm missing an easier way to set that on a button?

<GridToolBar>
    <GridCommandButton Command="CsvExport" Icon="file-csv" OnClick="(() => SetExportAllPages())">Export All Pages</GridCommandButton>
    <GridCommandButton Command="CsvExport" Icon="file-csv" OnClick="(() => SetExportOnePage())">Export Page</GridCommandButton>

....

<GridExport>
    <GridCsvExport FileName="export" AllPages="@ExportAllPages" />
</GridExport>

Grid

answered on 08 Jan 2022

1 answer

478 views

Z-index inconsistency when ContextMenu is invoked manually vs via Selector

I've got a ContextMenu that is invoked by clicking a button ... it is not invoked via the Selector property of the ContextMenu.

<div 
    class="d-flex k-align-items-center justify-content-center icon-button"
    title="Download"
    id="download-menu"
    @oncontextmenu:preventDefault="true"
    @onclick="((MouseEventArgs e) => ShowDownloadMenu(e))">
    <i class="fad fa-file-download"></i>
    Download
</div>
<TelerikContextMenu
    @ref="@DownloadMenu"
    Data="@DownloadMenuItems"
    OnClick="@((MenuItem item) => DownloadMenuHandler(item))">
</TelerikContextMenu>

Here's where the menu is invoked:

private async Task ShowDownloadMenu(MouseEventArgs e)
{
    if (e.Button == 0)
    {
        await DownloadMenu.ShowAsync(e.ClientX, 45);
    }
}

When the context menu is invoked via code, the z-index value comes from .k-animation-container and is set to 100. As you can see, the menu is not given an explicit z-index value:

<div 
    class="k-animation-container telerik-blazor k-widget k-animation-container-shown" 
    data-id="94f3d3b5-3db1-4940-ab74-c03895eeeaa2" 
    id="94f3d3b5-3db1-4940-ab74-c03895eeeaa2" 
    style="width: auto; left: 554px; top: 45px;"

This is fine in most cases except when the ContextMenu is within a Window component, in that case the menu is displayed behind the window.

If the same context menu is invoked by way of the Selector property on the ContextMenu and a right-click, it is given an explicit z-index value (in this case 10003), such that it will display in front of the Window component:

<div 
    class="k-animation-container telerik-blazor k-widget k-animation-container-shown" 
    data-id="e0cd095f-32f8-40a5-af0b-0e0ddc2a0f71" 
    id="e0cd095f-32f8-40a5-af0b-0e0ddc2a0f71" 
    style="width: auto; z-index: 10003; top: 81px; left: 556px;">

I've tried to override the z-index by adding a Class to the ContextMenu but the class gets added to an inner <div>, not the topmost <div> so the z-index is useless.

I've tested a brute force solution by overriding z-index on the .k-animation-container class and it seems to work but it feels like overkill.

ContextMenu

answered on 08 Jan 2022

1 answer

97 views

Selecting first item in DropDownList for grid add/insert

We have a grid with editor templates for a few types that are tied to a dropdownlist that is tied to a datasource. When user clicks new/add they get an empty form (we are using popup) but we would like the drowdowns to be preselected with the first values in the datasource. How do we do this? Is there some SelectedIndex property or similar available?

We are currently doing something like this but it does not seem to nice even though it works.

Also, what is the best way to differentiate between add and update in the EditorTemplate, ie how do we know what is what?

                <EditorTemplate>
                    @{
                        EditingCorporateCustomer = context as CorporateCustomerDto;

                        if (EditingCorporateCustomer.CompanyTypeId == 0)
                        {
                            EditingCorporateCustomer.CompanyTypeId = CompanyTypes[0].Id;

                        }


                        <TelerikDropDownList Data="@CompanyTypes" @bind-Value="@EditingCorporateCustomer.CompanyTypeId"
                                             Width="95%"
                                             TextField="Name"
                                             ValueField="Id">
                        </TelerikDropDownList>
                    }
                </EditorTemplate>

DropDownList

Grid

answered on 08 Jan 2022

1 answer

291 views

Is it possible to use asp.net core controls in Blazor project?

Hi,

Would it be feasible to bring in the Telerik asp.net core package to a blazor project and use that as well?

I know using the controls will obviously be different, but there are more available there so was wondering if I could do that to widen the possibilities?

Is there any documentation on how to best go abut doing this if so?

General Discussions

answered on 07 Jan 2022

0 answers

148 views

Updating data in the EditorTemplate.

Hello, I can retrieve the correct data in the TelerikDropDownList but, when I try to update the column, I get a "Value cannot be null. (Parameter 'key')" error. The update functionality works for the other properties in the ActivityResource model. It gives me the error above when I try to update anything from the child models (Activity and Resource). Thanks for the help in advance!

Models:

  public class ActivityResource
    {
        public int ActivityId { get; set; }

        public int ResourceId { get; set; }

        public double Sequence { get; set; }

        public DateTime ScheduledStart { get; set; }

        public DateTime ScheduledEnd { get; set; }

        public double ScheduledDuration { get; set; }



        public Activity Activity { get; set; }

        public Resource Resource { get; set; }
    }

 public class Activity
    {
        public int Id { get; set; }
        public int Number { get; set; }
        public string Name { get; set; } = "New Activity";
        public string Description { get; set; }

        public ICollection<Resource> Resources { get; set; }

        public List<ActivityResource> ActivityResources { get; set; }

    }

public class Resource
    {
        public int Id { get; set; }
        public string Name { get; set; } = "New Resource";
        public string Description { get; set; }

        public int ResourceTypeId { get; set; }
        public virtual ResourceType ResourceType { get; set; }



        public ICollection<Activity> Activities { get; set; }

        public List<ActivityResource> ActivityResources { get; set; }
    }

Controller:
 public async Task UpdateActivityResourceScheduleAsync(ActivityResource schedule)
        {
            // Getting the Schedule that is in the database.
            var targetedSchedule = _ctx.ActivityResources.FirstOrDefault(r => r.ActivityId == schedule.ActivityId && r.ResourceId == schedule.ResourceId);
            bool resquence = false;

            if (targetedSchedule != null)
            {

                if (targetedSchedule.Sequence != schedule.Sequence)
                {
                    resquence = true;
                }
                // Assigning the properties.
                targetedSchedule.Sequence = schedule.Sequence;
                targetedSchedule.ScheduledStart = schedule.ScheduledStart;
                targetedSchedule.ScheduledEnd = schedule.ScheduledEnd;
                targetedSchedule.ScheduledDuration = schedule.ScheduledDuration;
                targetedSchedule.Activity = schedule.Activity;
                targetedSchedule.Resource = schedule.Resource;
                targetedSchedule.ActivityId = schedule.ActivityId;
                targetedSchedule.ResourceId = schedule.ResourceId;
                targetedSchedule.Activity = _ctx.Activities.FirstOrDefault(aId => aId.Id == schedule.ActivityId);
                targetedSchedule.Resource = _ctx.Resources.FirstOrDefault(rId => rId.Id == schedule.ResourceId);

               

            }

                // Updating the properties.
                _ctx.ActivityResources.Update(targetedSchedule);
                await _ctx.SaveChangesAsync();
}

Razor Page:
<TelerikGrid Data="@SchedulesList" Height="550px" FilterMode="@GridFilterMode.FilterMenu"
                 Sortable="true"
                 Pageable="true"
                 PageSize="20"
                 Resizable="true"
                 Reorderable="true"
                 RowDraggable="true"
                 OnStateInit="@((GridStateEventArgs<VentureBlazor.Models.ActivityResource> args) => OnStateInit(args))"
                 OnRowDrop="@((GridRowDropEventArgs<VentureBlazor.Models.ActivityResource> args) => OnRowDropHandler(args))"
                 EditMode="@GridEditMode.Incell"
                 OnUpdate="@UpdateHandler"
                 OnDelete="@DeleteHandler">
                  <DetailTemplate>
                    @{
                        var schedule = context as VentureBlazor.Models.ActivityResource;
                        <TelerikGrid Data="@schedule.Activity.Resources" Pageable="true" PageSize="5">
                            <GridColumns>
                                <GridColumn Field="Name"></GridColumn> 
                                <GridColumn Field="Description"></GridColumn>
                            </GridColumns>
                        </TelerikGrid>
                       
                    }
                </DetailTemplate> 
                 <GridToolBar>
@*            <GridCommandButton Command="Add" Icon="plus" Primary="true">Add Schedule</GridCommandButton>
*@        </GridToolBar>
        <GridColumns>
@*            <GridColumn Field="@(nameof(VentureBlazor.Models.ActivityResourceSchedule.Id))" Editable="false" />
*@            <GridColumn Title="Activity Id" Field="Activity.Id" Editable="false"/>
            <GridColumn Title="Resource Id" Field="Resource.Id" Editable="false"/>
            <GridColumn Field="@(nameof(VentureBlazor.Models.ActivityResource.Sequence))" />           
            <GridColumn Field="@(nameof(VentureBlazor.Models.ActivityResource.ScheduledStart))" />
            <GridColumn Field="@(nameof(VentureBlazor.Models.ActivityResource.ScheduledEnd))" />
            <GridColumn Field="@(nameof(VentureBlazor.Models.ActivityResource.ScheduledDuration))" />           
            <GridColumn Title="Activity Name" Field="@(nameof(VentureBlazor.Models.ActivityResource.ActivityId))">
                <EditorTemplate>
                    @{
                        CurrentlyEditedSchedule = context as VentureBlazor.Models.ActivityResource;
                        <TelerikDropDownList Data="@ActivitiesList"
                        @bind-Value="@CurrentlyEditedSchedule.ActivityId" 
                        TextField="@nameof(Activity.Name)"
                        ValueField="@nameof(Activity.Id)"
                        >
                        
                        </TelerikDropDownList>
                    }
                </EditorTemplate>
                <Template>
                    @{
                    int aId = (context as VentureBlazor.Models.ActivityResource).ActivityId;
                    Activity matchingPos = ActivitiesList.FirstOrDefault(a => a.Id == aId);
                    string textToRender = matchingPos != null ? matchingPos.Name : "Unknown";
                    <text>@textToRender</text>
                }
                </Template>
            </GridColumn>
            <GridColumn Title="Resource Name" Field="@(nameof(VentureBlazor.Models.ActivityResource.ResourceId))">
                <EditorTemplate>
                    @{
                        CurrentlyEditedSchedule = context as VentureBlazor.Models.ActivityResource;
                        <TelerikDropDownList Data="@ResourcesList"
                        @bind-Value="@CurrentlyEditedSchedule.ResourceId" 
                        TextField="@nameof(VentureBlazor.Models.Resource.Name)"
                        ValueField="@nameof(VentureBlazor.Models.Resource.Id)"
                        >
                        
                        </TelerikDropDownList>
                    }
                </EditorTemplate>
                <Template>
                    @{
                    int rId = (context as VentureBlazor.Models.ActivityResource).ResourceId;
                    VentureBlazor.Models.Resource matchingPos = ResourcesList.FirstOrDefault(r => r.Id == rId);
                    string textToRender = matchingPos != null ? matchingPos.Name : "Unknown";
                    <text>@textToRender</text>
                }
                </Template>
            </GridColumn>
            <GridCommandColumn Width="200px" Resizable="false">
                <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
                <GridCommandButton Command="Edit" Icon="edit" Primary="true">Edit</GridCommandButton>
                <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
                <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
            </GridCommandColumn>
        </GridColumns>   
    </TelerikGrid>

@code {

    private List<VentureBlazor.Models.ActivityResource> SchedulesList { get; set; }
    private List<VentureBlazor.Models.Activity> ActivitiesList  { get; set; }
    private List<VentureBlazor.Models.Resource> ResourcesList { get; set; }
    private VentureBlazor.Models.ActivityResource CurrentlyEditedSchedule { get; set; }
    private VentureBlazor.Models.Activity NewActivity = new VentureBlazor.Models.Activity();
    private VentureBlazor.Models.Resource NewResource = new VentureBlazor.Models.Resource();
    private ActivityScheduleRepository repo;
    int selectedValue { get; set; }


    protected override async Task OnInitializedAsync()
    {        
        repo = new ActivityScheduleRepository(ContextFactory.CreateDbContext());
        await LoadSchedules();
    }

    public async Task LoadSchedules()
    {
        SchedulesList = await repo.GetAllActivityResourceSchedulesAsync();
        ActivitiesList = await repo.GetAllActivitiesAsync();
        ResourcesList = await repo.GetAllResourcesAsync();
    }

 public async Task UpdateHandler(GridCommandEventArgs args)
    {        
        await repo.UpdateActivityResourceScheduleAsync((VentureBlazor.Models.ActivityResource)args.Item);
        await LoadSchedules();
    }

}

DropDownList

Grid

updated question on 06 Jan 2022

1 answer

185 views

DataGrid: Search for numbers in the search bar

I read the documentation for the grid search bar and it says you can only search for string.

There must be a workaround (:

Should I convert numbers to strings? I only want to search for integers, not decimal numbers.

Grid

answered on 06 Jan 2022

1 answer

716 views

Using PanelBar without Data bindings?

We would like to use the PanelBar but not with a datasounce but instead like kind of a TabStrip with all content defined in markup code and each panel just containing a Blazor component. But it seems like the PanelBar does not work without a data source strangely enough?

PanelBar