Unplanned
Last Updated: 07 Jun 2024 08:14 by ADMIN

Material 3: 

Request for Telerik UI for Blazor toolkit and Figma UI Toolkit to support Material Design 3 (versus 2) guidelines published late October 2021. Competitors are supporting it.

Website is https://m3.material.io/

Unplanned
Last Updated: 23 May 2024 10:17 by ADMIN

Kendo SASS themes allow the definition of a variety of colors for grid rows that are applied in different situations:

  • $grid-alt-bg defines the color of alternate rows
  • $grid-selected-bg defines the color of selected rows
  • $grid-selected-alt-bg defines the color of selected alternate rows

However, at least in @progress/kendo-theme-classic (v. 5.4.1), $grid-selected-alt-bg is only applied for locked columns. You can check that by doing a string-search for "$grid-selected-alt-bg" in dist/all.scss. I have not checked if the same happens when using other themes.

Unplanned
Last Updated: 18 Mar 2024 14:11 by Navya
Created by: Navya
Comments: 0
Type: Feature Request
2

Hi, Team!

Currently, the Kendo Material theme is compliant with Material Design 2. I would like to request compliance with Material Design 3. 

Unplanned
Last Updated: 06 Feb 2024 08:19 by Jeremy

I would like to request that Telerik host all of the required nuget packages for Telerik.ui.for.Blazor on Telerik's nuget server.

Currently, all of the packages are there except for Telerik.FontIcons and Telerik.SvgIcons which are hosted on nuget.org instead. This is inconvenient when using Package Source mapping, where ideally all Telerik.* packages can be sourced direct from Telerik.

Unplanned
Last Updated: 05 Feb 2024 14:35 by ADMIN

The Kendo-UI "Classic" SASS theme supports the $kendo-calendar-cell-border variable. However, its value is never applied. This also means that variables like $kendo-calendar-cell-selected-border etc. do not have any effect, because they only set the border-color, but not the border itself.

Kendo Theme Version 7.0.2

Unplanned
Last Updated: 02 Feb 2024 08:34 by ADMIN

The Kendo-UI SASS themes support setting the amount of spacing between items using the $kendo-pager-item-spacing variable. However, no spacing is added between the next/previous buttons and the "number" section.

Also, spacing does not work properly if the "select" element is disabled and therefore not displayed.

Kendo Theme Version: 7.0.2

Unplanned
Last Updated: 12 Jun 2023 09:21 by ADMIN

See here:

https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss#LL804C1-L804C24

$input-btn-border-width is now a custom variable.

(see bootstrap 5.2 version: https://github.com/twbs/bootstrap/blob/v5.2.3/scss/_variables.scss#L738 where $input-btn-border-width was a simple scss variable)

The main problem is that on file:

@progress\kendo-theme-bootstrap\scss\input\_variables.scss you are using:

$kendo-input-border-width: $input-border-width !default;
$kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;

so scss compilation gives me an error:

SassError: Undefined operation "var(--bs-border-width) * 2".
   ╷
10 │ $kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;

My temporary fix is to define, before importing _variables file:

$kendo-input-border-width: 1px !default;

Basically, the main problem is that package @progress/kendo-theme-bootstrap 6.4.0 with bootstrap 5.3 doesn't work anymore.

Thanks.

Diego

Unplanned
Last Updated: 19 Apr 2023 16:34 by ADMIN
Created by: David
Comments: 0
Type: Feature Request
4
As per this forum post you have stopped distributing minified theme css files as of R1 2023 SP1 (v 2023.1.314). It would be good if you could continue to provide minified theme css files to minimise impact on page rendering times.
Unplanned
Last Updated: 16 Mar 2023 10:47 by Michael
Created by: Michael
Comments: 0
Type: Feature Request
0
Please include the theme version number in the CSS file. This will make maintenance during product version changes a lot easier.
Unplanned
Last Updated: 03 Nov 2022 08:43 by B
The Splitter splitbar and the resize handle rely only on a background color, which is lost in high contrast mode.

To reproduce, enable High Contrast mode in the OS and then go to any Splitter demo.
Unplanned
Last Updated: 31 Aug 2022 15:25 by ADMIN
Scheduled for 2022.R2.SP1

Bug report

On screens with smaller sizes not all tools in the Spreadsheet Toolbar are visible. The tools overlap the overflow button and thus cannot be selected.

Reproduction of the problem

  1. Run the following demo and reduce the window width

Current behavior

On wider screens all tools are visible:
image
On narrower screens only some tools are visible and the overflow button is overlapped:
image
or completely hidden:
image

Expected/desired behavior

The overflow button should be visible so all Spreadsheet tools are accessible.

Environment

  • Kendo UI version: 2020.3.118
  • Browser: [all]
Unplanned
Last Updated: 31 Aug 2022 09:31 by Rami
Created by: Rami
Comments: 2
Type: Bug Report
1

In some cases the text for the selected items does not display properly. Some letters, for example g, get their bottom cut off. This behaviour can be observed on for.ex. the Telerik page https://docs.telerik.com/blazor-ui/components/multiselect/overview The picture below was taken on the latest Edge browser, 1080p screen, 100% zoom level. Funnily enough, changing the zoom level either way makes the text fit in the selected items.

How can I increase the space for the text in the selected items so it's less likely to be cut off?

Unplanned
Last Updated: 17 Jun 2022 12:12 by Don Leduc
Created by: Don Leduc
Comments: 0
Type: Feature Request
1
Introduce more Web Font Icons
Unplanned
Last Updated: 30 Mar 2022 08:07 by ADMIN
Scheduled for 2022.2

Ellipsis missing on month view

---

ADMIN EDIT

The Ellipsis icon is invisible in Material and Default, partially hidden in Bootstrap. The Show More button is invisible in Material. You can see the issues in the following demo: https://demos.telerik.com/blazor-ui/scheduler/month-view

Here is a workaround to make the Ellipsis icon visible which indicates a button in Material too:

 

<style>
    button.k-more-events > .k-icon.k-i-more-horizontal {
        top: initial;
        bottom: 0;
        transform: translate(-50%);
    }
</style>

 

 

Unplanned
Last Updated: 25 Jan 2022 16:34 by ADMIN
Scheduled for 2022.2

In version 2.27 of Telerik UI for Blazor the following problematic behavior is observed with long labels in the Grid PopUp edit form:

  • If no space is included, they are cut from the form
  • If space is included, they are wrapped and not cut but are not matching the alignment of the other labels

Unplanned
Last Updated: 19 Jan 2022 11:56 by ADMIN
Scheduled for 2022.1

Hello,

I prepared a demo https://dojo.telerik.com/EYeYUSUw/6

Also applies to the latest default sass theme but probably to many more.

As you can see, the master grid its 'content row' hover effect is being applied to even the header of the detail grid and there is no way to resolve that unwanted effect apart from adding more styling tedious rules. 

The resolution is so simple:

.k-grid tbody tr:hover, .k-grid tbody tr.k-state-hover {
    background-color: #e6e6ea;
}


Should be

.k-grid tbody > tr:hover, .k-grid tbody > tr.k-state-hover {
    background-color: #e6e6ea;
}

 

I did not search for the source files/lines what might need to change - easy to find in your current version.

There could be many more of these simple improvements which would save many hours on ours side!

Regards,
Jan

 

Unplanned
Last Updated: 19 Jan 2022 09:09 by ADMIN
Scheduled for 2022.2
Created by: Marc Simkin
Comments: 0
Type: Bug Report
5

If I place the DateRangePicker inside a TelerikForm, the start and end input fields are stacked vertically.

If I were to place the control just inside a div, they are arranged horizontally.

How can I get the control to arrange itself horizontally when inside a form?

---

ADMIN EDIT

Here is a reproducible that begins with a short CSS workaround (remove the style to see the issue):

<style>
    .k-form .k-daterangepicker-wrap .k-floating-label-container {
        display: inline-block;
        width: auto;
    }
</style>



<div class="demo-section k-form k-form-vertical">
    <div class="k-form-field">
        <label for="outbound-date" class="k-label k-form-label">Travel Date</label>
        <div class="k-form-field-wrap">
            <TelerikDateRangePicker @bind-StartValue="@StartValue"
                                    @bind-EndValue="@EndValue"
                                    StartId="outbound-date">
            </TelerikDateRangePicker>
        </div>
    </div>
    <div class="k-form-field">
        <p>The selected travel date is: <strong>@StartValue.Value.ToLongDateString()</strong> and <strong>@EndValue.Value.ToLongDateString()</strong></p>
    </div>
</div>

<div class="demo-section">
    <h4><label for="outbound-date">Book your flight tickets</label></h4>

    <TelerikDateRangePicker @bind-StartValue="@StartValue"
                            @bind-EndValue="@EndValue"
                            StartId="outbound-date">
    </TelerikDateRangePicker>

    <div class="mt-lg">
        <h6 class="kd-demo-heading mt-sm">Selected Dates</h6>
        <div><strong>Departure: </strong> @StartValue?.ToString("dd MMM yyyy")</div>
        <div><strong>Return: </strong> @EndValue?.ToString("dd MMM yyyy")</div>
    </div>
</div>

@code {
    public DateTime? StartValue { get; set; } = new DateTime(2020, 4, 3);
    public DateTime? EndValue { get; set; } = new DateTime(2020, 4, 10);
}

---

Unplanned
Last Updated: 19 Jan 2022 09:04 by ADMIN
Scheduled for 2022.1

When you have a button inside a MultiSelect Footer template (for example), it is different visualized compared to the same button outside of the component. This comes from the k-list-container that is applied when a button is inside a toolbar.

 

-------ADMIN EDIT---------

A possible workaround for the scenario is to use custom styles as shown below:

<div class="row">
    <div class="col-2">
        <TelerikButton ButtonType="Telerik.Blazor.ButtonType.Button"
                       Icon="k-icon k-i-add"
                       Primary="true">
            New Value
        </TelerikButton>
    </div>

    <div class="col-10">
        <TelerikMultiSelect Data="@(
                                            new List<SelectListItem>()
                                            {
                                                { new SelectListItem { Text = "Text 1", Value = "Value1" } },
                                                { new SelectListItem { Text = "Text 2", Value = "Value2" } },
                                                { new SelectListItem { Text = "Text 3", Value = "Value3" } },
                                                { new SelectListItem { Text = "Text 4", Value = "Value4" } }
                                            })"
                            FilterOperator="StringFilterOperator.Contains"
                            Filterable="true"
                            TItem="SelectListItem"
                            TValue="string"
                            TextField="Text"
                            ValueField="Value">
            <FooterTemplate>
                <TelerikButton ButtonType="Telerik.Blazor.ButtonType.Button"
                               Class="my-nested-button"
                               Icon="k-icon k-i-add"
                               Primary="true">
                    New Value
                </TelerikButton>
            </FooterTemplate>
        </TelerikMultiSelect>
    </div>
</div>

@code{
    public class SelectListItem
    {
        public string Value { get; set; }
        public string Text { get; set; }
    }
}

<style>
    .k-list-container .k-button.my-nested-button {
        background-color: #ff6358;
        align-items: flex-start;
        align-self: flex-start;
    }

    .k-list-container .k-button-primary.my-nested-button,
    .k-list-container .k-button.k-primary.my-nested-button {
        /*copy the colors from the basic button*/
        border-color: #ff6358;
        color: #ffffff;
        background-color: #ff6358;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.04));
        /*change the flex alignment form the parent container*/
        align-items: flex-start;
        align-self: flex-start;
    }
</style>

Unplanned
Last Updated: 19 Jan 2022 08:34 by ADMIN
Scheduled for 2022.1
I would like to be able to add custom icons to the input components in my application
Unplanned
Last Updated: 02 Mar 2021 16:22 by ADMIN
ADMIN
Created by: Vasil Yordanov
Comments: 0
Type: Feature Request
10
A new Kendo UI theme which is in compliance with and extends Zurb Foundation styles -> http://foundation.zurb.com/sites/docs/kitchen-sink.html
1 2