Hello, i was wondering if it is possible to bind and display data in a column from a List/Array of data like this:

public record Item
{
    public string Name { get; set; }
    public List<int> CostsAtMonths  { get; set; } = new();
    public int[] CostsAtMonths { get; set; }
}

Then have it displayed in in a TreeList with a column for each month of the year, where each column points to an item of the list/place in an array like this:

I am still struggeling with CSS. 

I want to set the Backgroundcolor and the Link/Text-Color of a specific Menu-Component. I know who to style the Menu generally for the whole Application but I need it just for one Page. The Menu-Component has no explicit Style Attribut to set in inline just for the specific object.

This is the way I style the Link-Color but it sets the color for all my Menus...    

.k-menu-link {
        color: red;
}

Any help ?

Hi Everyone,

I am trying to include a component in my TelerikForm which will contain a <FormGroup>, <FormItems> and all the bits for a mailing address.  This has been giving me some grief and I would love some help.  Here's what I have: 

Here's the outside component:

@page "/agencies/new"
@using kpow.interfaces.Services.Agencies
@using kpow.Ui.Components
@inject IAgencies AgencyService

<TelerikForm EditContext="formContext">
    <FormValidation>
        <DataAnnotationsValidator></DataAnnotationsValidator>
        <TelerikValidationSummary />
    </FormValidation>
    <FormItems>
        <FormItem Field="@nameof(Agency.Name)" LabelText="Name" />
        <FormItem Field="@nameof(Agency.AgencyType)" LabelText="Agency Type" />

        <AddressSubForm
            Address="@Agency.Address"
            SetAddress="address => Agency.Address = address"/>
    </FormItems>
</TelerikForm>
@code {
    private Agency Agency { get; } = new() { Address = new Address() };
    EditContext formContext { get; set; }

    protected override void OnInitialized()
    {
        formContext = new EditContext(Agency);
        base.OnInitialized();
    }
}

Here's the AddressSubForm Component:

@inject interfaces.Services.Ports.ICountries CountryService
<FormGroup LabelText="Address">
  <FormItem Field="@nameof(Address.ToLine)" LabelText="ToLine" ></FormItem>
    <FormItem Field="@nameof(Address.Street1)" LabelText="Street"></FormItem>
    <FormItem Field="@nameof(Address.Street2)" LabelText="Street 2"></FormItem>
    <FormItem Field="@nameof(Address.City)" LabelText="City"></FormItem>
    <FormItem Field="@nameof(Address.PostalCode)" LabelText="Postal Code"></FormItem>
@if (ShowRegions == true)
{
    <FormItem Field="@nameof(RegionId)" LabelText="Region">
        <Template>
            <TelerikDropDownList Data="@regions"
                                 TextField="Name"
                                 ValueField="Id"
                                 @bind-Value="RegionId">
            </TelerikDropDownList>
        </Template>
    </FormItem>
}
    <FormItem Field="@nameof(CountryId)" LabelText="Country">
        <Template>
            <TelerikDropDownList Id="cbCountries"
                                 TextField="Name"
                                 ValueField="Id"
                                 Data="@countries"
                                 OnChange="CountryChanged"
                                 @bind-Value="CountryId">
            </TelerikDropDownList>
        </Template>
    </FormItem>
</FormGroup>

@code {
    [Parameter] public Address Address { get; set; } = new Address();
    [Parameter] public Func<Address, Address>? SetAddress { get; set; }

    private IEnumerable<Country>? countries { get; set; }
    private IEnumerable<Region>? regions { get; set; }
    private bool ShowRegions { get; set; } = false;

    private string ToLine { get; set; } = string.Empty;
    private string Street1 { get; set; } = string.Empty;
    private string? Street2 { get; set; } = string.Empty;
    private string City { get; set; } = string.Empty;
    private int? RegionId { get; set; } = null;
    private string PostalCode { get; set; } = string.Empty;
    private int? CountryId { get; set; } = null;

    private async Task CountryChanged(object value)
    {
        CountryId = (int)value; // Ensure CountryId is updated
        Address = SetAddress(Address with { CountryId = (int)value, RegionId = null });

        switch (CountryId)
        {
            case 185: //usa
            case 32:  //canada
                {
                    regions = await CountryService.GetRegions(CountryId.Value);
                    ShowRegions = true;

                    break;
                }
            default:
                {
                    ShowRegions = false;

                    break;
                }
        }

    }

    private void RegionChanged(object value)
    {
        Address = SetAddress(Address with { RegionId = (int)value });
    }

}

When this runs, I can see the rendered labels in the right place for the Address, but the countries drop down is not filled even though the data is present in the OnInitializedAsync when it calls await CountryService.GetAll();   Also, none of the form fields in Address render - only the label.  There is an error in console per field in the Address component that is not using a template: 

I'm looking forward to hearing your ideas!  Thanks!

-scott

Hi, I am using StockChartNavigator, Have 2 questions

1) How to change the area chart background color

2) How to call a function when user change the range selection using handles. I want to change some label values on my component based on date range

Hello. I call the graph api for outlook, getting users' calendar events. I use the calendar view, which get events based on a start and end date range and then that is used to populate the data for Telerik Scheduler.

However, when doing it this way, it will retrieve only the occurrences and not the master event(The symbol for recurring series does not even show up for Scheduler). So when I try to double click on an occurrence from a series, it will not ask if it's for the single occurrence or the series, it will automatically go straight for the edit of the single occurrence. Is there a work around to edit the series without a custom form when getting events by the calendar view call from graph api?

Also, when reading the events from calendar view api call, there is no recurrence rule on the occurrences, but there is a series master id they share.

I have a Grid Popup Edit Form that contains another component. 

The popup has a line across the bottom that seems to be a footer of some sort.  I would like to remove that line but am not able to find a setting to do so.  My fall back would be to use CSS but I was wondering if there is a setting or other way to remove it?

We recently updated to Telerik.UI.for.Blazor 6.0.0 and now none of the forms on our website will submit using the "Enter" key on the keyboard. You must now either click or tab to the button and then hit enter.

This was not an issue with the previous version that we had pulled in.

Is there a fix for this or a new implementation pattern that needs to be used to support this?

I'm creating a drop-down list control that can accept different style sheets to control the font sizes in the control. I have everything working except the drop-down list items. This control could appear on a page more than once, and the controls could be defined with different classes. The styles need to be limited to the scope of the defined CSS.

This is how it looks.

So, the display is working.  HOWEVER, I can't seem to limit the styling of the drop-down.

Here is the example of one of the style:

       <style>

           /* reduce default 14px font-size */

           .k-button.ReportSelectionText08,
           .k-input.ReportSelectionText08,
           .k-input.ReportSelectionText08 .k-input-inner.ReportSelectionText08,
           .k-picker.ReportSelectionText08,
           .k-picker.ReportSelectionText08 .k-input-inner.ReportSelectionText08 {
               font-size: 8px;
           }

               /* reduce default 4px/8px paddings */
               .k-button.ReportSelectionText08,
               .k-picker.ReportSelectionText08 .k-input-inner.ReportSelectionText08,
               .k-input.ReportSelectionText08 .k-input-inner.ReportSelectionText08,
               .k-button.k-input-button.ReportSelectionText08 {
                   padding: 2px 4px;
               }

                   /* remove default 20px min-height */
                   .k-button.k-input-button.ReportSelectionText08 .k-button-icon.ReportSelectionText08 {
                       min-height: initial;
                   }

           /* styles for the dropdown items */
           .k-animation-container .k-list .k-list-item {
               font-size: 8px;
               padding: 2px 4px;
           }

       </style>

The problem is this line:

           /* styles for the dropdown items */
           .k-animation-container .k-list .k-list-item {
               font-size: 8px;
               padding: 2px 4px;
           }

This seems to control every control on the page, all of the drop-down item lists will be font size 8.  

If I try to limit it, like the other example like this :

           /* styles for the dropdown items */
           .k-animation-container.ReportSelectionText08 .k-list.ReportSelectionText08 .k-list-item.ReportSelectionText08 {
               font-size: 8px;
               padding: 2px 4px;
           }

It doesn't work.  How can I limit the formatting of the drop-down items to be non-global?

How to code for such a range slider with area chart (picture link given). Unable to find any code example for such a view of the slider.

Desired View of Range Slider with area chart

Just like the one shown in this full view image (On this Telerik Page)