I have a kendoGrid with filterable columns using jQuery. Let's say I have a column named Title. When I click on filter icon besides the column name a dropdown occurs that has "Filter" ption and on hovering over "Filter" option a new dropdown containing all the values from the columns is opened. I want this newly opened dropdown to the left always. How can I do so ?

$('#grid').data("kendoGrid");
            if (grid != undefined || grid != null)
                $('#grid').empty();

            var grid = $("#grid").kendoGrid({
                dataSource: DataSource,
                    schema: {
                        data: function (response) {
                            return response;
                        }
                    },
                },
                sortable: true,
                filterable: true,
                columnMenu: true,
                reorderable: true,
                resizable: true,
                multi: true,
                selectable: true,
                dataBinding: function () {
                    record = (this.dataSource.page() - 1) * this.dataSource.pageSize();
                },
                noRecords: true,
                messages: {
                    noRecords: "No records found"
                },
                pageable: {
                    pageSize: 5,
                    input: true
                },
                columns: [
                    {
                        title: "Sr. No.",
                        template: "#= ++record #",
                        width: 70
                    },
                    {
                        field: "Title", title: 'Title',
                        width: "25%",
                        attributes: {
                            style: 'white-space: nowrap;'
                        },
                        filterable: {
                            multi: true,
                            extra: false,
                            search: true,
                            operators: {
                                string: {
                                    eq: "Is equal to",
                                    neq: "Is not equal to",
                                    contains: "Contains"
                                }
                            }
                        }
                    },

                    {
                        command: [
                            { name: "edit1", text: "", iconClass: "k-icon k-i-eye", className: "ob-view" }],
                        title: "Action", lock: true, width: 80, headerAttributes: {
                            style: "text-align: center;"
                        }
                    }
                ]
            });

}

Hi,

I upgraded my project from 2022.1.301 to 2022.2.621 and my text inputs lost there styling.

This markup worked fine with version 2022.1.301

<input type="text" id="gebruikersnaam" name="gebruikersnaam" class="k-textbox k-input" />

With the latest version it looks like the second input from above snippet.

It displays fine when i add the css class "k-input-solid":

<input type="text" id="gebruikersnaam" name="gebruikersnaam" class="k-textbox k-input k-input-solid" />

Do i have to update all my markup , or is this a bug?

Kind Regards,

Marco

Now that we are supposed to switch to svg icons, away from the font icons, I was wondering if there is an easy way to size the buttons? I use a custom class for the buttons right now and on two of the buttons I am using icons:

They seem to have shrunk. I am guessing this is because of the switch from font icons to the svg icons?

To be honest the icon on the refresh button for v 2020.1.118 disappeared and I had to find a suitable replacement.

So some of the sizing issue for that button might be caused by what icon I picked -- icon: "refresh" didn't seem to produce an icon, so I went with icon "arrowRotateCwIcon".

I just need some sugestions on how to maintain my custom style and get the icons to appear bigger. The style I am using is below:

.submit {
    width: 110px;
    height: 30px;
    padding: 20px 16px 20px 16px;
    border-radius: 4px;
    background-color: #1e98d7;
    box-sizing: border-box;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.35);
    font-family: "Roboto Medium", "Roboto", sans-serif;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: normal;
    letter-spacing: 0.4px;
}

    .submit:hover {
        background-color: #0084cf;
        box-sizing: border-box;
    }

    .submit:active {
        background-color: #50a5d5;
        box-sizing: border-box;
    }

Regards,

George

Hi there,

I'm in the middle of migrating my site to the new SASS css for the new Progress release (Telerik.UI.for.AspNew.Mvc5.2023.2.829), and I'm trying to override the default animated spinning black circle icon with one of the old loading image gifs from one of your classic css styles which matches the site better.

For example, if you override the css with:

.k-loading-image {
    background-position: center;
    background-image: url(images/kendo/loading-image.gif) !important;
    background-repeat: no-repeat;
}

You end up with the new loading image displaying on-top-of / alongside the SASS default loading animation (see attached image), instead of replacing it.

This seems to be the case with old Dojo examples provided by yourselves in the Forum:

https://www.telerik.com/forums/progress-loading---k-loading-image-doesn-t-work-correctly

Can you please provide a way of overriding the loading indicator based on the new SASS style sheets?

Many thanks,

Mike

Hi team,

Where can be seen the SVG icons?

Are they the same as web font icons in this page? https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/font-icons

Furthermore, what is the SVG equivalent for web font icon .k-i-loading ?

Best regards,

Laurent.

Hi, 

I need a little help if possible.

I have the following situation: We have "old" angularjs application built using Kendo UI Jquery (and some angularjs) components. We also have the custom theme for the app - based on kendo ui default theme and dark theme built through theme builder.

Recently we decided to slowly migrate to the latest Angular version (and logically) to use Kendo UI Angular. Since we are taking strangling tree approach, we are firstly migrating small individual windows.

To solve this I am basically building "standalone" angular components which I port to the old app. This is not the ideal process, but only possible in the moment.

What I need a help is following: My new standalone component have its styling and import kendo ui theme from Kendo UI Angular. So when I import my component's js file, I have to import its css file as well. Problem is that after I do this import, both of my apps are broken - styles mix up together and override eachother. 

Is there any suggestion or a way that I can prevent this - how to intentionally separate things in these two css files to stop overriding eachother?

Thank you

Regards,
Vedad

How do you get the selected items in a Kendo UI for jQuery MultiSelect to stack vertically?

Here's what I'm getting; note that the textbox keeps expanding horizontally as each item is selected:

Here's what I need:

Thank you.

Hi,

I have a grid with row selection enabled, scrolling enabled and 2 sticky rows on the right side - many other options besides but these are not relevant here.
Using the Sass themes with the latest patch, 2023.1.314, and selecting a master row, then scrolling the row horizontally so the row data slips under the sticky row cell, the data shows through the sicky row content.  It seems to be OK on the Alt rows though.
This does not happen on ALL themes and swatches, just some - the default-main theme is an example.

I have tried it on the version released prior - 2023.1.117 and this problem is not there.

My actual project allows the operator to change themes/swatches so this would be an issue and limit the themes I could make available.

Is this by design?

I do not really want to start modifying themes if I can help it, is there a simply work around so all themes could be used without this 'feature'?

Dojo example lifted directly from your demos here: https://dojo.telerik.com/upeVIwil and I have included an example in text form and screen shots.

Many Thanks