Telerik Forums
UI for Blazor Forum
1 answer
1.1K+ views

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

 

 

Marin Bratanov
Telerik team
 answered on 08 Jun 2020
14 answers
232 views

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?

 

Marin Bratanov
Telerik team
 answered on 08 Jun 2020
6 answers
1.5K+ views

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();
        }


Marin Bratanov
Telerik team
 answered on 05 Jun 2020
3 answers
161 views

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!

Marin Bratanov
Telerik team
 answered on 05 Jun 2020
4 answers
192 views

Hi,

I'm playing with the Telerik Blazor components. Is there a way to use the scheduler with ics data?

Thanks
Martin

Tinus
Top achievements
Rank 2
 answered on 04 Jun 2020
2 answers
854 views

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


Jesse
Top achievements
Rank 1
 answered on 04 Jun 2020
1 answer
995 views

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">

Marin Bratanov
Telerik team
 answered on 03 Jun 2020
5 answers
480 views

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.




Marin Bratanov
Telerik team
 answered on 02 Jun 2020
6 answers
1.7K+ views

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

 

 

Svetoslav Dimitrov
Telerik team
 answered on 01 Jun 2020
2 answers
2.2K+ views

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);
    }
}
Jason
Top achievements
Rank 1
Veteran
 answered on 28 May 2020
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?