Questions on UI for Blazor Forum

1 answer

585 views

[Solved] Blazor Grid Column Resize Event

Hi,

My PM is wanting us to capture the column resize event and save this so when a user comes back to a certain page the column widths are set to the previous widths they set.

Is there a way to capture the a column resize width and the widths of the columns?

Thanks

Grid

updated answer on 19 Aug 2021

1 answer

363 views

[Solved] Telerik in Blazor Server vs WASM

Hello,

This v2.26.0 drop down:

        <div class="flex-child">
            <label for="warehouse" class="k-label k-form-label">Warehouse</label>
            <TelerikDropDownList Data="@Warehouses" DefaultText="Select a Warehouse"
                                 Id="warehouse"
                                 TextField="WarehouseName"
                                 ValueField="WarehouseId"
                                 ValueChanged="@((int w) => WarehouseSelected(w))" />
        </div>

...is working in a Blazor WASM app (well, I'm having issues overriding css classes used by Telerik controls, but that's another topic).

Here it is, working OK in Blazor WASM:

However, using the same code in a Razor component in a Blazor-Server project, I am not getting the control rendered properly:

I have your script declared in the head part of _Host.cshtml (see below). I'm really not sure about this, and I have moved it around , removed "defer", deleted bin and obj folders and cleared the cache, but to no avail.

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CalendarDemo.UI</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="CalendarDemo.UI.styles.css" rel="stylesheet" />
    <link href="css/CustomStyles.css" rel="stylesheet" />
    <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>

</head>

Looking at the dev tools, I do see the above script is making it to the page:

This is a mystery to me so far. I am not seeing any exceptions being raised.

Any suggestions for further troubleshooting? Thanks again!

DropDownList

General Discussions

answered on 17 Aug 2021

5 answers

911 views

Limiting the calendar to only select from today forward (no past-date selection)

Is there a way to prevent the user from selecting dates in the past?

When the current month is shown, I assume I need to create a List<DateTime> containing all the dates in the current month that are in the past and assign that List to the calendar's DisabledDates. If there is another way, please advise.

The other part of this question is: How we prevent the user from even viewing past months?

Thanks a lot!

Calendar

answered on 17 Aug 2021

1 answer

2.5K+ views

Add Link in Grid to Navigate to Product Details Page

Hi:

I'm new to Telerik for Blazor and was hoping to create a column of links in a Products Grid that would bring the user to the Product Details page for the particular link. In particular, I want to go the the @page "/productdetails/{ProductId}"

I'm assuming the best method is with a template? Here's what I have so far:

<GridColumns>
    <GridColumn Field="ProductId" Title="Id" />
    <GridColumn Field="Product" Title="User" />
    <GridColumn>
        <Template>
            @{
                <div><a href="#" @onclick="">Product Details</a></div>
                //onclick go to product details page and pass parameter
            }
        </Template>
    </GridColumn>
</GridColumns>

@page "/productdetails/{ProductId}"

Any help greatly appreciated.

Grid

answered on 17 Aug 2021

1 answer

575 views

Add DateRangePicker to a DropDownList in ToolBarTemplateItem

Hi,

I need to have a DateRangePicker to allow a user to select a date range in the Toolbar. Ideally, I want to implement this in a DropDownList with the Placeholder text of "All Dates". When the drop down list is clicked, the DateRangePicker is shown and a user can select a range of dates which will then show after focus is lost. The user should be able to select "All Dates" again so no "date range" is selected to send to my API. See attached screen show. Any help is much appreciated!

Jimmy

<ToolBarTemplateItem>
<TelerikDropDownList Data="@dateLookupModel" TextField="LookupTextField" ValueField="LookupValueField" @bind-Value="@dateLookupType" width="125px"></TelerikDropDownList>
</ToolBarTemplateItem>
<ToolBarSeparator />
<ToolBarTemplateItem>
Dates: <TelerikDateRangePicker Class="daterangepicker-no-labels" @bind-StartValue="@StartValue"
@bind-EndValue="@EndValue"></TelerikDateRangePicker>
</ToolBarTemplateItem>
<ToolBarSeparator />

Code:

public DateTime? StartValue { get; set; } = new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day);

public DateTime? EndValue { get; set; } = new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day);

private FilterDate dateLookupType { get; set; } = FilterDate.AllDates;

private List<LookupItemModel<FilterDate>> dateLookupModel { get; set; } =
new();

foreach (var value in Enum.GetValues(typeof(FilterDate)))
{
dateLookupModel.Add(new LookupItemModel<FilterDate>()
{
LookupTextField = ((FilterDate)value).GetAttribute<DisplayText>().Text,
LookupValueField = (int)value,
LookupSortValue = ((FilterDate)value).GetAttribute<OrderAttribute>().Order
});
dateLookupModel.Sort((x, y) => x.LookupSortValue.CompareTo(y.LookupSortValue));
}

DateRangePicker

DropDownList

answered on 14 Aug 2021

3 answers

821 views

[Solved] Fill Splitter to remaining height of screen

Hi.

I'm trying to make a TelerikSplitter control fill the remaining height of the screen, but I'm struggling with making it work as expected.

Index.razor

@page "/"

<TelerikSplitter Orientation="SplitterOrientation.Horizontal">
    <SplitterPanes>
        <SplitterPane Resizable="true" Collapsible="false">
            Left
        </SplitterPane>
        <SplitterPane Resizable="true" Collapsible="false">
            Right
        </SplitterPane>
    </SplitterPanes>
</TelerikSplitter>

Any ideas?

Thank you.

Splitter

answered on 14 Aug 2021

1 answer

462 views

Why is css order different in published app?

Hello,

This might be a Blazor issue and not Telerik, but I don't know yet. I have a TelerikCalendar in a Blazor component (.razor page). I added a style tag to the page after the @using directives.

One of the styles I added was:

.k-calendar .k-state-selected .k-link {
background-color: #009966;
}

This works when the app is hosted by IIS Express in VS 2019 (see image "1" below). However, if it is hosted by Kestrel or published to my machine's IIS, the order of the css gets changed, and my local style gets overruled (see image "2" below).

Any ideas? Thanks!

1. IIS Express (my local css "green" gets applied):

2. IIS-hosted (my local css "green" gets overruled by what I guess is the control's default "orange" styling?):

Calendar

answered on 13 Aug 2021

1 answer

1.1K+ views

Is there a ReadOnly toggle for Grid?

I know each column has an "Editable" property, but I was hoping there was something that could put the whole grid in read-only mode.

Am I missing something, or is that simply not feasible?

Thanks,

Grid

answered on 13 Aug 2021

1 answer

604 views

[Solved] Changing the Scale/Vertical Axis labels on a column chart to only show whole numbers?

Is there a way to change the Vertical Axis labels in a Chart column graph to only show whole numbers instead of fractional numbers?

Charts

answered on 13 Aug 2021

1 answer

221 views

Move chart axis labels to bottom without changing the axis display

I would like to display the x date category axis at the bottom. However if I set the AxisCrossingValue then it changes the bar display to appear as if it comes from the bottom. I would like to display the exact same chart however just the date labels at the bottom and leave the 0 axis line where it currently is.

Charts

answered on 13 Aug 2021