Telerik Forums
UI for Blazor Forum
1 answer
127 views

Hi, 

I couldn't find any articles about customizing Telerik components with additional properties,
but want to add my own property directly to a Telerik component, like this:
<TelerikWindow MyOwnProperty="SomeValue" />

I would like to avoid creating a custom wrapper component where I would use the Telerik component inside.
Is there any way to achieve this directly with Telerik components without having to wrap them?

Huge thanks for your response,
Bohdan

 
Tsvetomir
Telerik team
 answered on 18 Dec 2024
1 answer
46 views

I want to have a MultiSelect experience for a field in a ListView editor. I'd like the binding to work with the model's navigation collection instead of an ancillary Id collection.

Take the following example where we have a ListView of Appointments. An Appointment has a collection of Contacts called Attendees that we want to manage on Create and Edit with a MultiSelect.

TelerikMultiSelect doesn't like a bind-value with a collection of objects - it wants Ids. One way to solve this could be to do gymnastics with an extra AttendeeIds collection on the Appointment and synchronize that collection with the navigation entities on read/create/update. Is there a way to avoid the gymnastics and solve this case more directly? 

Can you provide an example? Thanks.


<TelerikListView TItem="Appointment"...>
...
<EditTemplate> <TelerikMultiSelect Data="@Contacts" Placeholder="Select attendees" AutoClose="false" @bind-Value="@context.Attendees" <-this does not work TextField="@nameof(Contact.Name)" ValueField="@nameof(Contact.Id)" DebounceDelay="0" /> </EditTemplate>
...
</TelerikListView> List<Contact> Contacts {get; set;} =[]; //loaded in oninitializeasync public class Appointment { public Guid Id {get; set;} public List<Contact> Attendees {get; set;} } public class Contact { public Guid Id {get; set;} public string Name {get; set;} }
...

Hristian Stefanov
Telerik team
 answered on 18 Dec 2024
0 answers
91 views

I'm receiving the following error when I tab from the last row in group to the next group.

Unhandled exception rendering component: No parameterless constructor defined for type 'Telerik.Blazor.Components.Grid.Grouping.GridGroup'.
System.MissingMethodException: No parameterless constructor defined for type 'Telerik.Blazor.Components.Grid.Grouping.GridGroup'.

Here is my grid.

 <TelerikGrid @ref="@TheGrid" Data="Mappings"
              Groupable="true"
              OnStateInit="@((GridStateEventArgs<object> args) => OnStateInitHandler(args))"
              OnRead="@ReadHandler"
              OnUpdate="@UpdateHandler"
              EditMode="@GridEditMode.Incell"
              Pageable="true"
              PageSize="15" RowHeight="32"
              Navigable="true" Sortable="true">
     <GridToolBarTemplate>
         <GridSearchBox Width="200px"></GridSearchBox>
         <span class="k-toolbar-spacer"></span>
         <GridCommandButton Command="ExcelExport" Icon="@SvgIcon.FileExcel">Export to Excel</GridCommandButton>
         <GridCommandButton Command="CsvExport" Icon="@SvgIcon.FileCsv">Export to CSV</GridCommandButton>
     </GridToolBarTemplate>
     <GridColumns>
         <GridColumn Field="@nameof(SiteMappingDto.SiteName)" FieldType="@typeof(string)" Title="Site" Editable="false" />
         <GridColumn Field="@nameof(SiteMappingDto.SiteReference)" FieldType="@typeof(string)" Title="Reference" Editable="false" />
         <GridColumn Field="@nameof(SiteMappingDto.TagName)" FieldType="@typeof(string)" Title="Tag" Editable="false" />
         <GridColumn Field="@nameof(SiteMappingDto.TagDescription)" FieldType="@typeof(string)" Title="Description" Editable="false" />
         <GridColumn Field="@nameof(SiteMappingDto.MappingValue)" FieldType="@typeof(string)" Title="Value" Editable="true" />
     </GridColumns>
 </TelerikGrid>

And the dto used:
 public class SiteMappingDto
 {
     public SiteMappingDto()
     {
     
     }

     public int Id { get; set; }
     public string? SiteName { get; set; }
     public string? SiteReference { get; set; }
     public string? TagName { get; set; }
     public string? TagDescription { get; set; }
     public int TagOrder { get; set; }
     public string? MappingValue { get; set; }
 }

 

 

Robert
Top achievements
Rank 1
Iron
 asked on 18 Dec 2024
0 answers
149 views

Hi, here's the scenario.

The time picker defaults to 0:00:00 <TimeOnly>:

 <TelerikTimePicker ID="txtPlayStart"
 @bind-Value="Value.playStart"
 Format="H:mm:ss"
 T="TimeOnly"
 ShowClearButton="true"/>

the user enters a time, saves it, all is well.

He realizes later he entered a bad time and wants to clear it.

He clicks the clear button, and saves it.

Imagine his surprise when nothing changes?

clear doesn't set it back to the default of 0:00:00?  there's a visual cue for the user (control is in red), but forcing them to enter 0:00:00 is not really appropriate?

Furthermore, if I catch the OnChange event, it fires when the user clicks the clear button, and it says the time is what it was before the user clicked clear. :/

I'm using the 7.1.0 that just came out yesterday.

I'm coming to realize that many of the Telerik Blazor components are pretty "bare bone" and some some sort of developer wrapper is required to make them user friendly.  (Except for "big" ones like the grid.)  Is that intentional?

I'm not seeing a way around this short of using the code and building my own custom version that I then have to keep up to date with every new release?

Thanks,

Charles

Charles
Top achievements
Rank 1
Iron
Iron
Iron
 asked on 17 Dec 2024
0 answers
81 views

I'm working from this demo to use NoDataTemplate with a TelerikChart. The demo works for me in the link but locally, the NoDataTemplate is always visible regardless of whether there's data in the chart. I copied the files from that demo to a test project and still can't get the NoDataTemplate to disappear.

I have the test project here and the chart is in the Test.razor page.

Kyle
Top achievements
Rank 2
Iron
Iron
 asked on 17 Dec 2024
1 answer
55 views

I want to show a series of pie charts but with the series labels on top of each section like so:

I haven't found anything that suggests the labels can be anywhere except attached by lines. Is this possible?

Hristian Stefanov
Telerik team
 answered on 17 Dec 2024
1 answer
316 views

Hi, sorry if this is a basic question, but I cannot for the life of me figure out how to get this to work. I can have a DropDown list and a form separately, but when I try to put the DropDown into the form itself, I get a "Object of type 'Telerik.Blazor.Components.FormItem' does not have a property matching the name 'ChildContent'" error.

Here's a sample snippet of what I'm trying to do:



 <TelerikForm Model="@Input"
             Columns="3"
             ColumnSpacing="50px"
             OnValidSubmit="@HandleValidSubmit"
             OnInvalidSubmit="@HandleInvalidSubmit">
    <FormValidation>
        <DataAnnotationsValidator />
    </FormValidation>
    <FormItems>

<FormItem Field="@nameof(Model.Attribute)"></FormItem>
<FormItem Field="@nameof(Model.Attribute2)">
    <TelerikDropDownList Data="@myDdlData"
                         TextField="MyTextField"
                         ValueField="MyValueField"
                         @bind-Value="Model.Attribute3">
    </TelerikDropDownList>
</FormItem>
<FormItem Field="@nameof(Model.Attribute4)"></FormItem>

            </FormItems>
        </TelerikForm>
Sorry for the bad indentation, not sure how else to paste it properly.
Jeff
Top achievements
Rank 1
Iron
 answered on 16 Dec 2024
0 answers
36 views
Hi all, I would like to implement an autocomplete with server side search but I'm having problems.If I don't insert it in a telerik form, it works (leaving aside small visual and selection bugs).This is the code:

<TelerikAutoComplete Data="@VeicoloAutoCompleteData"
                     Value="@VeicoloAutoCompleteValue"
                     ValueChanged="@( (string newValue) => OnVeicoloAutoCompleteValueChanged(newValue) )"
                     OnChange="@OnChangeVeicoloAutoComplete"
                     ValueField="@( nameof(DropDownModel.Text) )"
                     MinLength="3"
                     DebounceDelay="150">
    <ItemTemplate>
        <strong>@context.Text</strong>
    </ItemTemplate>
</TelerikAutoComplete>

What I want to achieve is that after inserting 3 characters, the call to the server starts and returns the values ​​that contain the inserted text

private List<DropDownModel> VeicoloAutoCompleteData { get; set; } = new();

    private string VeicoloAutoCompleteValue { get; set; }

    private async Task OnVeicoloAutoCompleteValueChanged(string newValue)
    {
        if (newValue.Length < 3)
        {
            VeicoloAutoCompleteValue = newValue;
            return;
        }
        var request = new DataSourceRequest()
        {
            Skip = 0,
            Filters = new List<IFilterDescriptor>(),
            Sorts = new List<SortDescriptor>(),
            Aggregates = new List<AggregateDescriptor>(),
            Groups = new List<GroupDescriptor>()
        };
        request.Page = 1;
        request.PageSize = 10;
        var fs1 = new FilterDescriptorCollection();
        fs1.Add(new FilterDescriptor("Targa", FilterOperator.Contains, newValue));
        request.Filters = new List<IFilterDescriptor>()
        {
            new CompositeFilterDescriptor()
            {
                FilterDescriptors = fs1,
                LogicalOperator = FilterCompositionLogicalOperator.Or,
            }
        };

        var veicoli = await _veicoloService.GetAll(request);
        VeicoloAutoCompleteValue = newValue;
        VeicoloAutoCompleteData = veicoli.ToDropDownModel();
    }

    private DropDownModel? userChoiceVeicolo;
    private async void OnChangeVeicoloAutoComplete(object theUserChoice)
    {
        if (userChoiceVeicolo is not null && userChoiceVeicolo.Text.Equals((string)theUserChoice, StringComparison.InvariantCultureIgnoreCase))
        {
            return;
        }
        var choice = VeicoloAutoCompleteData.FirstOrDefault(x => x.Text.Equals((string)theUserChoice, StringComparison.InvariantCultureIgnoreCase));
        userChoiceVeicolo = choice;
        if(userChoiceVeicolo is not null)
            _veicolo = await _veicoloService.GetById(userChoiceVeicolo.Value);
    }

Is this code correct? I read that there are bugs on the double activation of the onchange and I found this solution, which is a bit buggy anyway.

If I insert this input in a form tag instead I can't make it work because it asks me for a valueExpression. But I don't know what to put.

Basically I would like to save either the choice in a separate variable (as above but inside a form)
Or save the choice in a subobject of the model I'm working on.

How should I do it?
Thanks for the help
Lorenzo
Top achievements
Rank 1
 asked on 16 Dec 2024
1 answer
64 views

I'm trying to figure out how to autofit a column in a nested grid.

In the Detail Template of a grid (Grid A), there is a another grid (Grid B). This nested grid (Grid B) has a column that shows the selections from a MultiSelect component. This could be a single value or multiple values. I know that there are methods that resize a column based on the column id or resize multiple columns, but these methods require a grid object reference. Since this nested grid (Grid B) is templated and therefore has multiple instances, I can't directly get a reference to it.

Also, it seems that all the relevant Grid event handlers only have arguments return references to the data bound to the grid, but not a reference to the grid object.

Is there a way to get a reference to a specific grid instance in a Detail Template or is there another way to auto size a specific column in a nested grid?

Thanks

Dimo
Telerik team
 answered on 13 Dec 2024
1 answer
112 views
I am looking into the feasibility of migrating an old WinForms application that uses the Telerik WinForms Grid control to web.
The Blazor Grid Control seems to have all the functionality I need.

The application uses (typed) DataSets as data sources (on a SQL database we don't want to change), but there is a substantial amount of logic coded into the screens itself which will have to be duplicated to the web pages (or extracted and placed in business components).

The goal is to make it work first - make it pretty later. I want to do a Pilot where I migrate a couple of (complex) WinForm screens (of the application) into a Web version using as much of the old code as possible. One of the obvious problems is state management of the user interaction on a screen. I should also say that I do have some experience with web technology, I am quite new to Blazor (although the experiments I did so far seems to point into the direction that the basic stuff is not complicated to get to work).

Any tips, hints or suggestions would be very welcome. Have you experience doing this type of thing? Let me know how you did it and what problems you had to solve. Thanks!
Dimo
Telerik team
 answered on 13 Dec 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Iron
Iron
Andrey
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Iron
Iron
Andrey
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?