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.

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();

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.

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?):

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,

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.

I have struggled for years with foo bar examples and Telerik Documentation that does not contain any examples acquiring the data for a Grid that does not assume that you are using jsonp or odata.  I am trying to populate a Blazor Grid  with data from a simple REST API over which I have no control.  

Do you have any examples that show this?  I haven't been able to find any.

I would like to to be able to capture the data from the remote API  (e.g. metaweather) and use that data to populate the grid.   Here's an example of a demo Blazor app where I populate an html table using that API:

page "/weather"
@using System.Net.Http.Json

@inject IHttpClientFactory _clientFactory

<h3>WeatherData</h3>

@if (string.IsNullOrWhiteSpace(errorString) == false)
{
    <h2 style="color: red;">@errorString</h2>

}
else if (forecast is null)
{
    <div class="h4">Loading...</div>
}
else
{
    <table class="table table-stripped">
        <thead class="thead-dark">
            <tr>
                <th>Date</th>
                <th>Weather State</th>
                <th>Low</th>
                <th>High</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var w in forecast.consolidated_weather)
            {
                <tr>
                    <td>@w.applicable_date </td>
                    <td>@w.weather_state_name </td>
                    <td>@w.min_temp </td>
                    <td>@w.max_temp </td>
                </tr>
            }
        </tbody>>
    </table>


}

@code {

    VancouverForecast forecast;
    string errorString;

    protected override async Task OnInitializedAsync()
    {
        var request = new HttpRequestMessage(HttpMethod.Get, "https://www.metaweather.com/api/location/9807");
        var client = _clientFactory.CreateClient();

        HttpResponseMessage response = await client.SendAsync(request);

        if (response.IsSuccessStatusCode)
        {
            forecast = await response.Content.ReadFromJsonAsync<VancouverForecast>();
            errorString = null;
        }
        else
        {
            errorString = $"There was an error getting our forecast: {response.ReasonPhrase}()";
        }
    }
}

My eventual goal is to create a properly structured app with separation of concerns doing this sort of thing.  Anything you could point me to to assist me in that goal would be greatly appreciated.

Telerik Grid for Blazor, how to add a row through code. Should be easy, but I cannot find a straightforward answer anywhere. Here's my grid:

                    <TelerikGrid Data=@GridPallets
                                 Height="200px"
                                 FilterMode="@GridFilterMode.None"
                                 Sortable=true
                                 Pageable=true>
                        <GridColumns>
                            <GridColumn Field=@nameof(PalletGridModel.Type) />
                            <GridColumn Field=@nameof(PalletGridModel.Quantity) />
                            <GridColumn Field=@nameof(PalletGridModel.Weight) />
                            <GridColumn Field=@nameof(PalletGridModel.DeliveryCharge) Title="Delivery Charge" />
                            <GridColumn Field=@nameof(PalletGridModel.HubCharge) Title="Hub Charge" />
                        </GridColumns>
                    </TelerikGrid>

Here's some code on the same page to create a new item to add to the grid:

PalletGridModel pgm = new PalletGridModel();

pgm.DeliveryCharge = palletType == "QTR" ? 10 : palletType == "HALF" ? 20 : palletType == "FULL" ? 30 : 40;
pgm.HubCharge = palletType == "QTR" ? 4 : palletType == "HALF" ? 5 : palletType == "FULL" ? 6 : 10;
pgm.Quantity = quantity;
pgm.Type = palletType;
pgm.Weight = weight;

Everything I've tried after that to add that new item to the grid doesn't work - from adding the item to the grid data with a simple list.add(item) to trying to use the grid's update handler - but so far, nothing has worked. Surely something as simple and straightforward as this can't be this difficult?