Telerik Forums
UI for Blazor Forum
1 answer
185 views

hi 
im using TelerikGrid and i wanted this feature to request for a part of data and when client scrolled down to that part of data then do another request to get second part of data 
i wanted to know if this can be done right now and if not when will this feature be added ?

 

Marin Bratanov
Telerik team
 answered on 22 Oct 2019
1 answer
349 views

hi i was using TelerikGrid and i ran to a problem 

`
<TelerikGrid Data=@GridData
             FilterMode="@GridFilterMode.FilterMenu"
             ScrollMode="@GridScrollMode.Virtual"
             Height="400px" RowHeight="40" PageSize="20"
             >
`

this is my grid and it works fine but when  use OnRead 

`

<TelerikGrid Data=@GridData
             FilterMode="@GridFilterMode.FilterMenu"
             ScrollMode="@GridScrollMode.Virtual"
             Height="400px" RowHeight="40" PageSize="20"
             OnRead="()=> { }">

`

i dont even need to do something in that function i give ity an empty function suddenly whenever i scroll to it just shows me first 15 
when i scroll i can see other options but suddenly 1 to 15 jumps up and all i see is them but scroll doesnt go to first of grid 

 

and this is my whole code

   <style>

        .read{
            color:red;
        }
        .not-yet{
            color:green;
        }
    </style>

<TelerikGrid Data=@GridData
             FilterMode="@GridFilterMode.FilterMenu"
             ScrollMode="@GridScrollMode.Virtual"
             Height="400px" RowHeight="40" PageSize="20"
             Class="@(isRead ?"read" : "not-yet")"
             OnRead="()=> { }">
    <GridColumns>
        <GridColumn Field="Id" />
        <GridColumn Field="Name" Title="First Name" />
        <GridColumn Field="LastName" Title="Last Name" />
        <GridColumn Field="HireData">
            <Template>
                @(((SampleData)context).HireDate.ToString("MMMM dd, yyyy"))
            </Template>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    public List<SampleData> GridData { get; set; }
    public bool isRead = false;
    protected override async Task OnInitializedAsync()
    {
        GridData = await GetData();
    }

    private async Task<List<SampleData>> GetData()
    {
        return Enumerable.Range(1, 100).Select(x => new SampleData
        {
            Id = x,
            Name = $"name {x}",
            LastName = $"Surname {x}",
            HireDate = DateTime.Now.Date.AddDays(-x)
        }).ToList();
    }

    async Task Test()
    {
       
        isRead = true;
    }

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string LastName { get; set; }
        public DateTime HireDate { get; set; }
    }
}

Marin Bratanov
Telerik team
 answered on 22 Oct 2019
1 answer
199 views

Hi

Can anyone help with this please?

The following HTML produces a satisfactory result in that all columns are populated:

if (purchaseOrders == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>PO No.</th>
                <th>PO Date</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var purchaseOrder in purchaseOrders)
            {
            <tr>
                <td>@purchaseOrder.PurchaseOrderId</td>
                <td>@purchaseOrder.PurchaseOrderDate.ToShortDateString()</td>
                <td>@purchaseOrder.Supplier.SupplierName</td>
            </tr>
            }
        </tbody>
    </table>
}

 

There is a linq query in a service file which retrieves data across the FK between "Purchase Order" and "Supplier". However the SupplierName column remains blank in the Telerik grid with the following code:

<TelerikGrid Data="purchaseOrders" Height="800px"
             Pageable="true" PageSize=@PageSize Sortable="true" Groupable="true"
             FilterMode="Telerik.Blazor.GridFilterMode.FilterRow">
 
    <GridColumns>
        <GridColumn Field="@(nameof(PurchaseOrder.PurchaseOrderId))" Title="PO No." Groupable="false" />
        <GridColumn Field="@(nameof(PurchaseOrder.PurchaseOrderDate))" Title="PO Date" />
        <GridColumn Field="@(nameof(PurchaseOrder.Supplier.SupplierName))" Title="Supplier" />
    </GridColumns>
 
</TelerikGrid>

The HTML and Telerik grids use the same data source and models.  Many thanks

 

 

The

 

 

 

Marin Bratanov
Telerik team
 answered on 22 Oct 2019
4 answers
666 views

Hi,

You have those marvelous labels for textboxes. How can I do the same thing for other widgets like the dropdownlist for example?

Thanks … Ed

 

Marin Bratanov
Telerik team
 answered on 21 Oct 2019
6 answers
506 views

Hi,

Check the attached screen shot. The markup is shown below.

Is this a bug on your side or am I doing something wrong?

Thanks … Ed

<TelerikWindow Visible="@(selectedUser != null)" Modal="true">
    <WindowTitle>
        @{
            if (selectedUser.Id < 0)
            {
                <strong>Add Employee</strong>
            }
            else
            {
                <strong>Edit Employee</strong>
            }
        }
    </WindowTitle>
    <WindowContent>
        <EditForm Model="@selectedUser" OnValidSubmit="@Save">
            <DataAnnotationsValidator />
            <div class="form-row">
                <div class="col">
                    <TelerikTextBox @bind-Value="@selectedUser.FirstName" Label="First Name"></TelerikTextBox>
                </div>
                <div class="col">
                    <TelerikTextBox @bind-Value="@selectedUser.LastName" Label="Last Name"></TelerikTextBox>
                </div>
            </div>
            @*<div class="form-row">
            <div class="col">
                <TelerikDropDownList Data="@lstRoles" @bind-Value=@SelectedRole PopupHeight="170px"
                                      ValueField="Id" TextField="RoleName">
                </TelerikDropDownList>
            </div>
        </div>*@
        <div class="form-row">
            <div class="col">
                <TelerikTextBox @bind-Value="@selectedUser.Email" Label="Email"></TelerikTextBox>
            </div>
            <div class="col" >
                <TelerikTextBox @bind-Value="@selectedUser.PhoneNumber" Label="Phone"></TelerikTextBox>
            </div>
        </div>
            <div class="form-row">
                <div class="col">
 
                    <TelerikTextBox @bind-Value="@selectedUser.Address1" Label="Address 1"></TelerikTextBox>
                </div>
                <div class="col">
                    <TelerikTextBox @bind-Value="@selectedUser.Address2" Label="Address 2"></TelerikTextBox>
                </div>
            </div>
            <div class="form-row">
                <div class="col">
                    <TelerikTextBox @bind-Value="@selectedUser.City" Label="City"></TelerikTextBox>
                </div>
                <div class="col">
                    <TelerikTextBox @bind-Value="@selectedUser.PostCode" Label="Post Code"></TelerikTextBox>
                </div>
            </div>
            <div class="form-row">
                <div class="col">
                    <div style="margin-top:20px;">
                        Is Active <InputCheckbox @bind-Value="@selectedUser.IsActive" />
                    </div>
                </div>
                <div class="col">
                    <span class="k-label" style="font-size:7pt">Role</span>
                    <TelerikDropDownList Data="@lstRoles" TextField="Name" ValueField="Id"
                                         @bind-Value="selectedRole" Width="100">
                    </TelerikDropDownList>
                </div>
 
            </div>
 
            <div class="form-row">
                <br />
                <ValidationSummary />
                <TelerikButton Class="mt-2" Icon="save" Primary="true" ButtonType="@ButtonType.Submit">Save</TelerikButton
                <TelerikButton Class="mt-2" Icon="cancel" OnClick="@ClearSelection" ButtonType="@ButtonType.Button">Cancel</TelerikButton>
            </div>
        </EditForm>
    </WindowContent>
</TelerikWindow>

 

Marin Bratanov
Telerik team
 answered on 21 Oct 2019
2 answers
673 views

Does this beast exist yet?

I can't seem to find anything on it.

Thanks …. Ed

 

 

Randy Hompesch
Top achievements
Rank 1
 answered on 20 Oct 2019
1 answer
181 views

Our team has Devcraft UI now and Im pulling in the Blazor components, adding the requirements to a small existing project, where we are changing direction to use Blazor.  

Seems like I was confused about the same thing when I was going through the initial steps using the Kendo UI angular components.

Anyway, on the "getting started" section
https://docs.telerik.com/blazor-ui/getting-started/server-blazor

Once I had the private Nuget feed setup, I started making the updates to the various project files. 
That's when it wasn't exactly clear on these sections.  Maybe use these notes to update this section to help others?
Im starting from new Blazor server app that I had created previously, and was integrating it within my solution.

In this "getting started" section, if one is creating a new project from ground zero, are the telerik components and settings somehow added to a new project via the project template?  In other words, the docs make it appear that after you create a new project, you're done and ready to start using telerik components on a new page.

So then, in the section under "add to existing project"

(3)  HTML
It wasn't clear what the names of the other themes were.  Putting a link here or just listing the bootstrap and material theme names might help.
Also wasn't clear if one was to replace any existing css being used, eg.  The bootstrap css file. 

(4) HTML
Again, should one add this new script reference or replace the default?
So for ~/Pages/_Host.cshtml  the end result is to be 

this:
<script src="_content/telerik.ui.for.blazor/js/telerik-blazor.js" defer></script>

or this:
    <script src="_framework/blazor.server.js"></script>
    <script src="_content/telerik.ui.for.blazor/js/telerik-blazor.js" defer></script>

(5), (6) & (7) were straightforward

On a side-note, maybe it was just me, in the docs, it is after all saying to add these pieces, not to replace anything already there in an existing Blazor project.

Marin Bratanov
Telerik team
 answered on 19 Oct 2019
3 answers
216 views
The AnimationContainer's Visible property is no longer available in version 2.2.0 which is a breaking change for us.  Is there another way to initialize the  AnimationContainer in a visible state without calling the Show() or Toggle() methods?
Marin Bratanov
Telerik team
 answered on 18 Oct 2019
3 answers
160 views

The Grid Selection demo code is missing the @bind-SelectedItems attribute.  The demo is on this page: https://demos.telerik.com/blazor-ui/grid/selection.  The TelerikGrid element should contain the attribute:

@bind-SelectedItems="SelectedItems"

Marin Bratanov
Telerik team
 answered on 17 Oct 2019
1 answer
593 views

I am sure I am missing something easy.

Right now all columns get squished if the screen resolution is less than the grid width.

How do I set it that it includes a scroll bar instead of squishing?

Marin Bratanov
Telerik team
 answered on 17 Oct 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?