G'day

Is there plans to implement browser size binding? (Similar to BlazorSize EdCharbeneau/BlazorSize )

For now, with the newly released exposed events on TelerikWindow; LeftChanged and TopChanged, I guess the solution could be to wrap everything in a TelerikWindow? Then run events on these change events?

Otherwise.... if we were to use BlazorSize on top of Telerik, would we place the BlazorSize root element inside the TelerikRootComponent or outside?
Just unsure if/how it would interfere......

Hi,

Please simplify customizing Grid Popup, it should be available under Grid with build-in context and binding

I am already using your do-it-yourself example but IMHO it is too much code

Regards

Andrzej

Hello

Would be great to have a virtualization option on the ListView component, as paging is already supported.

Then we can achieve the "google images" type infinite scrolling without killing performance by loading all without paging...

Below example where we want users to be able to infinitely scroll through images based on keywords;

Hi,

Please add Resizable flag for All your Popups (DropDownList, CombobBox, etc...)

It would be also good to allow Resize AnimationContainer

Regards

Andrzej

Can you either fix the Export functionality to apply Custom footers that are not aggregated to the exported data or Change Enum options to add a Custom type to allow custom footer template values to be exported along with the other GrigAggregates?

When a Chart Series has a click handler defined, I think the cursor should be set to 'pointer' when the user is hovering over the series so the user knows its clickable. Currently the Chart Series Labels change to a pointer cursor when you hover them, however they are not clickable. Not sure if this was the intended functionality, but it seems backwards to me.

Grid - Import from Clipboard (Excel) when column name matches the first row header

I think it would be a great feature to be able to import copied data from excel into the grid either based on the index of the column or the header row in the clipboard matches the name of the column in Blazor Grid.

---

ADMIN EDIT

You can find an example of implementing this and the caveats it brings in the following sample project: https://github.com/telerik/blazor-ui/tree/master/grid/paste-from-excel

Considering that it breaks the UX of many features, while being highly specific to the data and models, this is not a feature the grid can have built-in.

---

It would be good to have a Grid parameter like "ExpandDetailsOnSelection" for the Grid:

-> When the user selects a row, the DetailTemplate automatically expands - the DetailTemplate of the previous selected item is automatically collapsed

Advantages:

- no "+" button needed

- easy to integrate for 2-way-binding on SelectedItems (no need to use GridState and RowClick event)

I am trying to get the currently filtered data out of the grid as per this KB article and I want to include the searchbox filters. I do not, however, want to use OnRead but I want to get the grid state on a click of a button and get the filters plus the searchbox filters from it instead.

---

ADMIN EDIT

Here is a sample of getting those filters through the OnRead event without using remote operations - all the data is in the view model (the SourceData field) so this does not change the way operations happen compared to not using OnRead.

@using Telerik.DataSource
@using Telerik.DataSource.Extensions

@( new MarkupString(output) )

<br />
<TelerikButton OnClick="@GetFilters">Get Filters</TelerikButton>


<TelerikGrid Data=@GridData TotalCount=@Total OnRead=@ReadItems
             FilterMode=@GridFilterMode.FilterRow Sortable=true Pageable=true EditMode="@GridEditMode.Inline">
    <GridToolBar>
        <GridSearchBox />
    </GridToolBar>
    <GridColumns>
        <GridColumn Field=@nameof(Employee.ID) />
        <GridColumn Field=@nameof(Employee.Name) Title="Name" />
        <GridColumn Field=@nameof(Employee.HireDate) Title="Hire Date" />
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
            <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    TelerikGrid<Employee> GridRef { get; set; }
    string output { get; set; }
    public DataSourceRequest CurrentRequest { get; set; }
    void GetFilters()
    {
        output = string.Empty;


        foreach (var item in CurrentRequest.Filters)
        {
            if (item is FilterDescriptor) // filter row
            {
                FilterDescriptor currFilter = item as FilterDescriptor;
                output += $"field: {currFilter.Member}, operator {currFilter.Operator}, value: {currFilter.Value}<br />";
            }

            if (item is CompositeFilterDescriptor) // filter menu
            {
                CompositeFilterDescriptor currFilter = item as CompositeFilterDescriptor;
                output += $"START nested filter: logical operator: {currFilter.LogicalOperator}, details:<br />";
                // there will actually be 1 or 2 only, this showcases the concept and the types
                foreach (FilterDescriptor nestedFilter in currFilter.FilterDescriptors)
                {

                    output += $"field: {nestedFilter.Member}, operator {nestedFilter.Operator}, value: {nestedFilter.Value}<br />";
                }
                output += "END nested filter<br />";
            }
        }
    }




    public List<Employee> SourceData { get; set; }
    public List<Employee> GridData { get; set; }
    public int Total { get; set; } = 0;

    protected override void OnInitialized()
    {
        SourceData = GenerateData();
    }

    protected async Task ReadItems(GridReadEventArgs args)
    {
        CurrentRequest = args.Request;


        var datasourceResult = SourceData.ToDataSourceResult(args.Request);

        GridData = (datasourceResult.Data as IEnumerable<Employee>).ToList();
        Total = datasourceResult.Total;

        StateHasChanged();
    }

    //This sample implements only reading of the data. To add the rest of the CRUD operations see
    //https://docs.telerik.com/blazor-ui/components/grid/editing/overview

    private List<Employee> GenerateData()
    {
        var result = new List<Employee>();
        var rand = new Random();
        for (int i = 0; i < 100; i++)
        {
            result.Add(new Employee()
            {
                ID = i,
                Name = "Name " + i,
                HireDate = DateTime.Now.Date.AddDays(rand.Next(-20, 20))
            });
        }

        return result;
    }

    public class Employee
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    }
}

---

Hello support team,

from the donut chart example under https://demos.telerik.com/blazor-ui/chart/donut-chart:

Is there a specific reason why all charts have a Template sub-property for the ChartSeriesTooltip construct but the Template field with the template syntax for the ChartSeriesLabels construct? I would favour a unified syntax for both of the properties, if this is possible somehow...

Is this planned for the future to be unified? Especially formatting like shown under https://docs.telerik.com/blazor-ui/knowledge-base/chart-format-percent is not as simple as I would have expected as nobody wants to touch JavaScript code literally :D (Also, localizing data seems quite difficult with that technique).

The best option in my opinion would be to remove those templates completely and just let the user decide what to show there while using a field called e.g. TooltipMappingName and LabelMappingName or something like that. This gives the chart the maximum of configuration possible.

Example:

<TelerikChart>
    <ChartTitle Text="What is you favourite sport?"></ChartTitle>
    <ChartLegend Visible="true" Position="ChartLegendPosition.Top"></ChartLegend>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Donut"
                     Data="@Data"
                     Field="@nameof(ModelData.Value)"
                     CategoryField="@nameof(ModelData.Category)">
            <ChartSeriesTooltip Visible="true" Context="item" TooltipMappingName="@nameof(ModelData.Tooltip)"/>
            <ChartSeriesLabels Position="ChartSeriesLabelsPosition.OutsideEnd"
                               Visible="true"
                               Background="transparent"
                               LabelMappingName="@nameof(ModelData.Label)">
            </ChartSeriesLabels>
        </ChartSeries>
    </ChartSeriesItems>

</TelerikChart>

@code {
    public class ModelData
    {
        public string Category { get; set; }
        public int Value { get; set; }
  public string Tooltip { get; set; }
        public string Label { get; set; }
    }

    public List<ModelData> Data = new List<ModelData>()
    {
        new ModelData()
        {
            Category = "Football",
            Value = 35,
   Tooltip = "35%",
   Label = "Football: 35%"
        },
        new ModelData()
        {
            Category = "Basketball",
            Value = 25,
   Tooltip = "25%",
   Label = "Basketball: 25%"
        },
        new ModelData()
        {
            Category = "Volleyball",
            Value = 20,
   Tooltip = "20%",
   Label = "Volleyball: 20%"
        },
        new ModelData()
        {
            Category = "Rugby",
            Value = 10,
   Tooltip = "10%",
   Label = "Rugby: 10%"
        },
        new ModelData()
        {
            Category = "Tennis",
            Value = 10,
   Tooltip = "10%",
   Label = "Tennis: 10%"
        }
    };
}

Best regards,

Christian

When I have some dynamic content inside the tooltip template, the tooltip seems not to be re-rendering. E.g. when I have a tooltip with a text input and button and wish to disable the button when no text is entered, the tooltip seems to be only refreshing after closing and re-opening it. Simplified example:

<TelerikTooltip TargetSelector=".search-tooltip" Position="TooltipPosition.Bottom" ShowOn="TooltipShowEvent.Click">
	<Template>
		<TelerikTextBox @bind-Value="@SearchText"></TelerikTextBox>
		<TelerikButton OnClick="@Search" Enabled="@(!string.IsNullOrEmpty(SearchText))">Search</TelerikButton>
	</Template>
</TelerikTooltip>

Even tried using the ValueChanged event of the TelerikTextBox and calling the StateHasChanged() method but had the same result (the enabled/disabled state of button only changed after closing&re-opening the tooltip).

I would expect the binding and re-rendering to work as normally in Blazor. Is there a way to manually 'call refresh' on the tooltip?

In our application, we have the need for aggregate functions in the grid which are determined at runtime, not design time. We were able to get this working for Group footers using a combination of the GroupFooterTemplate element and determining the applicable aggregates in OnStateInit and OnStateChanged. When our team saw that the FooterTemplate element was added, we were excited to bring "Grand Summary" functionality to this grid on top of the existing group summaries. As far as we have been able to determine, however, there doesn't appear to be a way, currently, to add AggregateDescriptors dynamically for the entire grid like we can for groups. We can do the aggregate operations manually against the data source, but this doesn't take into account and filtering which is applied to the grid. We have been unable to find any way of adding AggregateDescriptors for the overall Grid like we can for groups within the GridState's GroupDescriptor property.

Attached are two files: StateInitializationC#Code and gridRazor.txt, which contain relevant snippets of what we are currently doing.

• When I close Modal - Popup or Save button is clicked not able to Re-Load or Refresh the grid or Parent component
• I am calling the Save Action in Modal-Popup page and not using EventCallback method
• In Parent component, I am loading the Grid. But in Modal-Popup when calling Save Action the Grid or Parent component not refreshing.

Thanks

Vishnu Vardhanan

For the Grid, is is possible to have a a SortField along with Field (that displays the data) in columns.

The SortField will be used instead of Field when sorting (if Grid is Sortable), like in WebForms: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.gridview.sortexpression?view=netframework-4.8.

Maybe you want to sort data based on other values instead of what is displayed.

This could be especially useful for dates that have been formatted for display in Field

but you don't want to use for sorting because date and string sorting is not the same.

Submitted on customer behalf:

This line of code is taken directly out of your https://demos.telerik.com/blazor-ui/grid/editing-inline

What kind of magic updates the actual database?

privatevoidUpdateItem(GridCommandEventArgs args)

{

var argsItem = args.ItemasProductBindingModel;

var index =GridData.FindIndex(i => i.ProductId== argsItem.ProductId);

if(index !=-1)

{

GridData[index]= argsItem;

}

}"

row height set in grid definition must apply to all rows in the grid for row virtualization as of now. 

in real business case there might be complex content in each row that can't reinforce this - but if each row report its own height, grid still can visualize the load, and it will be much more flexible. 

It would be great if the controls supported arbitrary attributes. Similar to how it is done in the native form editing controls in Blazor framework.

ASP.NET Core Blazor forms and validation

"All of the input components, including EditForm, support arbitrary attributes. Any attribute that doesn't match a component parameter is added to the rendered HTML element."

Looking through the examples I can't find one with SelectionMode="GridSelectionMode.Multiple" and using a RowTemplate.

ADMIN EDIT: This is not a bug in the component, an example of how this can be implemented by the app is available in the comments.

I'm not sure what I should be binding my checkbox to so it accurately reflects selection state.

From the RowTemplate Example adding SelectionMode:

<TelerikGrid Data=@GridData
             @bind-SelectedItems="@SelectedItems"             
             SelectionMode="GridSelectionMode.Multiple"
             Height="@Height">
    <RowTemplate Context="product">
         @*Trying to inspect what is generated in the examples I came up with this, but not sure what to bind to checked*@
               <td role="gridcell" colspan=0 data-col-index="0">
                    <span>
                        <input class="k-checkbox k-grid-checkbox telerik-blazor" type="checkbox" />
                    </span>
                </td>
         <td>
            <img class="rounded-circle" src="@($"images/{product.ProductId}.jpg")" alt="Alternate Text" />
            @product.ProductName
        </td>
        <td>
            @(String.Format("{0:C2}", product.UnitPrice))
        </td>
    </RowTemplate>
    <GridColumns>
        <GridColumn Field=@nameof(Product.ProductName) Title="Product Name" />
        <GridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price" />
    </GridColumns>
</TelerikGrid>

Admin edit: While this cannot become a built-in feature, you may find useful the following example: https://github.com/telerik/blazor-ui/tree/master/common/grpc-example

Hello Team;

As .Net Core 3 offers gRPC support, I'm suggesting that the Blazor Team, look into some of the components that could automatically talk to backend gRPC services to get data, i.e. Auto Complete or DropDown box.

This way it could simplify different ways of providing datasource to some of these data oriented components.

Hope this suggestion helps!
..Ben