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

I have a donut with 2  ChartSeries.

For the inner circle I have tried to separate the different data items with a empty space. But I have no idea how it works. Could somebody help?

<ChartSeries Type="ChartSeriesType.Donut" Data="@GridDataDonutProjectName"
             Field="@nameof(ProjectOverviewVm.Hours)" 
CategoryField="@nameof(ProjectOverviewVm.ProjectName)" Gap="0.8" Spacing="0.8" Margin="5" >

Because of the Margin there is some space between the 2 donuts series

But how can I add some empty space at the arrows in this picture. I have tried something with spacing and gap but I'm doing something wrong

I added a TelerikWizard with five WizardSteps on a page. No child components, all code directly inside the different steps. Navigating back and forward between the steps works fine, all steps/controls keeps their user input data/state.

After a while I had so much content that I wanted refactor some of the steps into components. I made the first component and added it to one of the steps:

<WizardStep ...
<Content>
    <TransferLocationTables @ref="refTransfer" LocationId="@VM.SelectedLocation.Id" />
</Content>
...

Now when I navigate to that specific step the component is always "reset" and I have to rearrange the data loaded from the DB again, which kind of defeats the whole idea with those steps and being able to go back and forth between them.

When I go one step back I can see in the debugger that the component still got all the internal data. As soon as I go forward to that step everything is empty again. Also noticed the components overriden OnParametersSet and OnInitializedAsync methods are called each time I navigate there so clearly the whole component is "reinitialized" and thus loosing the data.

So, is this changed behavior due to that when I had all code in the TelerikWizard everything behaved as a single component and thus all data persisted (didn't really leave it), but when I add child components they will automatically reinitialize everytime their step is rendered?

I guess I could persist the individual child components state by saving it to the DB and load it everytime I enter that step again, but I'm hoping there is a simpler soluton that I've overlooked (I'm fairly new with coding Blazor but coded .NET for a long time).

In Kendo UI for ASP.NET MVC / JQuery the Grid component has the option to show a refresh icon on bottom bar / pager.  

In the blazor version i cannot see it.

Please add a builtin refresh icon on grid as done in other libraries.