Data has 6 columns, A, B, C with a value and a date.

AValue - double
ADate - datetime
BValue - double
BDate - datetime
CValue - double
CDate - datetime

Client requests that one of the 3 values A, B, C is chosen by drop down.

In a code-behind we group by a particular Value and then sort descending so that the highest value is on top of the grouping. Easy.

But then inside the grouping of Value are to be rows from the data that are not matched by Value but by a Search based on date range +- 5 minutes.

Example: client selects A

1. Grid groups by AValue and then sorts DESC
2. Inside Group[0] the client wants to Search all the GridData and display BValue and CValue that fall within a date range +- 5 minutes from Group[0].ADate

Right now I see SearchFilter inside the GridState class (for the whole Grid) but I think for what the client needs we would have a SearchFilter inside of GroupDescriptor (for that Group)?

Is this possible? 

If that is not possible, would it be possible to use 1 GridData as the source for the Grid and another GridData as the source for the Grid that appears inside each grouping?

Note: for one row in the data, the max value may be A, B or C.  But the date times in that row do not match up.  They are 3 different date time values.

I have a Blazor grid for which I populate an option dropdown. I use the OnAdd="@AddHandler" to add a new row. There are two other columns in the grid that have calculated values based on Name grid and 2 others, but once the option is populated, the only way for the calculations to work is to select another name, then come back to the first value. Is there a way to default the value to text that says "Select name" and make the user choose something?

                           <EditorTemplate>
                               @{
                                   CurrentlyEditedRecord = context as Record;
                                   <select @bind="@CurrentlyEditedRecord.Name">
                                       @foreach (var item in Products)
                                       {
                                           <option value="@item">@item</option>
                                       }
                                   </select>
                                      }
                           </EditorTemplate>

I'm currently trying to integrate telerik tilelayout inside telerik tabstrip dynamically?

for example

        <TabStripTab Class="@(filteredRows.Any() ? GetTabWidth() : "auto")"  Title="@tabtitle1["tabtitle"].ToString()">
                 <TelerikTileLayout Columns="12"
               RowHeight="auto"
               Resizable="true"
               Reorderable="true">
<TileLayoutItems>
                    @foreach (DataRow row in filteredRows)
                    {

                        <_Data columnspan='Convert.ToInt32(row["columnspan"])' rowspan='Convert.ToInt32(row["rowspan"])' pageId="@pageId" oDt="row" encryptQueryString="@data"></_Data>
                    }
                </TileLayoutItems>
            </TelerikTileLayout>
                </TabStripTab>
            }                                   
            @if (filteredRows2.Any())
            {

        <TabStripTab Title="@tabtitle2["tabtitle"].ToString()">

            <TelerikTileLayout Columns="12"
                               RowHeight="auto"
                               Resizable="true"
                               Reorderable="true">
                <TileLayoutItems>
                    @foreach (DataRow row in filteredRows2)
                    {

                        <_Data columnspan='Convert.ToInt32(row["columnspan"])' rowspan='Convert.ToInt32(row["rowspan"])' oDt="row" data="@data"></_Data>
                    }
                </TileLayoutItems>
            </TelerikTileLayout>

                </TabStripTab>

when i set persist content to true it reloads the components which invoke the database calling ?I s there any way to do without component being refreshed?

Can we get a Switch and Checkbox theme color property similar to the rest of the components.

😀

Hello, I have the following requirement, I need to be able to re-order telerik grid columns programmatically.  I have come up with a simple sample project to demonstrate the need, but I've noticed that although it re-orders the columns the first time I press a button (see sample), it does not re-order the columns after that....something which I find very peculiar. Notice, I tried two approaches in re-ordering columns, one using simple rearrangement of <GridColumn>s and another is to muck around with Grid state object (_grid.GetState()).  Any help is greatly appreciated.

<div style="width: 100%; height: 100%">
    <TelerikGrid TItem="@Model"
                 FilterMode="@GridFilterMode.FilterRow"
                 SelectionMode="GridSelectionMode.Single"
                 EnableLoaderContainer="true"
                 
                 Pageable="false"
                 Sortable="true"
                 Height="100%"
                 OnStateChanged="OnStateChanged"
                 Data="Data"
                 @ref=@_grid>
        <GridColumns>
            @{
                foreach (var col in ColumnOrder)
                {
                    if (col == 1)
                    {
                        <GridColumn Field="@(nameof(Model.One))" FieldType="@(typeof(string))" Title="One Values"></GridColumn>
                    }
                    else if (col == 2)
                    {
                        <GridColumn Field="@(nameof(Model.Two))" FieldType="@(typeof(string))" Title="Two Values"></GridColumn>
                    }
                    else if (col == 3)
                    {
                        <GridColumn Field="@(nameof(Model.Three))" FieldType="@(typeof(string))" Title="Three Values"></GridColumn>
                    }
                }
            }
        </GridColumns>

    </TelerikGrid>
    <Button @onclick="ButtonClick1">Order Columns: 3,2,1</Button>
    <Button @onclick="ButtonClick2">Order Columns: 2,3,1</Button>
    <Button @onclick="ButtonClick3">Order Columns: 1,2,3</Button>
</div>

@code {
    private List<Model> Data = new();
    private int[] ColumnOrder = new[] { 1,2,3 };
    private TelerikGrid<Model> _grid;

    protected override void OnInitialized()
    {
        BuildData();
    }

    private void BuildData()
    {
        for (int i = 0; i < 10; i++)
        {
            Data.Add(new Model
            {
                One=$"One {i}",
                Two=$"Two {i}",
                Three=$"Three {i}",
            });
        }
    }

    private void ButtonClick1()
    {
        ColumnOrder = new[] { 3,2,1 };
        _grid.Rebind();
        StateHasChanged();
    }

    private void ButtonClick2()
    {
        ColumnOrder = new[] { 2, 3, 1 };
        _grid.Rebind();
        StateHasChanged();
    }

    private void ButtonClick3()
    {
        var state = _grid.GetState();
        var i = 0;
        foreach (var col in state.ColumnStates)
        {
            if (col.Field == "One") col.Index = 0;
            if (col.Field == "Two") col.Index = 1;
            if (col.Field == "Three") col.Index = 2;
        }
        //ColumnOrder = new[] { 1,2,3 };
        StateHasChanged();
    }

    private void OnStateChanged(GridStateEventArgs<Model> obj)
    {
        Console.WriteLine("StateChanged");
    }

    public class Model
    {
        public string One { get; set; }
        public string Two { get; set; }
        public string Three { get; set; }
    }
}

When editing a text field on a Blazor Grid in inline edit mode, pressing the backspace key will cause the cell edit to cancel, similar to what the escape key does. To reproduce, enter edit mode and press the backspace key, or keep pressing the backspace key until  the edit cancels.

This is usual behavior since the backspace key is very often used to clear the text before entering new text and it is unexpected when pressing the key causes the edit to suddenly cancel. It there a way to prevent this unwanted behaviour?

Bryan

Could there be an option to NOT close the filter dropdown when the clear button is pressed?

I just got a request for this, and their thought is they will have a filter set, then want to click clear and then still pick new items to filter before leaving the dropdown.

Also, watching him on a touch device made it also especially painful.

Hi,

Is there any way of binding to a nullable DateTime or is there a recommended approach for handling null/empty values. I think this question could apply to any of the controls that bind to a struct or an in-built type like Int/Decimal.

Thanks,

Nick.

Hi, the grid toolbar is default located on top of the grid, i would like to place it on bottom (without using a separate element).

This feature is described in documetation (https://docs.telerik.com/blazor-ui/knowledge-base/grid-pager-top-toolbar-bottom) as will be implemented in future version of the library.

Is this planned? there is a release date?

actually i solved with this css, can it be a good workaround?

.k-grid.bottom-toolbar {
    display: flex;
    flex-direction: column-reverse;
}


<TelerikGrid Class="bottom-toolbar" />

Thanks