Telerik Forums
UI for Blazor Forum
1 answer
723 views

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.

 

 

Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
 updated answer on 12 Aug 2021
1 answer
334 views
I have a situation where I a storing the names of dashboards inside of a Telerik panel bar. The problem is that according to the documentation "space and enter" are both used to expand the panel (Documentation). This prevents that ability for a user to enter in a space in their desired dashboard name. Is there a work around that would allow me to get the intended functionality or should I look at other options?
Dimo
Telerik team
 answered on 11 Aug 2021
4 answers
1.0K+ views

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?

Graham
Top achievements
Rank 2
Iron
Iron
 answered on 11 Aug 2021
1 answer
380 views
Hello Team,

Currently, we are investigating Telerik UI for Blazor for our upcoming project, as our project has many CRUD operations to perform, and we are looking for a quick way to do this using the scaffolding with .Net 5 & EF Core and generate required CRUD Blazor components with entity model standard validations.

There is scaffolding for Telerik UI for ASP.NET Core:
https://docs.telerik.com/aspnet-core/installation/scaffolding

I could not find any documentation or articles about scaffolding with Telerik UI for Blazor. (I searched in Telerik docs, blogs, forums.)

1. Does Telerik UI for Blazor components support scaffolding for CRUD operations?
2. If yes, where can I find the documentation and steps to generate the scaffolding?
3. If not, is the Telerik team planning to introduce scaffolding in upcoming releases?

Currently, we found out that Syncfusion supports "Blazor UI" scaffolding, but we have a slight preference for Telerik UI.

Looking forward to your answers. Thanks!
Svetoslav Dimitrov
Telerik team
 answered on 11 Aug 2021
1 answer
601 views

I am trying to use DataSourceRequest to query a table with a joined table to bring back a total count for each joined item in the second table.

i.e.

Notes joined to NoteTypes

 

Is there an example of how to use the DataSourceRequest to access an OData api and get a count of each item that is joined to records in the second table?

This works but now I need to add in grouping and counts.

var request =new DataSourceRequest()              {              Page =0,              Skip =0,              Filters =new List<IFilterDescriptor>(),              Sorts =new List<SortDescriptor>(),              Aggregates =new List<AggregateDescriptor>(),              Groups =new List<GroupDescriptor>()                          };          request.Filters.Add(new FilterDescriptor() { Member ="AssignedToUser", Operator = FilterOperator.Contains, Value = CurrentUserName, MemberType =typeof(string) });          request.Filters.Add(new FilterDescriptor() { Member ="IsActive", Operator = FilterOperator.IsEqualTo, Value =true, MemberType =typeof(bool) });          request.Filters.Add(new FilterDescriptor() { Member ="IsResolved", Operator = FilterOperator.IsEqualTo, Value =false, MemberType =typeof(bool) });

var results = await NotesService.GetNotesAsync(request);
                 

 

Marin Bratanov
Telerik team
 answered on 10 Aug 2021
1 answer
422 views

Hi, in 2.25 I was able to use bootstrap input-group to make the following numeric input:

<div class="row">
    <div class="col-6">
        <label for="inputTest" class="col-form-label-sm">Label</label>
        <div class="input-group flex-nowrap">
            <div class="input-group-prepend">
                <span class="input-group-text">$</span>
            </div>
            <TelerikNumericTextBox Class="form-control" @bind-Value="number" Id="inputTest" />
        </div>

    </div>
</div>

In 2.26 the kendo-bootstrap-theme/all.css seems to be missing a .k-widget.form-control css override of padding:0 to make this work.

Is this intended or a bug?

Ivan Zhekov
Telerik team
 answered on 10 Aug 2021
1 answer
344 views

Hi Team,

Could you please suggest to implement Item Template like below

 

 

 

Thanks

Marin Bratanov
Telerik team
 answered on 09 Aug 2021
0 answers
253 views

I have a need for a two dimensional "grid" of cards that is dynamic in both directions.  Each column is independent of the others.

Something like this:

Each Status/Step to the approval process could have duplicates of the Request, i.e. Request 1 is still in pending status.  Request 2 has been submitted and needs Approval 1 and Approval 2.  Request 3 has been submitted and needs Approval 3.  I will build an ordered list with necessary duplicates to fill this.

I was trying to use nested StackLayouts to do this but it does not appear to like anything dynamic.  Display should be approximately like:

Status

Pending            Submitted              Approval 1          Approval 2           Approval 3

Request 1          Request 2              Request 2            Request 2            Request 3

                           Request 3

John
Top achievements
Rank 1
Iron
Iron
 asked on 09 Aug 2021
1 answer
190 views
Is there an equivalent to Telerik.DataSource.DataSourceRequest.ToOdataString() extension for posting to an odata source?
Marin Bratanov
Telerik team
 answered on 07 Aug 2021
1 answer
964 views

When there are so many rows that the browser has a scroll bar, the context menu that opens automatically moves the scroll bar to the lowest position. 

Pictures attached showing the problem.

Also example code attached.

Marin Bratanov
Telerik team
 answered on 06 Aug 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?