Telerik Forums
UI for Blazor Forum
2 answers
247 views

Hello,

I have a splitter with 2 pane's and in each pane a grid with sizable columns.

When one resizes a column in a grid inside a pane of the splitter one of the panes collapses instead of resizing the column.

Please note: Only the first time when the page is opened it is going not good!

 

Kind regards,

 

demo code to reproduce:

@using TelerikBlazorDemos.DataAccess.Services
@using TelerikBlazorDemos.DataAccess.Dto
@page "/grid/column-resizing"
@inject HttpClient http
<DemoConfigurator>
    <DemoConfiguratorColumn Description="Auto Fit Columns">
        <TelerikButton OnClick="@AutoFitAllColumns">AutoFit All Columns</TelerikButton>
        <TelerikButton OnClick="@AutoFitColumn">AutoFit Name Column</TelerikButton>
    </DemoConfiguratorColumn>
</DemoConfigurator>
                    <TelerikSplitter Orientation="@SplitterOrientation.Horizontal">
                        <SplitterPanes>
                            <SplitterPane Collapsible="false" >
<TelerikGrid @ref="Grid"
             Data="@GridData"
             Width="100%"
             Height="350px"
             Sortable="true"
             Resizable="true"
             Pageable="true">
    <GridColumns>
        <GridColumn Field=@nameof(ProductDto.ProductIdWidth="120px" MaxResizableWidth="250" Title="ID" />
        <GridColumn Field=@nameof(ProductDto.ProductNameId="productName" Width="200px" MinResizableWidth="120" Title="Name"/>
        <GridColumn Field=@nameof(ProductDto.UnitPriceWidth="140px" Title="Price" />
        <GridColumn Field=@nameof(ProductDto.UnitsInStockWidth="160px" Title="In stock" />
        <GridColumn Field=@nameof(ProductDto.QuantityPerUnitWidth="210px" MinResizableWidth="100" MaxResizableWidth="400" Title="Quantity per unit" />
        <GridColumn Field=@nameof(ProductDto.DiscontinuedWidth="160px" Title="Discontinued" />
    </GridColumns>
</TelerikGrid>
                            </SplitterPane>
                            <SplitterPane Collapsible="false" >
<TelerikGrid @ref="Grid"
             Data="@GridData"
             Width="100%"
             Height="350px"
             Sortable="true"
             Resizable="true"
             Pageable="true">
    <GridColumns>
        <GridColumn Field=@nameof(ProductDto.ProductIdWidth="120px" MaxResizableWidth="250" Title="ID" />
        <GridColumn Field=@nameof(ProductDto.ProductNameId="productName" Width="200px" MinResizableWidth="120" Title="Name"/>
        <GridColumn Field=@nameof(ProductDto.UnitPriceWidth="140px" Title="Price" />
        <GridColumn Field=@nameof(ProductDto.UnitsInStockWidth="160px" Title="In stock" />
        <GridColumn Field=@nameof(ProductDto.QuantityPerUnitWidth="210px" MinResizableWidth="100" MaxResizableWidth="400" Title="Quantity per unit" />
        <GridColumn Field=@nameof(ProductDto.DiscontinuedWidth="160px" Title="Discontinued" />
    </GridColumns>
</TelerikGrid>
                            </SplitterPane>                            
                        </SplitterPanes>
                    </TelerikSplitter>                            
@code {
    private ProductService _productService;
    private ProductService ProductService
    {
        get
        {
            if(_productService == null)
            {
                _productService = new ProductService(http);
            }
            return _productService;
        }
    }
    public TelerikGrid<ProductDto> Grid { get; set; }
    public IEnumerable<ProductDto> GridData { get; set; }
    protected override async Task OnInitializedAsync()
    {
        GridData = await ProductService.GetProducts();
    }
    private async Task AutoFitAllColumns()
    {
        await Grid.AutoFitAllColumnsAsync();
    }
    private async Task AutoFitColumn()
    {
        await Grid.AutoFitColumnAsync("productName");
    }
}
Sander
Top achievements
Rank 1
Iron
 updated answer on 01 Nov 2023
4 answers
2.2K+ views

We have 2 different instances of Window:

  • Editor
  • Details

Editor always has too much content to show and Windows automatically adds a vertical scroll bar.  Editor's content is a number of Telerik controls "statically" defined in the Razor.  We also define a height and width.

Details is mostly a <table> with rows built from a foreach loop.  We don't specify a Height or Width.  Sometimes there's too many rows to fit in the dialog given the browser or screen size. Details does not display a vertical scroll bar when there is too much content so much of it is hidden.

How can we get the vertical scroll bar on the Details instance described above?

Radko
Telerik team
 answered on 01 Nov 2023
1 answer
400 views
Basically I would like to be able to use a dropdownlist where the user can insert a customer name, number, or email and filter on a column (property) provided by the database or myself in the class. But when the item/customer is selected...the name field is the only thing displayed. Right now I have to set the value field to my big column in order to filter properly. Hopefully this makes since. Was hoping to have a manual filtering/data control option like on a grid, but I do not see this available at the moment. Kind of like on the grid where I can use the search box and control what fields are filtered on. The only way I can think of now is to add a textbox in front and use that as the barcode/search option and manually filter the data behind. Similar to how quickbooks desktop allow the user to put in the barcode or the name of a product, but the display selection on only shows the product name.
Nadezhda Tacheva
Telerik team
 answered on 31 Oct 2023
1 answer
433 views
I have been trying to show an icon in a grids header.
Therefore I have copied the code from
https://docs.telerik.com/blazor-ui/components/grid/templates/column-header

Sadly, I dont get an icon.
The preview of your example doesn't show one either :-(

Is there something that has been changed? How can I use the template to show an icon in the header?

with kind regards, Dennis de Vries
Hristian Stefanov
Telerik team
 answered on 31 Oct 2023
1 answer
187 views

I'm still new to these components, but when any On***Click event is fired on the Grid, when using GridScrollMode.Virtual, the Grid scrolls back to top. This only happens when using virtual scrolling. I don't know if the Grid is rerendered or just scrolls up, it's hard to know.

Feels like a bug, as it works well when not using virtual scrolling. I've tried setting the args.ShouldRender = false, without any luck.

Johan
Top achievements
Rank 2
Iron
Iron
 answered on 30 Oct 2023
1 answer
207 views

When I create a form with auto-generated fields and disable one of them (see code), the field indeed cannot be edited, but the associated spinner remains active (is a numeric field in this case), allowing the modification of the field's value. I believe that the underlying editor of the field (regardless of its type: datepicker, combobox, dropdownlist, numerictextbox or colorpicker) should be disabled when the FormItem is disabled, as it creates inconsistencies in the UI.

<FormItems>
              <FormItem Field="@nameof(ViewModel.SomeField)" />
              <FormItem Field="@nameof(ViewModel.NumericField)" Enabled="@some_variable"/>
</FormItems>
I understand that I could specify the template and disable the editor within it, but in this case, it would be necessary to define the templates of almost every FormItem, and the auto-generated editors would lose their purpose. 

Regards. 
Twain.


1 answer
243 views

As the title says, I am trying to use the @onkeydown Event in a TreeView ItemTamplate.
The reason for doing this is so I can manipulate the default navigation behaviour of the TreeView and immediately select an item when using the Up and Down Arrows instead of having to press the Enter key.

I am aware of the documentation that shows how to react to @onclick Blazor Treeview - Templates - Telerik UI for Blazor.
I can get @onclick to work but not @onkeydown or any other input related events besides mouse events.
Using Telerik 3.6.0

Below is a code sample which shows what I am trying to do but is not working.
When debugging and setting a breakpoint in the NodeKeyDown Method, I can not reach it.

<TelerikTreeView Data=“@TreeData”><TreeViewBindings><TreeViewBinding><ItemTemplate> @{ TreeItem itm = context as TreeItem; <span @onkeydown=“@(_ => NodeKeyDown(_))” tabindex=“0”> Node: <strong>@itm.Text</strong></span> } </ItemTemplate>

</TreeViewBinding>

</TreeViewBindings>

</TelerikTreeView>

<label id=“result”>@result</label> @code { string result { get; set; } async Task NodeKeyDown(KeyboardEventArgs args) { result = $"You pressed key: {args.Code}"; } // sample data public IEnumerable<TreeItem> TreeData { get; set; } public class TreeItem { public string Text { get; set; } public int Id { get; set; } public List<TreeItem> Items { get; set; } = new List<TreeItem>(); public bool HasChildren { get; set; } } protected override void OnInitialized() { LoadHierarchical(); } private void LoadHierarchical() { List<TreeItem> roots = new List<TreeItem>() { new TreeItem { Text = "Item 1", Id = 1, HasChildren = true }, new TreeItem { Text = "Item 2", Id = 2, HasChildren = true } }; roots[0].Items.Add(new TreeItem { Text = "Item 1 first child", Id = 3 }); roots[0].Items.Add(new TreeItem { Text = "Item 1 second child", Id = 4 }); roots[1].Items.Add(new TreeItem { Text = "Item 2 first child", Id = 5 }); roots[1].Items.Add(new TreeItem { Text = "Item 2 second child", Id = 6 }); TreeData = roots; }


Svetoslav Dimitrov
Telerik team
 answered on 30 Oct 2023
1 answer
162 views

Between the Signature Component and the PDF Processing component I'm having a hard time figuring out how to present a pdf file on a Blazor page for the user to read. Then have a user provide their signature and save that file with the signature imbedded.

I feel like I'm missing and or confusing steps here.. Can someone help me out?

Dimo
Telerik team
 answered on 27 Oct 2023
1 answer
367 views
On all my <TelerikGrid> tags I am getting the error: Unexpected use of an unbound generic name on most of the values I pass into this grid except for FilterMode. The error does not prevent a build but I can't figure out how to get it to go away. The same thing is showing on all my grids and has always been there. Restarting visual studio does not fix it. See the code snippet below for the grid and my attachment shows a screenshot of the grid declaration code with the error lines. The [***] is just a stand in to anonymize the code. Can anyone explain what is causing the error?
@using [***].Common.Dtos;
@using [***].Common.Enumerations;
@using [***].Features.EmployeeInfoAndTravelRequestLists.TravelRequestListingTab

@if (ViewModel is not null)
{
    <!-- Render loader until grid initial data load is complete -->
    @if(!ShouldRenderGrid)
    {
        {
            <div style="height:500px">
                <TelerikLoaderContainer></TelerikLoaderContainer>
            </div>
        }
    } else
    {
        <TelerikGrid OnRead="@TravelRequestGridOnReadAsync"
                        Class="grid-no-scroll"
                        TItem="@TravelRequestFullDto"
                        EnableLoaderContainer="true"
                        Pageable="true"
                        Sortable="true"
                        SortMode="SortMode.Multiple"
                        PageSize="10"
                        SelectionMode="@GridSelectionMode.Single"
                        FilterMode="GridFilterMode.FilterMenu">
            <!-- dropdown, search box and new request button above grid -->
            <GridToolBarTemplate>
                <div class="dropdown-list-container">
                    <TelerikDropDownList Width="100px" Data="@ViewModel.EmployeeStatuses" @bind-Value="ViewModel.EmployeeStatusDDLSelectedValue">
                        <DropDownListSettings>
                            <DropDownListPopupSettings Height="58px" />
                        </DropDownListSettings>
                    </TelerikDropDownList>
                </div>
                <GridSearchBox Placeholder="Name/SAP/Personal ID..."
                                Width="280px" />
                <button class="new-request-button"><span class="k-icon k-i-plus"></span>New Request</button>
            </GridToolBarTemplate>
            <GridColumns>
                <GridCheckboxColumn SelectAll="false" Width="40px" />
                <GridColumn Title="SAP Number" Width="195px">
                    <Template>
                        @{
                            var SAPNumber = ((TravelRequestFullDto)context).SAPNumber;
                            var RequestStatus = ((TravelRequestFullDto)context).Status;
                            // render a chip in travel request number column if record has a request status
                            <span>
                                @SAPNumber
                                <span class="cell-padding" />
                                <TelerikChip Class="travel-request-status-chip"
                                                Text=@TravelRequestStatusExtensions.ToDisplayValue(RequestStatus)
                                                Disabled=true
                                                Rounded="full"
                                                ThemeColor=@GetChipColorClass(RequestStatus) />
                            </span>
                        }
                    </Template>
                </GridColumn>
                <GridColumn Title="Workday Number" Field="@(nameof(TravelRequestFullDto.WorkdayNumber))" Width="140px" />
               <!-- other grid columns here.... -->
            </GridColumns>
        </TelerikGrid>
    }
}

Noah
Top achievements
Rank 1
Iron
 answered on 26 Oct 2023
1 answer
293 views

I am starting a new project and went to download the latest version of Blazor from nuget and I get the following error:

  GET https://nuget.telerik.com/v3/package/telerik.fonticons/index.json
  GET https://nuget.telerik.com/v3/package/telerik.svgicons/index.json
  OK https://nuget.telerik.com/v3/package/telerik.fonticons/index.json 6039ms
  OK https://nuget.telerik.com/v3/package/telerik.svgicons/index.json 6037ms
NU1101: Unable to find package Telerik.FontIcons.
NU1101: Unable to find package Telerik.SvgIcons.

Package restore failed.

The last version I can successfully download is Telerik.UI.for.Blazor 4.4.0.  Everything after that seems to have an issue with the icon dependencies. 

Anyone have any thoughts on what I might be missing, has anyone else been able to successfully start a new project with 4.5.0 or higher?

Rick
Top achievements
Rank 2
Iron
Iron
 answered on 26 Oct 2023
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?