or
1 answer
883 views
Hi, I'm coming from a Kendo JQuery background and currently creating an app using Blazor UI.
I can see the datepicker can disable a range of dates but I need to configure it to disable all days which are not Mondays. Is this possible?
I can see the datepicker can disable a range of dates but I need to configure it to disable all days which are not Mondays. Is this possible?
Hristian Stefanov
Telerik team
answered
on
27 Apr 2022
2 answers
1.0K+ views
Hi,
I have in a serverside Blazor page a grid, which can paging, filtering and sorting.
In Kendo UI with Javascript the grid component provide a put request with filter, sort, page capabilities, i.e.
{
"sort": "Column1-desc",
"page": "1",
"pageSize": "10",
"group": "",
"filter": "Column2~eq~1~and~Column3~gt~10",
}
which return the data in json format.
Instead of showing the page with the grid I want create an url which returns the json data. Possible as GET Request with Parameter:
/api?sort=Column1-desc&page=1&pageSize=10&filter=Column2~eq~1~and~Column3~gt~10
But a PUT request with the paramter of Kendo UI is also possible.
Do you have an idea or example, how I can extend my Blazor web app?
Best regards,
Peter
2 answers
1.0K+ views
Hello
I am using in the in-build grid edit popup form in the editmode. Each of the grid columns have editortemplate that has an associated TelerikValidationMessage control to show the inline validation messages. I am also using ValidatorTemplate to show the validation messages onces the save action is made and the error comes in the model state. My issue is I only want to show the inline validation message and not the default validation summary that comes with the editform. Is there a way to disable the validation summary on the editform. Below is my code and and image of what it is looks now, and what I am trying to accomplish.
//Editor Template for the Grid Column with Validation Message
<GridColumn Field="@(nameof(_defectObj.Name))" Title="Name" Width="200px" TextAlign="ColumnTextAlign.Left" FieldType="@(typeof(string))" FilterMenuType="Telerik.Blazor.FilterMenuType.Menu" >
<EditorTemplate>
@{
_defectEdit = (DefectModel)context;
<TelerikTextBox @bind-Value="_defectEdit.Name" ></TelerikTextBox>
<TelerikValidationMessage For="@(() => _defectEdit.Name)"></TelerikValidationMessage>
}
</EditorTemplate>
</GridColumn>
<GridSettings>
<GridPopupEditSettings MaxWidth="700px" MaxHeight="600px" Width="500px" Height="600px" MinHeight="200px" MinWidth="300px" Title="@(_isNewGridRow == true? "Add New Defect": "Edit " + _currentDefectName)">
</GridPopupEditSettings>
<GridPopupEditFormSettings Orientation="FormOrientation.Horizontal" ButtonsLayout="FormButtonsLayout.Center" Columns="1" ColumnSpacing="25">
</GridPopupEditFormSettings>
<GridValidationSettings Enabled="true">
<ValidatorTemplate>
<DataAnnotationsValidator></DataAnnotationsValidator>
<ProblemDetailsValidator @ref="_customValidation"></ProblemDetailsValidator>
</ValidatorTemplate>
</GridValidationSettings>
</GridSettings>Image shows how both ValidationMessage display and ValidationSummary display. I would only like to show the Validation Message along the input textbox and not the validation summary. How can I accomplish this.
Thank you.
Beena.
Nadezhda Tacheva
Telerik team
answered
on
26 Apr 2022
1 answer
201 views
We recently made the update from version 2.* to 3.1.0 and then 3.2.0. I'm unsure when and where the change occurred but we are now having problems with the items visual display.
Previously, we had 2 ToolBarTemplateItem's setup like so:
<TelerikToolBar Class="toolbar-size">
<ToolBarTemplateItem>
<TelerikMultiSelect
Class="font-size-12 ml-5 bg-light-transparent h-auto"
Data="@Data"
Value="@ChosenModelNames"
TextField="@nameof(TreeView.Text)"
ValueField="@nameof(TreeView.Id)"
Placeholder="Select Data"
ValueChanged="@((List<string> args) => ChosenModelsChanged(args))"
Width="auto"
ItemHeight="25"
FillMode="@ThemeConstants.DropDownList.FillMode.Outline"
Rounded="@ThemeConstants.DropDownList.Rounded.Small"
Size="@ThemeConstants.DropDownList.Size.Large"
>
<ItemTemplate>
@{
var ctx = context as TreeView;
}
@ctx.DisplayName @ctx.Name
</ItemTemplate>
</TelerikMultiSelect>
</ToolBarTemplateItem>
<ToolBarTemplateItem>
<div class="mt-4 ml-2 w-100">
<TelerikRangeSlider
@bind-StartValue="@StartValue"
@bind-EndValue="@EndValue"
Min="0"
Max="25"
SmallStep="@SmallStep"
LargeStep="@LargeStep"
Width="95%"
OnChange="@(args => TimeUpdateHandler())"
TickPosition="@SliderTickPosition.Before">
<LabelTemplate>
<div class="time-slider-text">
@(GetRangeDate(context).ToString("htt"))
</div>
</LabelTemplate>
</TelerikRangeSlider>
</div>
</ToolBarTemplateItem>
</TelerikToolBar>
Hristian Stefanov
Telerik team
answered
on
26 Apr 2022
1 answer
1.1K+ views
I specifically need the functionality of selecting a group of cells in a grid and pasting them to another part of the grid. This is not possible in your grids, but I see it would work in spreadsheet components you have in other sets of controls. But the Blazor set of controls does not have this component yet - is it planned?
Marin Bratanov
Telerik team
answered
on
25 Apr 2022
1 answer
303 views
is there a way to hide a group footer when the group is collapsed?
Joana
Telerik team
answered
on
25 Apr 2022
1 answer
417 views
The Telerik Blazor Grid doesn't seem to retain the currently selected items when sorting. I've got a simple single select grid and have bound the SelectedItems property to a similarly named field in code behind. The SelectedItems field definitely contains a single entry ok and selecting items in the grid updates this as expected. However, when sorting, the grid no longer highlights the selected item as selected, and the check box column is not selected, even though the SelectedItems field still contains a single entry.
Is this the intended behaviour? And, if so, how can I get the grid to highlight the selected item after sorting?
I'm using Telerik Blazor UI 3.2.0.
1 answer
465 views
I'm using a Grid with GridScrollMode set to Virtual, and a custom filtering function. When the list is filtered and a checkbox is selected the grid reloads and scrolls back to the top of the list. This only happens when Scroll Mode is Virtual. The following example demonstrates the issue.
Steps to recreate
- Load the page
- Enter a single character in the Filter Criteria box
- Scroll down the grid for a page or so
- Check a check box
- You should be immediately taken back to the to first entry in the filtered list
@page "/"
@using Telerik.Blazor.Components;
@using System;
@using System.Text;
@using System.Linq;
<PageTitle>Index</PageTitle>
<div class="row">
<div class="col-md-6 offset-md-6">
<input type="text" class="form-control" placeholder="Filter Criteria..." @bind="Filter" @bind:event="oninput" />
</div>
</div>
<div class="row"> </div>
<div class="row">
<div class="ac-criteria-list">
<TelerikGrid Data=GetFilteredRows()
PageSize="20"
Height="295px" RowHeight="50"
ScrollMode="@Telerik.Blazor.GridScrollMode.Virtual"
>
<GridColumns>
<GridColumn Field="@(nameof(GridRow.Text))">
<Template>
@{
var item = context as GridRow;
<input type="checkbox" id="@item.Id.ToString()" @bind="@item.Selected" @key="@item" />
<label for="@item.Id.ToString()">@item.Text</label>
}
</Template>
</GridColumn>
</GridColumns>
</TelerikGrid>
</div>
</div>
@code
{
public string Filter { get; set; } = string.Empty;
public List<GridRow> FilteredRows { get; set; } = new();
public List<GridRow> OriginalRows { get; set; } = new();
protected override void OnInitialized()
{
for (var i = 0; i < 200; i++)
{
OriginalRows.Add(new GridRow
{
Id = i,
Selected = false,
Text = $"{i} - {Utility.GenerateRandomString(10)}"
});
}
FilteredRows = OriginalRows.OrderBy(x => x.Text).ToList();
base.OnInitialized();
}
private List<GridRow> GetFilteredRows()
{
if (string.IsNullOrWhiteSpace(Filter))
{
return FilteredRows;
}
return FilteredRows.Where(row => row.Text.Contains(Filter)).ToList();
}
public class GridRow
{
public bool Selected { get; set; }
public int Id { get; set; }
public string Text { get; set; }
}
public class Utility
{
private static char[] _chars = new char[36]
{
'0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'
};
public static string GenerateRandomString(int length)
{
StringBuilder stringBuilder = new StringBuilder(length);
Random random = new Random();
for (int i = 0; i < length; i++)
{
stringBuilder.Append(_chars[random.Next(_chars.Length)]);
}
return stringBuilder.ToString();
}
}
}
1 answer
135 views
Implementing OnRead is very intrusive and can very easily lead to bugs now or in the future.
I have a feature that would operate on all visible rows in the Grid (in all pages, not just the current one), and I need to know if a certain item/row is visible or not.
Is this possible, or can it be a future feature?
Thanks.
Marin Bratanov
Telerik team
answered
on
23 Apr 2022
1 answer
112 views
Hi,
at the OnUpload event I call a Javasrcipt to do some stuff before uploading. I generate a random string and set it as classname to the upload element to identify it in Javascript. In Javascript:
var files = $('. + uploaderClass)[0].querySelector('input').files;this works in Firefox but not in Chrome (official version, I installed today).
So I set an pure HTML FileInput below the TelerikUpload like:
<input type="file" id="testFileUpload" />(I choose first in the testFileUpload a file, then in the TelerikUpload which fires my Javascript)
I logged both elements to the browser console:
var telerikUploadElement = $('.' + uploadClass)[0].querySelector('input');
var testInput = document.querySelector('#testFileUpload');
console.log(telerikUploadElement);
console.log(testInput);The console output for the telerikUploadElement:
input
.....
- files: FileList { length:0}
....the console ouptut for the testInput:
input#testFileUpload
....
- files: FileList {0: File, length: 1}
......In Firefox, the console output is the same for both upload elements.
Tested on:
- Windows10
- Telerik.UI.for.Blazor 3.2.0
- .net6.0
- Google Chrome 100.0.4896.127
- Firefox 99.0.1
Marin Bratanov
Telerik team
answered
on
23 Apr 2022
