Questions on UI for Blazor Forum

0 answers

318 views

Cascading DropDownList in Grid Editing (Inline) - article needs to be adjusted

it will work when you need to select the value in parent drop down, but for example on edit, the value is already selected & the event will not be fired to get filtered data to child dropdown , my sugestion to combine the solution with data being preoladed for the editing item on Grid=> OnEdit event

private async Task GridRowEdit(GridCommandEventArgs args)
    {
        Console.WriteLine("GridRowEdit");
        if (args.Item is ProductSubmissionModel model)
        {
            await ViewModel.LoadLabs(model.Jurisdiction?.Key);
        }
    }

Grid

updated question on 18 Jun 2022

1 answer

425 views

Can The Telerik Blazor and ASP.NET tools be used in a Docker Container

We are working on a application rewrite and wanted to see if your tools can be used within a Docker Container.

General Discussions

answered on 17 Jun 2022

1 answer

272 views

TelerikGrid Creating Command Buttons in DetailTemplate Grid

I am in the learning phase of Telerik currently, so I assume that I am missing something obvious here. I have the following code:

<TelerikGrid Data="@EquipmentList" Groupable="true" Pageable="true">
    <DetailTemplate>                   
        <TelerikGrid Data="@context.TaskList">
            <GridColumns>
                <GridColumn Field="TaskTitle" Title="Task"></GridColumn>
                <GridColumn Field="TaskDetail" Title="Detail"></GridColumn>
                <GridCommandColumn>                    
                    <GridCommandButton Command="OpenPDFCommand" Icon="file" OnClick="@(()=> FileService.OpenPDF(TaskPDF))"> Test Command</GridCommandButton>             
                </GridCommandColumn>
            </GridColumns>
        </TelerikGrid>
    </DetailTemplate>
    <GridColumns>
        <GridColumn Field=EquipmentName></GridColumn>
    </GridColumns>
</TelerikGrid>

This is the beginning of a maintenance task tracking site. The basic format of data is

List<Equipment> and Equipment has List<MaintenanceTask> in it -- so a List within a List.

I can get the data to show properly, but when I add the Command column to start adding functionality to the page, I get two errors that I don't fully understand:

1) 
The child content element 'ChildContent' of component 'GridCommandColumn' uses the same parameter name ('context') as enclosing child content element 'DetailTemplate' of component 'TelerikGrid'. Specify the parameter name like: '<ChildContent Context="another_name"> to resolve the ambiguity C:\Users\StevenDeam.ASIMOV\source\repos\JM3Telerik\JMWeb\Pages\Maintenance\MaintenanceMain.razor 

2) 
The name 'context' does not exist in the current context	JMWeb	C:\Users\StevenDeam.ASIMOV\source\repos\JM3Telerik\JMWeb\Pages\Maintenance\MaintenanceMain.razor	9

I did test adding a bogus context:

<GridCommandColumn>                    
                    <ChildContent Context="test">

This changed the error to say the namespace "test" could not be found. I am missing something on how the commandcolumn relates to the grid it seems. And none of the documentation that I can find shows the context of a commandcolumn needing to be changed.

Grid

answered on 16 Jun 2022

1 answer

226 views

Telerik Blazor drawer not allowing content to overflow

Hello, I'm currently using the Telerik drawer as a static menu on the left of our project. We're using the template to customize the components being loaded into the drawer and would like the upper most component (profile image) to extend about 50% out of the drawer and into our header. You can view the look we want to accomplish from the drawerWant image and view the behavior we're currently getting from the drawerHave image.

Drawer

answered on 16 Jun 2022

1 answer

820 views

How to format headings in a TelerikForm on a Blazor razor page?

I have Blazor razor page with a TelerikForm. The form has a variety of form items in various groups.

Q How can I forrmat the group headings; specifically set them to bold and to set the color?

I guess that something needs to be added to:

<FormGroup LabelText="Form Heading"
                           Columns="2"
                           ColumnSpacing="15px">

or something in

        <TelerikForm EditContext="@EditContext" Orientation="@FormOrientation" 
                     OnValidSubmit="@HandleValidSubmit"

                     OnInvalidSubmit="@HandleInvalidSubmit">

Form

answered on 16 Jun 2022

0 answers

246 views

How can I programmatically group when binding to ExpandoObject data?

I'm trying to define pre-set groupings for my data on known columns in my dataset. But whenever I try and set the @ref property on the TelerikGrid I get the following build error.

I've defined the TelerikGrid object in the @code section

TelerikGrid<List<ExpandoObject>>? Grid { get; set; }

I've declared the Data property on the TelerikGrid as being bound to List<ExpandoObject>

            @if (model is not null && model.DegradeTableRows is not null && model.DegradeTableRows.Any())
            {
                <TelerikGrid 
                    Data="@model.DegradeTableRows" 
                    Width="100%"
                    Height="100%"
                    Groupable="true"
                    Pageable="false" 
                    Sortable="true"
                    FilterMode="@GridFilterMode.FilterMenu">
                    <GridAggregates>
                        <GridAggregate Field="Total Pieces" FieldType="@typeof(decimal)" Aggregate="@GridAggregateType.Sum"/>
                        <GridAggregate Field="Total % Total" FieldType="@typeof(decimal)" Aggregate="@GridAggregateType.Sum"/>
                    </GridAggregates>
                    <GridColumns>
                        <GridColumn Field="category" Width="110px" FieldType="@typeof(string)" Title="Category"/>
                        <GridColumn Field="month" Width="100px" Title="Month" FieldType="@typeof(DateTime)" DisplayFormat="{0:d}"/>
                        <GridColumn Field="rank" Width="80px" FieldType="@typeof(int)" Title="Rank"/>
                        <GridColumn Field="reason" FieldType="@typeof(string)" Title="Reason"/>
                        @if (LengthColumnNames is not null && LengthColumnNames.Any())
                        {
                            foreach (var lengthColumnName in LengthColumnNames)
                            {
                                <GridColumn Width="75px" Field="@lengthColumnName" FieldType="@typeof(decimal)" Title="@lengthColumnName"/>
                            }    
                        }
                        <GridColumn Field="Total Pieces" FieldType="@typeof(decimal)" Title="Total Pieces"/>
                        <GridColumn Field="Total % Total" FieldType="@typeof(decimal)" Title="Total % Total"/>
                    </GridColumns>
                </TelerikGrid>
            }

So I don't know why I'm getting the errors when I try to build.

I'd need to group the data when the grid comes up

                var desiredState = new GridState<List<ExpandoObject>>()
                {
                    GroupDescriptors = new List<GroupDescriptor>()
                    {
                        new GroupDescriptor()
                        {
                            Member = "month",
                            MemberType = typeof(DateTime)
                        }
                    } // end new list of group descriptors
                }; // end new grid state
                if (Grid is not null)
                {
                    await Grid.SetState(desiredState);
                }

If I add the @ref="@Grid" property to the Grid definition, I get the build error. I can comment out the code to set the group state and I still get the build error.

Is there a way around this?

Grid

asked on 15 Jun 2022

1 answer

205 views

Grid Header cancel OnClick for sorting

Hi

If I have a column header ina grid which is sortable, and in the header template I place a button, then clicking said button will perform whatever the button's onclick is as well as changing the sort of the column. I don't see a way to mark the click as handled, prevent it bubbling up and being handled a second time by the grid header. Is there a way to achieve this currently?

Grid

answered on 15 Jun 2022

1 answer

123 views

TreeList - Difference between TreeList.GetState() and TreeList.State

Hi,

I'm trying to understand if there is any difference between using TreeList.GetState() and TreeList.State? I want to examine the state of the tree list in the most efficient manner possible, and TreeList.State seems like the obvious choice, but the docs all use the GetState() method.

Thanks.

TreeList

answered on 15 Jun 2022

1 answer

602 views

TreeList - How can I determine if a row has the ability to expand/collapse?

Hi,

I've bound a TreeList to flat data. How can I determine if the TreeList has determined that a given row can be expanded/collapsed based upon the flat data, (i.e., how can I determine whether or not an expend/collapse arrow has been placed on the row)? This has an additional complexity in that the list cannot expand/collapse a row if it does not have children.

A use case for this would be to react to a double-click in a row and expand or collapse the row if the row is allowed to do that.

TreeList

answered on 15 Jun 2022

2 answers

1.3K+ views

How to upload FileSelect Results from Blazor WASM app

I am trying to use the File Select component in a Blazor WASM app to upload a file. However, when I try to read the stream in the FileSelectEventArgs object, it's coming out empty. I do get a value for the stream length but reading it into a byte array is producing an array of 0's. Here's my code:

@code {
    List<string> CpmAllowedExtensions { get; set; } = new List<string> { ".pdf" };

    async Task HandleFiles(FileSelectEventArgs args)
    {
        foreach (var file in args.Files)
        {
            if (!file.InvalidExtension)
            {
                var b = new byte[file.Stream.Length];
                await file.Stream.ReadAsync(b, 0, b.Length);
                //b is blank here
            }
        }
    }
}

<TelerikFileSelect OnSelect=@HandleFiles AllowedExtensions="@CpmAllowedExtensions"></TelerikFileSelect>

How do I get to the byte array in the file so that I can upload it? The example I see in the Docs doesn't seem to be for uploading a file and trying to use a filestream as it does is producing the same result as my code above.

Also, I tried uploading the file.Stream using a SteamContent object but nothing is getting sent in the request payload.

FileSelect

answered on 14 Jun 2022