Questions on UI for Blazor Forum

1 answer

270 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

884 views

[Solved] 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

289 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

227 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

144 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

631 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.4K+ 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

0 answers

146 views

How to persist state of grid after popup editing with SetState ?

I have a grid with a hierarchy grid inside it. I can expand each row in the master grid but when I edit one row (I use popup mode to edit) after closing the popup all rows collapse.
I try to save the grid state and then set the state in the OnStateChangeHandler event but its not working correctly it seems that the grid state has been set after closing popup by an unknown event.

Grid