Telerik Forums
UI for Blazor Forum
3 answers
1.6K+ views

Hi,

 

I have created a grid where I have some fixed columns at the being, then I have a list interaction to create some columns, and then I have more two columns which I would like to keep at the end of the grid. But, it is rendering all columns insert in the "foreach" loop in the end.

 

Here is my grid:

<TelerikGrid Data=@TenantBillingList
                         Sortable="true"
                         Groupable="true"
                         FilterMode="@GridFilterMode.FilterMenu"
                         Pageable="true" PageSize="50"
                         ShowColumnMenu="true">
                <GridColumns>
                    <GridColumn Field="@nameof(TenantBillingDto.TenantName)" FieldType="@(typeof(string))" Title="@L["TenantBilling.TenantName"]">
                        <Template>
                            <b>@((context as ExpandoObject).GetOrDefault(nameof(TenantBillingDto.TenantName)))</b>
                        </Template>
                    </GridColumn>
                    <GridColumn Field="@nameof(TenantBillingDto.EditionName)" FieldType="@(typeof(string))" Title="@L["TenantBilling.EditionName"]" />
                    <GridColumn Field="@nameof(TenantBillingDto.CountryCode)" FieldType="@(typeof(string))" Title="@L["TenantBilling.CountryCode"]" />
                    <GridColumn Field="@nameof(TenantBillingDto.Currency)" FieldType="@(typeof(string))" Title="@L["TenantBilling.Currency"]" />
                    <GridColumn Field="@nameof(TenantBillingDto.EditionCost)" FieldType="@(typeof(double))" Title="@L["TenantBilling.EditionCost"]">
                        <Template>
                            @(((context as ExpandoObject).GetOrDefault(nameof(TenantBillingDto.EditionCost)) as int?).GetValueOrDefault().ToString("N2"))
                        </Template>
                    </GridColumn>

                    @foreach (var consumable in ConsumableList)
                    {
                        <GridColumn Field="@(nameof(TenantBillingConsumablesDetailsDto.ConsumableQty) + "_" + consumable.Name)" FieldType="@(typeof(int))" Title="@(consumable.Name + " #")" />
                        <GridColumn Field="@(nameof(TenantBillingConsumablesDetailsDto.ConsumableCost) + "_" + consumable.Name)" FieldType="@(typeof(double))" Title="@(consumable.Name + " $")">
                            <Template>
                                @(((context as ExpandoObject).GetOrDefault(nameof(TenantBillingConsumablesDetailsDto.ConsumableCost) + "_" + consumable.Name) as double?).GetValueOrDefault().ToString("N2"))
                            </Template>
                        </GridColumn>
                    }

                    <GridColumn Field="@nameof(TenantBillingDto.ConsumableTotalCost)" FieldType="@(typeof(double))" Title="@L["TenantBilling.ConsumableTotalCost"]">
                        <Template>
                            @(((context as ExpandoObject).GetOrDefault(nameof(TenantBillingDto.BillTotalCost)) as double?).GetValueOrDefault().ToString("N2"))
                        </Template>
                    </GridColumn>

                    <GridColumn Field="@nameof(TenantBillingDto.BillTotalCost)" FieldType="@(typeof(double))" Title="@L["TenantBilling.BillTotalCost"]">
                        <Template>
                            <b>@(((context as ExpandoObject).GetOrDefault(nameof(TenantBillingDto.BillTotalCost)) as double?).GetValueOrDefault().ToString("N2"))</b>
                        </Template>
                    </GridColumn>
                </GridColumns>
            </TelerikGrid>

 

Here is the grid result. As you can see, the columns "Total Consumables" and "Total $" should be at the end, and not before my dynamic columns.

Hristian Stefanov
Telerik team
 answered on 21 May 2021
1 answer
1.0K+ views

Hi,

How can set the height of a Form and How can set font size of text in form items?

Svetoslav Dimitrov
Telerik team
 answered on 21 May 2021
1 answer
1.3K+ views

I have a Blazor page which has a Telerik TabStrip component with 2 tabs.

The first tab which is the default tab has a Telerik Grid on it.  This grid uses custom paging, filtering and sorting and as such uses the OnRead method to load data from a database using the GridSourceRequest.

As soon as the Blazor page is navigated to the grid fires the OnRead event using the default grid state and gets the first page of data and populates the grid for the user.

Any user interaction with the grid like sorting or filtering etc fires the OnRead event which in turns queries the database and updates the grid with new data.

So far so good, everything working as expected.

If I click the second tab on the TabStrip to perform some other function and then return back to the grid by clicking the first tab.  What I am expecting to see is the Grid with all its data and state as it was before I clicked on the second tab.

In reality what I get is the OnRead event fires and populates the grid with data from the database which matches the default grid state as if it was the first time that the grid had loaded.

After looking on these forums I realise that this is expected behaviour using the TapStrip component as this is the Blazor way of rendering which means that anything not visible on screen gets removed from the RenderTree and no state is retained.

I up-voted a feature request for the TapStrip component to be enchanced to allow state between tab changes to get persisted or just hidden using CSS. 

But in the meantime I'm looking to implement a solution that will persist the grid state when clicking on tab 2 and then setting the grid state back using the persisted state when clicking back on tab 1.

So far I have managed to persist the grid state but am having trouble setting the grid state.back. 

I have tried calling SetState() on the active tab change event when the new selected tab is tab 1.

This sort of works but what happens is that the grid loads and immediately calls OnRead and populates the grid once with the wrong data and state by calling the database; then the grid flashes and updates with the correct data and state from the SetState() call with data that was persisted in memory.

I have tried updating the OnRead method to only call the database when the persisted state object in memory is null.  I am then trying to set the grid set in the OnInitState event using the persisted state. 

I'm not sure at what point I want reset the persisted state object to null as that means the OnRead method will start calling the database again (which I want it to do eventually) but it seems that when setting the state the OnRead event handler is called multiple times and therefore I don't want the object to be null until the state has been fully set.

Any ideas on how to achieve this please?

 

 

Marin Bratanov
Telerik team
 answered on 21 May 2021
1 answer
331 views

Maybe I'm missing something but I'm not seeing an EditMode = @GridEditMode.None or maybe an Editable = False option. 

How can I quickly set my data grid into a readonly mode?

I realize I can add the "disabled" attribute to the containing <div> element but that disables scrolling and paging through the data.

Marin Bratanov
Telerik team
 answered on 20 May 2021
1 answer
213 views
I am using OnRead to get remote data but sometimes I want to sort locally (all the data is loaded). Is there a way to do that?
Marin Bratanov
Telerik team
 answered on 20 May 2021
1 answer
866 views

What is the standard way to display error messages to the user?  

I have an ASP.NETCore, EFCore, Blazor-Server, Kendo-Blazor-UI application.  A user accomplishing a record change with TelerikGrid might trigger a  DbUpdateConcurrencyException in BankAccountService.Update().  I want to catch the exception, then give the user a useful action such as, "Another user, (*cough* Bob H. in Accounting), made insignificant changes to account (#45678) while you were making your very important modifications.  Please refresh your browser, review Bob's changes, then submit your modifications, again.  Be sure to thank Bob later."  

How is this communication back to the user best accomplished in a standard way?

Thanks!

Hristian Stefanov
Telerik team
 answered on 19 May 2021
2 answers
72 views
As long as there has been data binding in .Net, you have been able to bind to properties of inherited classes (and it gets resolved at runtime).
You have long had an issue that while databinding works on these properties, sorting does not. You're WPF datagrid has this problem (which we asked to get fixed years ago and got an acknowledgement of the problem along with vague promise to fix) and your Blazor datagrid suffered same issue (we are told it was because you were relying on LINQ to do the sorting). One should note that WPF's built in datagrid worked fine binding and sorting these properties.

Now, with the latest 2.24 release, you have gone the opposite direction and broke databinding very disappointing to see and makes your product currently unusable.
Svetoslav Dimitrov
Telerik team
 answered on 19 May 2021
1 answer
1.7K+ views

Hello,

 how to prevent calling "OnParametersSet " multiple times when  DialogFactory is used?

[CascadingParameter]
public DialogFactory Dialogs { get; set; }

 

its firing 2-6 times per page opening. Without DialogFactory,  its correct, only 1x.
Blazor server app. With PreRendering disabled.

Thanks

Nadezhda Tacheva
Telerik team
 answered on 19 May 2021
1 answer
271 views

Just updated to the latest release and gave the multi-column option on the grid a try.  It worked well for most cases, but on an initial transition from a non-multi-column to a multi-column, part of a grid line is missing.  Code is pretty standard stuff, but then, being new to Blazor (or any kind of web programming) I could easily be missing something obvious:

 

        <TelerikGrid Data="@lstOpsYields" Sortable="true" Pageable="true" PageSize="20" Width="100%">

            <GridColumns>

                <GridColumn Title="Field" Field="DisplayName" />

                <GridColumn>
                    <HeaderTemplate><div style="text-align:center">Expected Yield</div></HeaderTemplate>
                    <Columns>
                        <GridColumn Title=@oAppData.SimpleYear1Heading() Field="ExpectedYieldY1">
                            <Template>
                                <div style="text-align: right;"> @((context as CCropOperations).ExpectedYieldY1.ToString(cnYieldFormat))</div>
                            </Template>
                        </GridColumn>

                        <GridColumn Title=@oAppData.SimpleYear2Heading() Field="ExpectedYieldY2">
                            <Template>
                                <div style="text-align: right;">@((context as CCropOperations).ExpectedYieldY2.ToString(cnYieldFormat))</div>
                            </Template>
                        </GridColumn>

                        <GridColumn Title=@oAppData.SimpleYear3Heading() Field="ExpectedYieldY3">
                            <Template>
                                <div style="text-align: right;">@((context as CCropOperations).ExpectedYieldY3.ToString(cnYieldFormat))</div>
                            </Template>
                        </GridColumn>
                    </Columns>
                </GridColumn>

                <GridColumn>
                    <HeaderTemplate><div style="text-align:center">APH less TA</div></HeaderTemplate>
                    <Columns>
                        <GridColumn Title=@oAppData.SimpleYear1Heading() Field="AphTaLessAphY1">
                            <Template>
                                <div style="text-align: right;"> @((context as CCropOperations).AphTaLessAphY1.ToString(cnYieldFormat)) </div>
                            </Template>
                        </GridColumn>

                        <GridColumn Title=@oAppData.SimpleYear2Heading() Field="AphTaLessAphY2">
                            <Template>
                                <div style="text-align: right;">@((context as CCropOperations).AphTaLessAphY2.ToString(cnYieldFormat))</div>
                            </Template>
                        </GridColumn>

                        <GridColumn Title=@oAppData.SimpleYear3Heading() Field="AphTaLessAphY3">
                            <Template>
                                <div style="text-align: right;">@((context as CCropOperations).AphTaLessAphY3.ToString(cnYieldFormat)) </div>
                            </Template>
                        </GridColumn>
                    </Columns>
                </GridColumn>

                <GridCommandColumn Title="Edit" Width="5%">
                    <GridCommandButton OnClick="@((args) => SelectYield(args.Item as CCropOperations))" Icon="edit" />
                </GridCommandColumn>

            </GridColumns>

        </TelerikGrid>
Dimo
Telerik team
 answered on 18 May 2021
1 answer
460 views
I figured out a way to hide the expander icon during the onRowRender. I've tried different css routes using style which does no consistently hide the column .k-grid k-hierarchy-col (etc.). Is there a setting / way to onRowRender hide this column completely? I am using a context menu to expand and feel it is taking up space on screen.
Marin Bratanov
Telerik team
 answered on 18 May 2021
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?