When a content is displayed in TelerikWindow and a TelerikTreeView`s item is expanded, the item`s content is above the window one due to higher z-index.
To fix it, use this CSS:
/* Telerik window content (with z-index 10001) above their animation container (with z-index 10002, used for example in tree view) */Now we can expand/collapsed tree view item using bound read/write model property.
We need to bind read-only property or controll expandability outside of tree view.
Examples:
Thank you
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;
}
}"
<TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="@SelectedValue" Width="100%" />
public string SelectedValue { get; set; }
public class MyDdlModel
{
public int MyValueField { get; set; }
public string MyTextField { get; set; }
}
protected IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
Hello,
im trying to render a treview but its not showing any item, im also print the results of my query on a table using a for loop and it shows the results ok , but the trevieww its not loading any data. Attached my code :
@inherits LayoutComponentBaseGrid errors with both filtering and a detail template:
<Telerik.Blazor.Components.TelerikGrid Data="@GridData" FilterMode="Telerik.Blazor.GridFilterMode.FilterRow">
<GridColumns>
<Telerik.Blazor.Components.GridColumn Title="Name" Filterable="true" Field="@nameof(GridItem.Name)"></Telerik.Blazor.Components.GridColumn>
<Telerik.Blazor.Components.GridColumn Field="@nameof(GridItem.Id)" Filterable="true" Title="Id"></Telerik.Blazor.Components.GridColumn>
</GridColumns>
<DetailTemplate>
<div>Custom Template</div>
</DetailTemplate>
</Telerik.Blazor.Components.TelerikGrid>
@code {
List<GridItem> GridData { get; set; } = new List<GridItem>();
protected override void OnInitialized()
{
GridData = GenerateData();
}
private List<GridItem> GenerateData()
{
List<GridItem> data = new List<GridItem>();
for (int i = 0; i < 5; i++)
{
GridItem mdl = new GridItem { Id = i, Name = $"Name {i}" };
data.Add(mdl);
}
return data;
}
public class GridItem
{
public int Id { get; set; }
public string Name { get; set; }
}
}
The grid renders correctly with either the DetailTemplate or FilterMode, but not both.
Example repo - https://github.com/kviiim/BlazorDetailTemplateGridFilterIssue
-Ben
As a developer user, I need to add a Markdown Editor control to my Blazor UI application so that I can capture and display markdown-compliant text input.
Thanks
Vishnu Vardhanan
In a Telerik Grid, we had just implemented the new Grid Footer Template. However, any built-in filtering (filterrow, filtermenu, searchbox) we use now will cause the grid/page to crash when the input we type does not exist for any row in the grid. If the input we type does exist, the filtering works correctly. For instance, if wanted to filter the name "John Smith" and a row exists with that name, then that row will be filtered. If we typed in "John Smithasdf", then the grid crashes and we receive the following message from the DevTools window:
blazor.server.js:19 [2020-09-21T16:58:12.070Z] Error: System.InvalidOperationException: Nullable object must have a value.
at System.Nullable`1.get_Value()
at BudgetPak.Pages.User.Budgeting.HeadcountReview.<>c__DisplayClass0_4.<BuildRenderTree>b__43(RenderTreeBuilder __builder4)
at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent(Int32 sequence, RenderFragment fragment)
at Telerik.Blazor.Components.Grid.GridFooterCell`1.BuildRenderTree(RenderTreeBuilder __builder)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
From the highlighted text, we deduced the issue had to deal with the Grid Footer template. Not all of our columns are aggregated on the footer row, so we were thinking that's what the "Nullable object must have a value" message meant. When we removed the Grid Footer template, the filtering worked correctly. With one of our other grids, we added a temporary footer grid, and the same crash would occur.
Is there a work-around for this? The footer template otherwise is great, and we would like to use both that and filtering on our grids. Please let us know if you need any more info.
Thanks,
Steve
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.
Hello team;
Can you please tell us in what version or approximate time of arrival of the new Toolbar?
Suggestion: It would be helpful if the roadmap list is sorted by "In progress" status. This way we can plan accordingly.
Thanks!
Hello
Just a minor request re. the Grid search box :)
The typical UI behaviour of a search box, is that when you start typing in it, an "X" will appear within the box, allowing you to clear the value.
This would also be consistent with the Blazor combo-box behaviour.
Cheers
Phil
Hi Team,
We tried to use the TelerikLoader in Blazor WASM app, but the loader is not appearing on the page. We tried the basic example given in the Demo but did not work.
We are using latest Telerik Version (2.20.0).
@if (IsLoading)
{
<TelerikLoader />
}
else
{
@Data
}
We have below references in index.html
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>THOR.UI</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="css/toggle.css" rel="stylesheet" />
<link href="css/spinner.css" rel="stylesheet" />
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link id="theme" rel="stylesheet" href="./css/thor-light-theme-material.css" />
<link href="_content/Blazored.Toast/blazored-toast.min.css" rel="stylesheet" />
<script src="./site.js"></script>
<script src="_content/BlazorInputFile/inputfile.js"></script>
<script src="_content/BlazorPro.BlazorSize/blazorSize.min.js"></script>
<script src="_content/Fluxor.Blazor.Web/scripts/index.js"></script>
<script src="./scripts/download.js"></script>
</head>
I tried to follow this below article and add the reference as below and CDN also but it did not work.
<!DOCTYPE html>
<html>
<head>
. . .
<link href="/css/kendo-themes/default/dist/all.css" rel="stylesheet"/>
<!-- Choose only one of the themes -->
<!-- <link href="/css/kendo-themes/bootstrap/dist/all.css" rel="stylesheet" />
<link href="/css/kendo-themes/material/dist/all.css" rel="stylesheet" /> -->
</head>
Please let us know what changes we have to make this to work.
Thanks
Chandra Vanama
I would like to pass a defined piece of data in when I add a new row in a hierarchical Blazor grid. in the example below, I have a hierarchy of Agency > District > School. When I add a new school within a district, I would like to pass the District ID so that the user does not have to select it or type it in.
I have a district ID column in the schools grid, but (a) it would be better if the user did not see this and (b) when I click "Add school" that field is always passed as empty. Is there any way to pass the
districtSchools.Dist.DISTRICT_ID
variable when I add a row?
<TelerikGrid Data="@Agencies" Sortable="true" Reorderable="true" OnUpdate="@UpdateHandlerAgency">
<DetailTemplate Context="granteeAgency">
@{
var leadAgency = granteeAgency as Agency;
<TelerikGrid Data="leadAgency.Districts" OnUpdate="@UpdateHandlerDistrict" OnRowRender="@OnRowRenderHandlerDistrict">
<GridColumns>
<GridColumn Field="@(nameof(District.Dist.DistrictName))" Editable="false">
<Template>
@((context as District).Dist.DistrictName.ToString())
</Template>
</GridColumn>
<GridColumn Field="@(nameof(District.DistAlloc))">
<Template>
@((context as District).DistAlloc.ToString("C"))
</Template>
</GridColumn>
<GridCommandColumn>
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
<DetailTemplate Context="districtSchools">
<TelerikGrid Data="districtSchools.Schools" OnCreate="@CreateHandlerSchool" OnDelete="@DeleteHandlerSchool" OnUpdate="@UpdateHandlerSchool" OnRowRender="@OnRowRenderHandlerSchool">
<GridToolBar>
<GridCommandButton Command="Add" Icon="add">Add School</GridCommandButton>
</GridToolBar>
<GridColumns>
<GridColumn Field="@(nameof(School.SchoolName))">
<Template>
@((context as School).SchoolName.ToString())
</Template>
</GridColumn>
<GridColumn Field="@(nameof(School.SchoolAlloc))">
<Template>
@((context as School).SchoolAlloc.ToString("C"))
</Template>
</GridColumn>
<GridColumn Field="" Visible="true">
<Template>
@districtSchools.Dist.DISTRICT_ID
</Template>
<EditorTemplate>
@districtSchools.Dist.DISTRICT_ID
</EditorTemplate>
</GridColumn>
<GridCommandColumn>
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
</DetailTemplate>
</TelerikGrid>
}
</DetailTemplate>
<GridColumns>
<GridColumn Field="@(nameof(Agency.AgencyName))" Editable="false">
<Template>
@((context as Agency).AgencyName.ToString())
</Template>
</GridColumn>
<GridColumn Field="@(nameof(Agency.AgencyAlloc))">
<Template>
@((context as Agency).AgencyAlloc.ToString("C"))
</Template>
</GridColumn>
<GridCommandColumn>
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
Hi Telerik team,
in our Blazor App we have implemented the skip handling logic according to your documentation, but we have noticed an issue. When the sum of the skip and the page size is bigger then the total count of the items and we try to set the Skip property for the second time, some of the top items are not shown.
To demonstrate this, we have created a simple app: https://github.com/0rce/blazor-app-telerik-grid-skip-bug.git
Please clone the repo, start the application and follow the steps displayed above the grid to reproduce the bug.
Do you think it is a bug or is our implementation wrong?
Best regards,
Orce
---
ADMIN EDIT
I have linked this case in the Limitations section of the documentation and you can find more details and a path forward in this KB article: https://docs.telerik.com/blazor-ui/knowledge-base/grid-large-skip-breaks-virtualization.
Considering this and why the grid cannot and should not change this value for you, I am marking this with the "Won't Fix" status - I acknowledge it is behavior that is less than ideal, yet it stems from application logic and the grid cannot fix that.
If someone is looking at the provided repository - please also be aware that it showcases an invalid approach for fetching grid data that I strongly advise against. Review the rest of the thread for more details.
---