Hello,
I would like to change the color of my tooltip, and also of my buttons, as I understood, the whole UI is set with a single base Theme (Bootstrap or else).
The problem is that the tooltip with bootstrap is blue, and if I add it on a primary button, it's blue on blue and not readable. An attribute letting us to set the Color of a tooltip or a button would be good. I can't but red warning buttons for example.
I tried to set the class of a tooltip with a different background color, but only the rectangle is set not the whole tooltip (see pic).
Thanks in advance
system:windows10 , area:china,
blazor wasm test project,
when put the code in one pageļ¼
<TelerikDateTimePicker Value="System.DateTime.Now">
</TelerikDateTimePicker>
run with info:"An unhandled error has occurred",but some other controls like grid is OK!
is there the Culture setting problem?
I have a grid that when loading the data it is entering two times in ReadISHandler. I can see in debugger that enter and stops two times in LoadIS(); causing a performance problem, any idea what is happening
<TelerikGrid Data=@GridDataIS
TotalCount=@Total
Height=@Height
ScrollMode="@GridScrollMode.Virtual"
Sortable=false
RowHeight="40"
OnRead=@ReadISHandler>
protected async Task ReadISHandler(GridReadEventArgs args)
{
Skip = args.Request.Skip;
await LoadIS();
}
Hey Blazor UI team,
I've hit a block that I cannot get around with documentation on the scheduler component.
Per the attached image, when I edit or create an appointment, the UI shows that the "End" field inputs are disabled. I found they are disabled with a particular css class, so it makes me think that I'm missing some sort of parameter or model field that the component is looking for.
Is there documentation for this situation, and if not, what could be going on here?
Thanks!
Hi,
I'm playing with the Telerik Blazor components. Is there a way to use the scheduler with ics data?
Thanks
Martin
I am currently working on a getting a new Blazor site set up. This site will be using Azure AD for authentication and restricts the entire site to only users logged in.
Right now I am working on getting the Hierarchical Drawer in to the site. I have run in to the following issue, The child content element 'Template' of component 'TelerikDrawer' uses the same parameter name ('context') as enclosing child content element 'Authorized' of component 'AuthorizeView'. Specify the parameter name like: '<Template Context="another_name"> to resolve the ambiguity.
<
Authorized
>
<
div
class
=
"main"
>
<
div
class
=
"top-row px-4"
>
<
a
class
=
"logo"
href
=
"/"
>
<
img
src
=
"img/Logo.png"
/>
</
a
>
<
div
class
=
"user-info"
>
<
LoginDisplay
/>
</
div
>
</
div
>
<
TelerikDrawer
@
ref
=
"@Drawer"
Data
=
"DrawerItems"
MiniMode
=
"@true"
Mode
=
"@DrawerMode.Push"
TItem
=
"DrawerItem"
SelectedItemChanged
=
"@OnItemSelect"
@
bind-Expanded
=
"@Expanded"
>
<
Template
>
<
div
class
=
"k-drawer-items"
role
=
"menubar"
aria-orientation
=
"vertical"
>
<
ul
>
@foreach (var item in context)
{
var selectedClass = item == SelectedItem ? "k-state-selected" : string.Empty;
<
li
@onclick="@(() => OnItemSelect(item))" class="k-drawer-item @selectedClass">
<
div
class
=
"k-level-@(item.Level)"
>
<
TelerikIcon
Icon
=
"@item.Icon"
></
TelerikIcon
>
<
span
class
=
"k-item-text"
>@item.Text</
span
>
</
div
>
@if (item.Expanded && (item.Children?.Any() ?? false))
{
<
span
class
=
"k-icon k-i-arrow-chevron-down"
style
=
"position:absolute; right:0; line-height: inherit; margin: 0 8px"
></
span
>
}
else if (!item.Expanded && (item.Children?.Any() ?? false))
{
<
span
class
=
"k-icon k-i-arrow-chevron-right"
style
=
"position:absolute; right:0; line-height: inherit; margin: 0 8px"
></
span
>
}
</
li
>
}
</
ul
>
</
div
>
</
Template
>
<
Content
>
<
div
class
=
"content px-4"
>
@Body
</
div
>
</
Content
>
</
TelerikDrawer
>
</
div
>
</
Authorized
>
I have tried the following:
<
Authorized
Context
=
"AuthContext"
>
<
div
class
=
"main"
>
<
div
class
=
"top-row px-4"
>
<
a
class
=
"logo"
href
=
"/"
>
<
img
src
=
"img/Logo.png"
/>
</
a
>
<
div
class
=
"user-info"
>
<
LoginDisplay
/>
</
div
>
</
div
>
<
TelerikDrawer
@
ref
=
"@Drawer"
Data
=
"DrawerItems"
MiniMode
=
"@true"
Mode
=
"@DrawerMode.Push"
TItem
=
"DrawerItem"
SelectedItemChanged
=
"@OnItemSelect"
@
bind-Expanded
=
"@Expanded"
>
<
Template
>
<
div
class
=
"k-drawer-items"
role
=
"menubar"
aria-orientation
=
"vertical"
>
<
ul
>
@foreach (var item in context)
{
var selectedClass = item == SelectedItem ? "k-state-selected" : string.Empty;
<
li
@onclick="@(() => OnItemSelect(item))" class="k-drawer-item @selectedClass">
<
div
class
=
"k-level-@(item.Level)"
>
<
TelerikIcon
Icon
=
"@item.Icon"
></
TelerikIcon
>
<
span
class
=
"k-item-text"
>@item.Text</
span
>
</
div
>
@if (item.Expanded && (item.Children?.Any() ?? false))
{
<
span
class
=
"k-icon k-i-arrow-chevron-down"
style
=
"position:absolute; right:0; line-height: inherit; margin: 0 8px"
></
span
>
}
else if (!item.Expanded && (item.Children?.Any() ?? false))
{
<
span
class
=
"k-icon k-i-arrow-chevron-right"
style
=
"position:absolute; right:0; line-height: inherit; margin: 0 8px"
></
span
>
}
</
li
>
}
</
ul
>
</
div
>
</
Template
>
<
Content
>
<
div
class
=
"content px-4"
>
@Body
</
div
>
</
Content
>
</
TelerikDrawer
>
</
div
>
</
Authorized
>
But then get the following error:
NullReferenceException: Object reference not
set
to an instance of an
object
.
In debugging, I found that this error was at the following line of code:
@foreach (var item in context)
and the context is null.
If anyone has any insight in to have a Hierarchical Drawer on a Authorized page?
Thank you for taking a look,
Jesse
Hi..
What is wrong? When the value changes I need to set values to other textboxes. What is wrong with my 'tags'?
When I set @bind-value , I get error that I can't have 2 change events.
I also need to bind to FoodType property.
thx again!
Telerik.Blazor.Components.TelerikDropDownList`2[CKonboard.Data.Models.EventFoodType,System.String] requires a value for the 'ValueExpression' ValueExpression is provided automatically when using 'bind-Value'.
at Telerik.Blazor.Components.Common.TelerikSelectBase`2.OnInitializedAsync()
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
at Telerik.Blazor.Components.Common.TelerikSelectBase`2.SetParametersAsync(ParameterView parameters)
<TelerikDropDownList Id="FoodType"
ValueChanged="@((string c) => EventSelected(c))"
Value="@Service.FoodType"
Data="@Lookups.EventFoodTypes()"
TextField="EvtType"
DefaultText="-Select First Event Food Type"
ValueField="EvtType"
PopupWidth="200px"
Width="200px"
PopupHeight="130PX"
Class="ddl-no-bg">
I test the TreeView control,using the style:
.sidebar {
position: fixed;
top: 40px;
left: 0;
bottom: 0;
width: 240px;
overflow-y: auto;
border-right: 1px solid #e4e6e9;
background-color:mediumaquamarine;
padding:0px 0px 0px 0px;
}
in MainLayout.razor:
<body>
<div class="header">
<a href="http://blazor.net">About</a>
</div>
<div class="sidebar">
<NavMenu/>
</div>
<div class="content">
@Body
</div>
</body>
and in NavMenu.razor:
@inject NavigateTreesService NavigateTrees
<TelerikTreeView Data="@NavigateTrees.TreeData">
<TreeViewBindings>
<TreeViewBinding ParentIdField="ParentIdValue" IconField="Icon"
UrlField="Page">
</TreeViewBinding>
</TreeViewBindings>
</TelerikTreeView>
Then run,look this picture attachment,There's always a spare part on the left.
and I found the treeview control's properties is too few,i can't set the sytle.
I'm working through this example, although slightly changed a bit, but I am getting a http 400.
I am trying to upload a json file. The api path looks right when I debug but the request never makes it to the controller, however, I dont think its a routing issue as I would get a 404 error instead?
https://docs.telerik.com/blazor-ui/components/upload/overview
Good afternoon,
I am relatively new developer. I am working the the Telerik Grid and it is fantastic! The sorting and searching and editing I love it!
I have made my own custom command button that when clicked pops a modal dialog that displays a pdf. The link to display this pdf is stored in the database. All of this works great!
Now I would like to only display a button or enable this button if this field has something in it.
I am not picky about how its done either. I have tried to bind the enable event to a Has_Link boolean field...I have tried a bunch of stuff.
I realize this probably has more to do with my lack of knowledge than it does the control itself. If someone could point me in the right direction, I would be grateful!
Here is my code below.
<
AuthorizeView
>
<
Authorized
>
<
h3
>Search Permit</
h3
>
@if (Permits == null)
{
<
p
><
em
>Loading...</
em
></
p
>
}
else
{
<
TelerikGrid
Data=@Permits
EditMode
=
"@GridEditMode.Incell"
@
ref
=
"Grid"
Sortable
=
"true"
FilterMode
=
"GridFilterMode.FilterMenu"
Class
=
"table-striped"
Height
=
"750px"
Pageable
=
"true"
PageSize=@PageSize
OnUpdate=@UpdateItem OnDelete=@DeleteItem>
<
GridToolBar
>
<
br
/>
</
GridToolBar
>
<
GridColumns
>
<
GridColumn
Field=@nameof(Permit.Permit_NO)
Title
=
"Permit Number"
/>
<
GridColumn
Field=@nameof(Permit.Parcel) />
<
GridColumn
Field=@nameof(Permit.PD_Owner)
Title
=
"Owner Name"
/>
<
GridColumn
Field=@nameof(Permit.Submission_Date)
Title
=
"Submit Date"
/>
<
GridColumn
Field=@nameof(Permit.Permit_Issue_Date)
Title
=
"Issue Date"
/>
<
GridColumn
Field=@nameof(Permit.Permit_Type)
Title
=
"Permit Type"
/>
<
GridColumn
Field=@nameof(Permit.Estimated_Cost)
Title
=
"Cost"
/>
<
GridColumn
Field=@nameof(Permit.Fee)
Title
=
"Cost"
/>
<
GridColumn
Field=@nameof(Permit.Note) />
<
GridColumn
Field=@nameof(Permit.Image_Link) />
<
GridColumn
Field=@nameof(Permit.Has_Link) />
<
GridCommandColumn
>
<
GridCommandButton
Command
=
"Delete"
Icon
=
"delete"
>Delete</
GridCommandButton
>
<
GridCommandButton
Command
=
"Save"
Icon
=
"save"
ShowInEdit
=
"true"
>Save</
GridCommandButton
>
<
GridCommandButton
Enabled
=
"ShowImageIsEnabled"
OnClick
=
"Show_Image"
Icon
=
"information"
>Show Permit</
GridCommandButton
>
</
GridCommandColumn
>
</
GridColumns
>
</
TelerikGrid
>
}
</
Authorized
>
<
NotAuthorized
>
<
h1
>Access Denied!</
h1
>
</
NotAuthorized
>
</
AuthorizeView
>
@code {
private List<
PermitModel
> Permits = new List<
PermitModel
>();
private PermitModel Permit = new PermitModel();
public TelerikGrid<
PermitModel
> Grid { get; set; }
public bool ShowImageIsEnabled { get; set; } = true;
int PageSize = 15;
protected override async Task OnInitializedAsync()
{
Permits = await _db.GetPermitData();
await SetGridSort();
}
private void DeleteItem(GridCommandEventArgs args)
{
var argsItem = args.Item as PermitModel;
Permits.Remove(argsItem);
_db.DeletePermit(argsItem);
}
private void UpdateItem(GridCommandEventArgs args)
{
var argsItem = args.Item as PermitModel;
var index = Permits.FindIndex(i => i.Record_ID == argsItem.Record_ID);
if (index != -1)
{
Permits[index] = argsItem;
}
_db.DeletePermit(argsItem);
_db.InsertPermit(argsItem);
}
async Task SetGridSort()
{
GridState<
PermitModel
> desiredState = new GridState<
PermitModel
>()
{
SortDescriptors = new List<
SortDescriptor
>()
{
new SortDescriptor { Member = "Permit_NO", SortDirection = ListSortDirection.Descending }
}
};
await Grid.SetState(desiredState);
}
void Show_Image(GridCommandEventArgs args)
{
var argsItem = args.Item as PermitModel;
var parameters = new ModalParameters();
parameters.Add(nameof(ImageModal.image), argsItem.Image_Link);
Modal.Show<
ImageModal
>(argsItem.Permit_NO, parameters);
}
}