Unplanned
Last Updated: 17 Jun 2022 12:12 by Don Leduc
Created by: Don Leduc
Comments: 0
Category: Web Themes and ThemeBuilder
Type: Feature Request
1
Introduce more Web Font Icons
Unplanned
Last Updated: 06 Jun 2022 09:57 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: 07 Apr 2022 14:39 by ADMIN
Created by: Beto
Comments: 1
Category: Web Themes and ThemeBuilder
Type: Bug Report
0

Hi Kendo Team,

after we updated to version 2022.2.301 we decided to modify our theme by compiling the Metro theme from the source files and adjusting some of the variables provided.

When working on the multiselect styles however we noticed that changing the variable '@chip-solid-hover-text' in the 'type-metro.less' file did not lead to any change. The attached screenshot shows that the chip still keeps its black text color on hover even though the variable was set to white.

We inspected the _theme.less file in the folder Default/chip and noticed that the variable is not used by the theme (see screenshot).  Looking at the code this also seems to be the case for the 'selected' styles.

We can add additional styles to fix that on our end but since there is a variable for both cases I am sure this is just an oversight and wasn't planned.

 

Thanks,

Markus

 

Unplanned
Last Updated: 30 Mar 2022 08:07 by ADMIN
Scheduled for 2022.2
Created by: Greg
Comments: 0
Category: Themes
Type: Bug Report
1

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
Category: Themes
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
Created by: Sheraz
Comments: 0
Category: Web Themes and ThemeBuilder
Type: Feature Request
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
Created by: Shawn
Comments: 0
Category: Themes
Type: Feature Request
1
I would like to be able to add custom icons to the input components in my application
Unplanned
Last Updated: 27 Sep 2021 08:15 by ADMIN
Created by: Kris Nobels
Comments: 1
Category: ThemeBuilder
Type: Feature Request
1
I would like to control the border-color from the list of parameters. 
Unplanned
Last Updated: 02 Mar 2021 16:22 by ADMIN
ADMIN
Created by: Vasil Yordanov
Comments: 0
Category: Themes
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
Unplanned
Last Updated: 02 Mar 2021 16:19 by ADMIN
Created by: Imported User
Comments: 1
Category: ThemeBuilder
Type: Feature Request
2
The Themebuilder is way too narrow for me to style the product we are building properly. As a designer, I would like to be able to style most properties using a tool like that. E.g. I cannot style the grid except 3-4 properties. The example grid has no hierarchy, and most grid functions are not there for me to see/style. I have worked with your competition Infragistics before, and they have a very flexible AppStylist that allows me to change all style properties. 

I would like you to build something like that! And, of course, be able to import current CSS and not start from scratch every time...
Unplanned
Last Updated: 01 Mar 2021 16:30 by ADMIN
Created by: Levi
Comments: 0
Category: ThemeBuilder
Type: Feature Request
5
When creating a custom build, it's highly impractical to trim down the theme css. The Less source breaks out common widget properties, but the primary themable file lumps all widgets together into a single massive file. It would be nice if this could be split apart further to trim out unused widget styles entirely.
Unplanned
Last Updated: 01 Mar 2021 16:25 by ADMIN
Some of the Kendo UI font icons unicode numbers are reserved in iOS (e.g e007, e006, etc. ). Thus, with the current implementation of the Kendo UI themes, before the font is loaded, the default icons corresponding to these unicode characters are being displayed. This is especially the case with a slow network connection.

A suggestion to handle the issue is to use a font loading strategy that renders an invisible fallback font face, or a font face observer.
Unplanned
Last Updated: 04 Feb 2021 08:53 by ADMIN
Created by: Valid Development Factory
Comments: 1
Category: Themes
Type: Feature Request
0

Hello,

We want to create a custom Material theme for our ASP.NET Core web application. We are using the Sass Theme Builder but can only select predefined color swatches for the "Material" base theme. We would like to be able to set custom colors per "subject" just like you can with the "Default" and "Bootstrap" theme. 
Is this possible or are you blocking this on purpose for some reason?

Thank you in advance.

Unplanned
Last Updated: 21 Jan 2021 12:40 by ADMIN
Created by: Datafyer
Comments: 15
Category: Themes
Type: Feature Request
36

Currently there are 3 application themes: Default, Material, and Bootstrap.
These are nice and helpful however having 3 is quite a bit limiting.

I totally understand that a lot of people will and maybe should create a theme based on their own styles and preferences.
However I honestly think most people probably use a default theme and make small corrections to it in order to suit their needs.

-------

Admin edit: We will be keeping here a list of the suggestions, add your comment which one you would like to see implemented - if it's not on this list, we will add it:

  • Dark (black) theme - you can find a basic sample attached below that uses #363636 for background and #d5d5d5 for text colors (two of the main colors for the Black Material theme we have in Kendo), you can further tweak things in the Theme Builder app
  • Fluent UI - based on the Fluent UI by Microsoft
  • Kendo Themes such as BlueOpal, Silver and Office 365 - you can generate them from the predefined color swatches on the left hand side of the Theme Builder app
  • Theme that uses CSS, not SASS variables so that it can be customized at runtime - at the moment, you can generate the needed themes and switch them at runtime as shown here.

------

 

In WPF there are 20 or so styles.
Why only 3 in Blazor when the web is just as easy to style as WPF?

Unplanned
Last Updated: 16 Dec 2020 14:16 by Naveen

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: 13 Nov 2020 14:36 by ADMIN

I need my application to be fully WCAG compliant.

I have multiple form fields that are not to be modified by the user, but must be readable by them.

Take the combobox for example: https://dojo.telerik.com/@GaloisGirl/exAZIROW

  • The disabled variant is not focusable, nor does it have sufficient contrast between text and background. This is correct by WCAG rules, but not suitable to my use case.
  • The readonly variant is almost perfect, but the arrow has visual cues that suggest it's interactive (color, hover background, cursor) when it's not.

The same problems occurs for DatePicker (see https://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker/methods/readonly ) and other widgets.

Please keep in mind the subtle differences in meaning between readonly and disabled and do not just apply disabled styles to readonly widgets.

Unplanned
Last Updated: 19 Oct 2020 15:13 by ADMIN
I would like to be able to theme other, non-kendo controls to match kendo controls.  Some controls such as textarea i am able to do this with no problem with a k-textbox class, but i would also like to grandularly be able to set just the background to k-theme-background, foreground to k-theme-foreground, etc. This way if i use properties like this, they update with the kendo theme.
Unplanned
Last Updated: 16 Oct 2020 07:06 by ADMIN
Scheduled for 2020.R3.SP.next

Describe the bug
The TextArea has 14 px font-size and the other inputs have 100% font-size.

Reported in: 1486377

To reproduce
https://dojo.telerik.com/iLeZIpEz

  1. Use the LESS-based theme.
  2. Implement a TextArea component.
  3. Implement a TextBox component.

Expected behavior
The font-sizes for the TextArea and the TextBox have to be equal.

Environment

  • Kendo UI version: 2020.3.915
  • Browser: [all]
1 2