Questions on UI for Blazor Forum

0 answers

15 views

I'm having trouble with my grid where I am unable to page through my results. I have 200 items in the grid and when I click on any of the buttons on the pager nothing happens. Here is my code

Bonus points if someone can make me understand why my Tooltip isnt working either lol.

<TelerikGrid class="NewPairsGrid" 
            Data="@Pairs" 
            AutoGenerateColumns="false"       
            RowHeight="15" 
            Height="1000px" 
            Pageable="true"
            PageSize="25"
            
><GridColumns><GridColumn Title="Pair Info" width="200px"><Template Context="dataItem"><div>
                @DisplayTokenImage(dataItem as EthPairTradeInfoVDto)
                @($"{(dataItem as EthPairTradeInfoVDto).TokenSymbol} / {(dataItem as EthPairTradeInfoVDto).LpTokenSymbol} - {(dataItem as EthPairTradeInfoVDto).TokenName}")
            </div></Template></GridColumn><GridColumn Title="Total Price ETH" width="150px"><Template Context="dataItem"><div>
                @FormatPrice(dataItem as EthPairTradeInfoVDto)
            </div><div>
                @if (dataItem is EthPairTradeInfoVDto ethPairTradeInfoVDto)
                {
                    var UsdPrice = ethPairTradeInfoVDto.CurrentPriceUsd.GetValueOrDefault();
                    @if (UsdPrice > 0)
                    {
                        @($"${UsdPrice} USD")
                        ;
                    }
                    else
                    {
                        @("Looking for USD Price.../")
                        ;
                    }
                }
            </div></Template></GridColumn><GridColumn Field="PairCreatedTimeStamp" Title="Token Age" width="75px"><Template Context="dataItem">
            @if (IsLessThanHour(dataItem as EthPairTradeInfoVDto))
            {
                <i class="fas fa-leaf"></i>
            }
            @if (dataItem is EthPairTradeInfoVDto ethPairTradeInfoVDto)
            {
                var timestamp = CalculateElapsedTime(dataItem as EthPairTradeInfoVDto);
                <span class="tooltip-target">@timestamp</span><TelerikTooltip TargetSelector=".tooltip-target" Width="250px" Height="150px" Position="@TooltipPosition.Right"><Template Context="ttipContext"><span>
                            Timestamp: @(ttipContext.DataAttributes)
                        </span></Template></TelerikTooltip>
            }                     
            @* @CalculateElapsedTime(dataItem as EthPairTradeInfoVDto) *@
        </Template></GridColumn></GridColumns></TelerikGrid>

Grid

Pager

Tooltip

asked on 11 Apr 2024

0 answers

10 views

How to change line spacing in TelerikEditor

Is there a way to change the space between paragraphs? In the example, the lines in the first paragraph have no space between them. Upon pressing Enter and moving to a second paragraph, the Editor includes a space between the first and second paragraph. I want to be able to change that spacing. Is it possible for this component?

Editor

asked on 10 Apr 2024

0 answers

13 views

Blazor filter questions

Hi,

I'm thinking of purchasing Telerik for the Blazor Filter control. Can you confirm if the following are possible...

1/ Can the filter fields be grouped into categories in the drop down, eg using demo sample field drop down looks like this

Id
Quantity
Freight
Country
Ship to
Ship Address

but are grouped items possible?

Group-1
-Id
-Quantity
-Freight
Group-2
-Country
-Ship to
-Ship Address

2/ Can filter rules be re-ordered using drag and drop. Eg re-order
rule1, rule2, rule3 as
rule3, rule1, rule2

without having to delete and re-create?

3/ Can templates be applied to each row to add extra logic, eg

Field
Operator
Value
Disable Rule (additional checkbox)
Additional Data (additional form with multiple controls)

Thanks,
C

Filter

asked on 10 Apr 2024

2 answers

681 views

Minimal Column Width

Now I use constant or percentage values for column width settings. But for some columns I need constant width value after some threshold grid width. When my grid is set narrow, I need some columns set be constand width.
May be will be usefull maximum column value also.

Grid

answered on 08 Apr 2024

1 answer

48 views

Grid: Combine GridFilterMode.FilterRow with ShowColumnMenu

I would like to use the ColumnMenu and the FilterRow at the same time. It seems to me that is not possible although it is so obvious !?

I do no need any more filters in the ColumnMenu just the "Columns" Menu-Items to hide/show or lock/unlock columns.

Grid

answered on 08 Apr 2024

2 answers

12 views

Remove Margin from FormItems in First Row

When using the TelerikForm's Columns parameter, the FormItems in the first row will have a margin just like FormItems in later rows. I want to remove the extra margin on the top.

This can be seen in the example on the Form Columns page. After starting the Preview, use developer tools (F12) and select either of the FormItems in the first row. You will see a margin of 14 (dark brown colored area). Then if you go to Edit, remove the Columns="2", and restart the Preview, you will see the first FormItem does not have a margin, while the remaining FormItems have the margin, which is the desired behavior.

Form

answered on 05 Apr 2024

3 answers

1.4K+ views

Ellipsis and long text

Hi,

In my Blazor grid, I have a column which can have long text in it. I need to use ellipsis on this column e.g put ellipsis after say 50 characters, with the full content then displayed in a tooltip when you hover on the ellipsis.
I know this was possible with your other grids, how can I do this with your blazor grid?

Thanks,

Grid

updated answer on 04 Apr 2024

0 answers

12 views

Blazor Grid Not Displaying Data from List

I have a Blazor Grid in .NET 8 that binds to a List<> called GridData the I fill in OniIntializedAsync(). The data returns fine and the grid shows the correct number of rows, but none of the columns show their data. I tried AutoGenerateColmns-"true" and setting the <GrdiColumns>. If I loop the List with foreach, the data displays as expected.

Grid

asked on 03 Apr 2024

1 answer

12 views

How to get rid of focus rectangle on tab item

Afternoon,

I've attached a picture for it describes the problem best. After clicking on a tab item (Blazor UI) there is a "focus rectangle" around the tab. How can I make sure that this rectangle never shows, that is, clicking on the tab should simply select the tab and not paint the rectangle. To my surprise the following didn't work:

::deep .k-active:active{
    outline: none !important;
}
::deep .k-active:focus{
    outline: none !important;
}

TabStrip

answered on 03 Apr 2024

1 answer

9 views

Upload does not hit controller method on server - no error

I have developed quite a large application with multiple file upload points in the UI to upload various files. All was working fine. Now one of the upload components stopped working. What I mean by this is that all the workflow methods (OnSelect, OnUpload) fire correctly but then, when it needs to call the server to process the upload, it just does nothing without returning an error or anything. The other upload components still work 100%. I have even copied the upload component tag from the razor page that is working and replaced the upload tag in the page that is not working and still it does not work. The difference is that on the one that is working it is on the page in a gridtoolbar while on the one that is not working the grid is on a tabstriptab on another page. The controller method is never hit and the browser console as well as the server logs do not indicate the upload post action being made.

The solution is way too big to post here and I have already established that the upload can work. Does anyone have some pointers as to where and how to trace the probable cause of this behaviour?

Upload