Hi all,

We would like your feedback on how you want to control the Expanded items in a treeview, please add you comments in this page: https://feedback.telerik.com/blazor/1448095-expanded-items-handling-feedback-requested.

Thank you!

Regards,

Marin Bratanov

I have a Blazor grid and when I click the column heading it sorts the data Ascending.  If I click the same column heading again, I'm expecting it to toggle to Descending, but the DataSourceRequest object always has Ascending regardless.

I see that the Telerik Demos work and I don't think I've done much different that those.  I notice in the demos there is an arrow indicating which way the sort is going, in my grid no arrow icon is visible.

Hi,

I have inherited a data access layer which uses OrmLite and the database POCOs have been auto generated and it uses the actual database column names as the property names in the POCOs.

e.g. person_firstname, person_lastname etc.

public class PersonPoco
{
    public string person_firstname { get; set; }
    public string person_lastname { get; set; }
}

Then I'm using AutoMapper to map the POCOs to business objects which in turn are used as the data source for the Telerik Grid.

public class PersonBusinessClass
{
    public string Firstname { get; set; }
    public string Lastname { get; set; }
}

So in the Telerik Grid I would bind the columns as so:

<GridColumn Field="@(nameof(PersonBusinessClass.Firstname))" Title="First Name" />
<GridColumn Field="@(nameof(PersonBusinessClass.Lastname))" Title="Last Name" />

This causes an issue because when it comes to column filtering/sorting it uses the GridColumn Field value for the database column name which in my case is different, so I end up with errors e.g: 

Invalid column name 'Firstname' as it should be 'person_firstname'.
Invalid column name 'Lastname' as it should be 'person_lastname'.

Is there a way to specify a different column name to use for filtering/sorting ?

I have a Telerik Blazor Grid that I want to be able to use built in column filtering, column sort and paging.

There is a large amount of data to be displayed in the grid approx. 200,000+ rows hence the need for paging.

Ideally I want to do all the filtering, sorting and paging within the SQL query so that the SQL server will do the heavy lifting and only send back the required single page of data based on the applied filters, sorting and page number.

I have the Telerik.DataSource.DataSourceRequest object from the grid that contains all the grid state for currently applied filters, sorting and page number, is there a way I can use this object to generate my SQL query e.g. create the WHERE clause based on the filters and the ORDER BY clause based on the sorting and the page of data based on the page number?

I am using ServiceStack OrmLite which is returning an IQueryable from the SQL database then I'm using the extension method .ToDataSourceResultAsync(gridRequest);

I seems that the grid state in the gridRequest is happening in memory on the data sent back from the SQL query in the IQueryable object and not on the SQL database.

Is there a way I can do the filtering etc on the SQL database within the query rather than in memory?

Example:

            DataSourceResult processedData = null;

            using (var db = _dbConnectionFactory.Open())
            {
                Telerik.DataSource.DataSourceRequest gridRequest = dataSourceRequestWrapper.ToDataSourceRequest();

                var q = db.From<PersonTable>().Limit(0, 100);

                processedData = await db.Select(q).AsQueryable().ToDataSourceResultAsync(gridRequest);

                db.Close();
            }

            return processedData;

This produces a SQL query like:

SELECT
        TOP 100
        "PersonId", 
        "FirstName", 
        "Surname", 
        "Age" 
FROM
        "dbo"."PersonTable"

Ideally with using the extension method .ToDataSourceResultAsync(gridRequest); I would like to see the SQL query look more like based on the grid being sorted by the Age column descending and a single text filter applied to the Surname column to filter on 'Smith':

SELECT
        TOP 100
        "PersonId", 
        "FirstName", 
        "Surname", 
        "Age" 
FROM
        "dbo"."PersonTable"
WHERE
        "Surname" LIKE 'Smith%'
ORDER BY
        "Age" DESC

I have rearranged the row/col split in multiple ways. It seems no matter what I do the horizontal scrollbar always shows up. This only happens when the tabstrip has a "row/col" boostrap within it. If I don't put the row/col and just put a straight grid it properly doesn't not have a horizontal scrollbar. I even set the display initializer to wait until after the parameters have been set in the component. I tried the Kendo UI approach to force the tabstrip to not display the horizontal scrollbar, but I cannot seem to add an Id to the tabstrip.

Horizontal Scrollbar Issue

Grid Same Window Without Scrollbar

html_code_example

Blazor WebAssembly on .Net 5

After updating Telerik.UI.For.Blazor to version 2.23.0 I often see an error in the Console "Could not find 'TelerikBlazor.getLocationHost' ('TelerikBlazor' was undefined)." after doing a build and refreshing the page. If I then refresh the page again the error will not reappear.

I am only using the TelerikGrid.

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Could not find 'TelerikBlazor.getLocationHost' ('TelerikBlazor' was undefined).
      Error: Could not find 'TelerikBlazor.getLocationHost' ('TelerikBlazor' was undefined).
          at https://localhost:44359/_framework/blazor.webassembly.js:1:1287
          at Array.forEach (<anonymous>)
          at e.findFunction (https://localhost:44359/_framework/blazor.webassembly.js:1:1247)
          at b (https://localhost:44359/_framework/blazor.webassembly.js:1:2989)
          at https://localhost:44359/_framework/blazor.webassembly.js:1:3935
          at new Promise (<anonymous>)
          at Object.beginInvokeJSFromDotNet (https://localhost:44359/_framework/blazor.webassembly.js:1:3908)
          at Object.w [as invokeJSFromDotNet] (https://localhost:44359/_framework/blazor.webassembly.js:1:64232)
          at _mono_wasm_invoke_js_blazor (https://localhost:44359/_framework/dotnet.5.0.4.js:1:190800)
          at do_icall (<anonymous>:wasm-function[10596]:0x194e4e)
Microsoft.JSInterop.JSException: Could not find 'TelerikBlazor.getLocationHost' ('TelerikBlazor' was undefined).
Error: Could not find 'TelerikBlazor.getLocationHost' ('TelerikBlazor' was undefined).
    at https://localhost:44359/_framework/blazor.webassembly.js:1:1287
    at Array.forEach (<anonymous>)
    at e.findFunction (https://localhost:44359/_framework/blazor.webassembly.js:1:1247)
    at b (https://localhost:44359/_framework/blazor.webassembly.js:1:2989)
    at https://localhost:44359/_framework/blazor.webassembly.js:1:3935
    at new Promise (<anonymous>)
    at Object.beginInvokeJSFromDotNet (https://localhost:44359/_framework/blazor.webassembly.js:1:3908)
    at Object.w [as invokeJSFromDotNet] (https://localhost:44359/_framework/blazor.webassembly.js:1:64232)
    at _mono_wasm_invoke_js_blazor (https://localhost:44359/_framework/dotnet.5.0.4.js:1:190800)
    at do_icall (<anonymous>:wasm-function[10596]:0x194e4e)
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__15`1[[System.String, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext()
   at Telerik.Blazor.Components.Dialog.DialogBuilder.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

Hi,

I am using the CSLA framework with Blazor WebAssembly and am trying to send the Telerik.DataSource.DataSourceRequest from the Blazor Client using a Telerik Blazor Grid through to the CSLA DataPortal API endpoint on the Blazor Server.

Unfortunately the CSLA framework is unable to successfully serialize and de-serialize the Telerik.DataSource.DataSourceRequest object as is. 

I tried creating a CSLA compatible wrapper so that i could use the built-in CSLA serialization, unfortunately i have hit an issue in the fact that CSLA only supports serialization of primative types (int, float, string, datetime, etc).

My discussion (https://github.com/MarimerLLC/csla/discussions/2268) on the CSLA repo suggests that I may need to serialize to a string or byte[] array.

The option I'm left with is to manually serialize the entire Telerik.DataSource.DataSourceRequest object as either a string or byte[] array by using either System.Text.Json or Newtonsoft.Json.

Then when the string or byte[] array is received by the CSLA DataPortal API endpoint I can manually de-serialize the parameter as a Telerik.DataSource.DataSourceRequest object.

Looking at the Telerik docs it appears that the Telerik.DataSource.DataSourceRequest object supports System.Text.Json out of the box but if I want to use Newtonsoft.Json then i might have to do some custom serialization, therefore my preference would be to use System.Text.Json.

How can I use System.Text.Json to serialize and de-serialize the Telerik.DataSource.DataSourceRequest object manually as my mode of transport to the CSLA DataPortal API endpoint doesn't use the native Blazor System.Text.Json serializer?

Hello. I have added a pie chart to my initial page (attached code sample and output).  The pie chart is skewed to the right side of the page rather than being centered. How can I center it?  

I've tried putting it in a row and column object but it just skews it right within those.

Thanks,

Debra

I'm using TelerikComboBox and came across a problem that when I select a value from the drop-down list and the value changes, the method is not called. 

<TelerikComboBox Data="@SuggestedEmployees" 
                                 TItem="@CompanyEmployeeDropDownInfoModel"
                                 TValue="string"
                                 TextField="Email"
                                 ValueField="Email"
                                 Placeholder="E-mail"
                                 ClearButton="true"
                                 Filterable="true"
                                 Width="100%"
                                 OnRead="@(OnEmailChanged)" 
                                 @bind-Value="@Email"
                                 AllowCustom="true" >
                    <ItemTemplate Context="newContext">
                        <strong>@((newContext as CompanyEmployeeDropDownInfoModel).FirstName) @((newContext as CompanyEmployeeDropDownInfoModel).LastName) @((newContext as CompanyEmployeeDropDownInfoModel).PhoneNumber)</strong>
                    </ItemTemplate>
                </TelerikComboBox>

At first, SuggestedEmployees is empty. When user inputs more than 3 symbols, we get list of employees and show it to user. Everything works fine, when user manually input symbols, but when user select target employee from list and email changes, nothing happened, OnRead method doesn't trigger.  Any suggestion?

Hi there, I'm trying to change the background of toolbar in telerik grid, I know the key is to override the default css, but I couldn't make it. Would you please help me? The font color works well but the background-color doesn't work, even thought I use Bootstrap in the toolbar it still doesn't work. I remove some unnecessary code to make it clean. I also realized it's impossible to do CSS isolation in other components, so I put the css in the global stylesheet.

<TelerikGrid Data="GridDataViewModel" Class="addBtn">
    <GridColumns>
        <GridColumn Field="@nameof(ViewModel.Editor)" Editable="false"></GridColumn>
        <GridColumn Field="@nameof(ViewModel.EditTime)" Editable="false"></GridColumn>
        <GridCommandColumn Width="190px">
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
    <GridToolBar>
        <GridCommandButton Command="Add" Icon="add" Class="addBtn">Add Branch</GridCommandButton>
    </GridToolBar>
</TelerikGrid>

div.k-toolbar button.k-button-icontext {
    background-color: #4CAF50;
    color: forestgreen
}

.addBtn {
    background-color: #4CAF50;
}