Our team has Devcraft UI now and Im pulling in the Blazor components, adding the requirements to a small existing project, where we are changing direction to use Blazor.
Seems like I was confused about the same thing when I was going through the initial steps using the Kendo UI angular components.
Anyway, on the "getting started" section
https://docs.telerik.com/blazor-ui/getting-started/server-blazor
Once I had the private Nuget feed setup, I started making the updates to the various project files.
That's when it wasn't exactly clear on these sections. Maybe use these notes to update this section to help others?
Im starting from new Blazor server app that I had created previously, and was integrating it within my solution.
In this "getting started" section, if one is creating a new project from ground zero, are the telerik components and settings somehow added to a new project via the project template? In other words, the docs make it appear that after you create a new project, you're done and ready to start using telerik components on a new page.
So then, in the section under "add to existing project"
(3) HTML
It wasn't clear what the names of the other themes were. Putting a link here or just listing the bootstrap and material theme names might help.
Also wasn't clear if one was to replace any existing css being used, eg. The bootstrap css file.
(4) HTML
Again, should one add this new script reference or replace the default?
So for ~/Pages/_Host.cshtml the end result is to be
this:
<script src="_content/telerik.ui.for.blazor/js/telerik-blazor.js" defer></script>
or this:
<script src="_framework/blazor.server.js"></script>
<script src="_content/telerik.ui.for.blazor/js/telerik-blazor.js" defer></script>
(5), (6) & (7) were straightforward
On a side-note, maybe it was just me, in the docs, it is after all saying to add these pieces, not to replace anything already there in an existing Blazor project.
The Grid Selection demo code is missing the @bind-SelectedItems attribute. The demo is on this page: https://demos.telerik.com/blazor-ui/grid/selection. The TelerikGrid element should contain the attribute:
@bind-SelectedItems="SelectedItems"
Hi,
When I hit the add button on a grid, I notice that the focus does not go to the first cell of the newly added row for editing.
This is kind of annoying. How can I force this?
Thanks … Ed
<TelerikGrid Data=@GridData
Pageable="true" Groupable="true" Sortable="true"
OnUpdate="@UpdateHandler" OnCreate="@CreateHandler" OnEdit="@EditHandler">
<GridColumns>
<GridColumn Field="Name" />
<GridColumn Field="IsActive" Title="Is Active">
</GridColumn>
<GridCommandColumn Width="300px">
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
<GridToolBar>
<GridCommandButton Command="Add" Icon="add">Create Role</GridCommandButton>
</GridToolBar>
</TelerikGrid>
Anxious to get started with Blazor components, especially the grid. I was browsing the various demos and noticed some didnt seem to respond in Firefox. Opened them in Chorme and they worked.
The grid however works fine in Firefox 69.0.2 (64-bit), Windows 10
examples:
(1) Menu. Items wont drop down
https://demos.telerik.com/blazor-ui/menu/overview
(2) Dropdown list. Items wont drop down
https://demos.telerik.com/blazor-ui/dropdownlist/overview
There may be others, but both of the above worked ok in Chrome
Have a need that might be able to handle it with a Treeview. Need to allow a user to edit a few nodes of a json file, then save the changes.
Found this javascript-based example of editing json in the browser. Probably more features than I need.
https://github.com/josdejong/jsoneditor
If nothing else, I think with the Blazor Treeview as-is, could I use the following approach?
- Load json data into the tree structure
- Place a single input field somewhere near the tree (eg. at the top)
- Use a template of some sort that includes an "onclick" event
- The onclick event loads the item text or value into the input field for editing
- Provide a "save changes" button that takes current values of the data in the tree, serializes back to json and saves over the top of the file.
Sound reasonable?
Hi,
We use the Kendo Calendar for a page on an internal site that i'm trying to update with Blazor.
The Kendo Calendar highlights multiple date that someone has booked, they can double-click to add/remove dates.
I don't seem to be able to accomplish this with the Blazor Calendar, I can pre-load existing dates fine, but if I select a new date the pre-loaded dates vanish. Do I need to reload dates on each click?
Also, will we get a double-click handler in the future?
<
TelerikCalendar
Date
=
"@startDate"
Min
=
"@min"
View
=
"CalendarView.Month"
SelectionMode
=
"@CalendarSelectionMode.Multiple"
SelectedDates
=
"@selectedDates"
ValueChanged
=
"@CalendarChangeHandler"
@
ref
=
"calendar"
>
</
TelerikCalendar
>
@code {
DateTime startDate = DateTime.Today;
DateTime min = DateTime.Today.AddDays(1);
private
List<DateTime> selectedDates {
get
;
set
; }
private
Telerik.Blazor.Components.TelerikCalendar calendar;
protected
override
async Task OnInitializedAsync()
{
selectedDates = _timeOffFactory.GetDates();
}
private
void
CalendarChangeHandler(DateTime newDate)
{
selectedDates.Add(newDate);
}
}
There are various "blocking ui" solutions and examples on the inter-web that allow you to block part or all of the UI while some longer-than-normal process takes place. Eg. a user clicks a button that has to load and process some data.
One example done with Angular is this
https://embed.plnkr.co/plunk/bNfRvD
How can we implement something similar with Blazor AND not resort to javascript interop?