Questions on UI for Blazor Forum

1 answer

823 views

Refreshing Form Model Data Or Form Component

Hello,

I am currently working on an application that includes a form which exposes certain business logic dependent on if the page the form is contained in was reached alongside an included route parameter or not; if so, the page queries for information that will populate the 'Model' attribute of the Form tag with pre-existing information for updating. If the page is reached without a route parameter, then the form simply displays as blank for the user to fill out a new form.

In regards to the Telerik library, I had seen in the documentation for the Telerik Form tag that you can receive a reference for that particular component, which would then expose a "Refresh()" that, presumably, can be used for refreshing the Model data handled by the Form, in case of any changes. I had also assumed that this might work similarly to the TelerikGrid reference 'Rebind()' method in principle, where the data context for the component can be "recontextualized' whenever a change to such data is made.

My question then is this; how does one go about calling this method after properly exposing the Form component's reference, and will this particular method work similarly to how the TelerikGrid 'Rebind()' method functions in that it can refresh the data context of the component (i.e, refresh the object that is used and, subsequently, the appropriate FormItems)? Is it possible that this is the wrong approach to accomplishing refreshing data on the Form component, or should I look into a different solution altogether?

I have provided a very simple pseudo-code to help assist with explaining my desired question. Thank you in advance for the assistance, I have very much enjoyed using the Telerik library as a whole.

Form

answered on 31 Aug 2023

1 answer

293 views

Pushing Telerik pkg to Azure Artifacts

Sorry if this is not the right forum...I'm trying to push the UI for Blazor nuget package to Azure Artifacts for the build pipeline. I can't use a service to connect directly to Nuget.Telerik. I already have the package added to my project and its working fine. I installed it from the .msi

I'm following this article: https://www.telerik.com/blogs/azure-devops-and-telerik-nuget-packages and I downloaded nuget.exe v.6.7.0. When I run the command specified:

C:\Users\<my profile>\source\repos>nuget.exe push -Source "Telerik" -ApiKey az "C:\Users\<my profile>\Documents\TelerikPackages\Telerik.UI.for.Blazor.4.4.0.nupkg"

and I get an error "ERROR: This version of nuget.exe does not support updating packages to package source 'Telerik'." I 'Googled' this error and got nothing! <ugh>

Any suggestions really be appreciated!

General Discussions

answered on 30 Aug 2023

1 answer

109 views

Sorted/filtered items

If sorting and/or filtering is applied to the grid, how do I access the resulting subset of items, i.e. the items currently displayed in the grid?

Grid

answered on 30 Aug 2023

1 answer

266 views

Is there a way to control the browser level auto complete on a numeric textbox?

I'm using custom formatting in my numeric text boxes for units (in, kg, cm, etc.). The issue is that we want the browser auto complete to function within the numeric textbox, but the options that come from the history of the input all include the formatting string, so when selected, the value disappears before the onchange event since it technically contains a string. Is there a workaround for this, or something else I may be missing? Thanks for any insight!

NumericTextBox

answered on 30 Aug 2023

1 answer

138 views

<TelerikButton Icon ="calendar" - calendar does not exist in the current context

<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<TelerikButton Icon="Calendar" Primary="true" OnClick="@(_ => DateRangeFilter(3))">3 Months</TelerikButton>

Icon="Calendar" Primary="true" - both of the properties tell it does not exist in the current context.

Button

answered on 30 Aug 2023

1 answer

315 views

Pass "Data" parameter for a TelerikGrid encapsulated in a component

Good morning. I've encapsulated a TelerikGrid in a component. I would like to pass to this component the "Data" parameter to be assigned to the encapsulated TelerikGrid. I haven't found which type to define for the parameter "Data" to be received.

Example of TelerikGrid encapsulated in the component, I would like to know what type must be the parameter "ReceivedDataParameter". (I've put ??? in the code to show the information I need). Thank you.

<TelerikGrid Data=@ReceivedDataParameter></TelerikGrid>

@code {
    [Parameter]
    public ??? ReceivedDataParameter { get; set; };
}

Grid

answered on 30 Aug 2023

1 answer

213 views

Posting sample code on GitHub

I have a sample C# Blazor app that uses the Telerik Map component. I have used the full license. What changes, if any, do I need to make to my code if it is to be published publically on GitHub. assuming users would in the main just install the 30 day trial of Telerik UI for Blazor. I have, in my instructions indicated they only need do steps 0, 2 and 4 at First Steps with Server-Side UI for Blazor.

Map

answered on 29 Aug 2023

1 answer

162 views

TelerkGridLayout not rendering

I had a problem with the TelerikGridLayout, in conjunction with a MediaQuery where on First render it was not rendering any of the objects.

After a lot of investigation I found an article that used an IEnumerable to bind to the grid and not a list. After using an IEnumerable, my objects rendered perfectly and were responsive.

Anyone having problems with the TelerikGridLayout, make sure to use an IEnumerable and not a List to bind to the grid.

GridLayout

MediaQuery

answered on 29 Aug 2023

1 answer

87 views

Can you stack series in a Range Column Chart?

Is it possible to stack a series in a Range Column Chart?

We have created a chart using an invisible baseline series to shunt our series upward. But the hover state of the invisible series cannot be configured. https://blazorrepl.telerik.com/GxkiGIvF15qirZPe20. Does anyone have any other ideas of chart types that may be more suitable?

Charts

answered on 29 Aug 2023

1 answer

384 views

Style <GridCommandColumn> title

How can I style the Title of the GridCommandColumn? I jsut want to make the text bold. I've tried using <HeaderTemplate> and <GridCommandColumn.TItleTemplate> neither have worked. And I can't seem to find anything in the docs about styling the title.

<GridCommandColumn Width="50px" Title="Actions">
                <GridCommandButton Command="Edit" Icon="@FontIcon.Pencil"></GridCommandButton>
                <GridCommandButton Command="Delete" Icon="@FontIcon.Trash" ThemeColor="error"></GridCommandButton></GridCommandColumn>
            <GridColumn Title="First Name" Field="@(nameof(SecurityAdminDto.firstName))" Width="100px">
                <HeaderTemplate>
                    <div class="column-title">
                        First Name
                    </div>
                </HeaderTemplate>
            </GridColumn>
            <GridColumn Title="Last Name" Field="@(nameof(SecurityAdminDto.lastName))" Width="100px">
                <HeaderTemplate>
                    <div class="column-title">
                        Last Name
                    </div>
                </HeaderTemplate>
            </GridColumn>
            <GridColumn Title="Email" Field="@(nameof(SecurityAdminDto.email))" Width="100px">
                <HeaderTemplate>
                    <div class="column-title">
                        Email
                    </div>
                </HeaderTemplate>
            </GridColumn>
            <GridColumn Title="EmployeeId" Field="@(nameof(SecurityAdminDto.employeeId))" Width="100px">
                <HeaderTemplate>
                    <div class="column-title">
                        EmployeeId
                    </div>
                </HeaderTemplate>
            </GridColumn>
            <GridColumn Title="NetworkId" Field="@(nameof(SecurityAdminDto.networkId))" Width="100px">
                <HeaderTemplate>
                    <div class="column-title">
                        NetworkId
                    </div>
                </HeaderTemplate>
            </GridColumn>
            <GridColumn Title="Security Admin" Field="@(nameof(SecurityAdminDto.isSecurityAdmin))" Width="100px">
                <HeaderTemplate>
                    <div class="column-title">
                        Security Admin
                    </div>
                </HeaderTemplate>
            </GridColumn>
            <GridColumn Title="FSO" Field="@(nameof(SecurityAdminDto.fsoCodes))" Width="100px">
                <HeaderTemplate>
                    <div class="column-title">
                        FSO
                    </div>
                </HeaderTemplate>
                <Template>
                    @{
                        var cellValue = ((SecurityAdminDto)context).fsoCodes;
                        int i = 0;
                        @foreach(var fsoCode in cellValue)
                        {
                            if (i != 0)
                            {
                                <span>, </span>
                            }
                            <span>@fsoCode</span>
                            i++;
                        }
                    }
                </Template>
            </GridColumn>
            <GridColumn Title="FTC" Field="@(nameof(SecurityAdminDto.isFTC))" Width="100px">
                <HeaderTemplate>
                    <div class="column-title">
                        FTC
                    </div>
                </HeaderTemplate>
            </GridColumn>
            <GridColumn Title="HR" Field="@(nameof(SecurityAdminDto.hrCodes))" Width="100px">
                <HeaderTemplate>
                    <div class="column-title">
                        HR
                    </div>
                </HeaderTemplate>
                <Template>
                    @{
                        var cellValue = ((SecurityAdminDto)context).fsoCodes;
                        int i = 0;
                        @foreach (var hrCode in cellValue)
                        {
                            if (i != 0)
                            {
                                <span>, </span>
                            }
                            <span>@hrCode</span>
                            i++;
                        }
                    }
                </Template>
            </GridColumn>
            <GridColumn Title="Contracts" Field="@(nameof(SecurityAdminDto.contractsCodes))" Width="100px">
                <HeaderTemplate>
                    <div class="column-title">
                        Contracts
                    </div>
                </HeaderTemplate>
                <Template>
                    @{
                        var cellValue = ((SecurityAdminDto)context).contractsCodes;
                        int i = 0;
                        @foreach (var contractCode in cellValue)
                        {
                            if (i != 0)
                            {
                                <span>, </span>
                            }
                            <span>@contractCode</span>
                            i++;
                        }
                    }
                </Template>
            </GridColumn>
        </GridColumns>
    </TelerikGrid>

Grid

Styling

answered on 28 Aug 2023