I would like to help user to see if a filter is active or not on a GRID 

In my exemple before filter the icon is black

After filter I would like to have another color on my icon (for example red) 

is it possible ?

After upgrading from Kendo UI v2021.3.1216 to Kendo UI v2022.1.301 my grid search button has changed a little and is now misaligned.

I use this code to display a search button with an icon inside the text box:

<span class="k-textbox k-grid-search k-display-flex" style="margin-left:3px;">
    <input id="search-questions" autocomplete="off" placeholder="[#[Search]#]..." class="k-input">
    <span class="k-input-icon"><span class="k-icon k-i-search"></span></span>
</span>

I'm using bootstrap 3 as the theme. I can't spot the CSS that cause the misalignment.

Before and after:

Hello experts

How do I match the front line? (When I set kendoForm, orientation: 'horizontal')

please Answerㅠㅠ

link : https://docs.telerik.com/kendo-ui/api/javascript/ui/form/configuration/items#itemscolspan

<form id="myForm"></form>


<script>
  $("#myForm").kendoForm({
    formData: {
        ID: 1,
        FirstName: "John",
        LastName: "Doe",
        Address: "London",
        Postcode: "SW1A 1AA"
    },
    layout:"grid",
    orientation: 'horizontal',
    grid: {
        cols: 2,
        gutter: 20
    },
    items: [{
        type: "group",
        label: "Personal Information",
        layout: "grid",
        colSpan: 2,
        grid: {
            cols: 2,
            gutter: 10
        },
        items:[{
            field: "FirstName",
            label: "First Name:",
            validation: { required: true },
            colSpan: 1
        },{
            field: "LastName",
            label: "Last Name:",
            validation: { required: true },
            colSpan: 1
        },{
            field: "Addresss",
            label: "Address:",
            validation: { required: true },
            colSpan: 2
        },{
            field: "Postcodee",
            label: "Postcode:",
            validation: { required: true },
            colSpan: 2
        }]
    },{ 
        type: "group",
        label: "Shipping Address",
        layout: "grid",
        colSpan: 2,
        grid: {
            cols: 4,
            gutter: 10
        },
        items:[{
            field: "Address",
            label: "Address:",
            colSpan: 2,
        },{
            field: "Postcode",
            label: "Postcode:",
            colSpan: 2
        }]
    }]
  });
</script>

In the TimePicker control can you have it default to "hh:mm:ss" or "  :  :  "?

If I turn on, set dateInput to "true", it default to "hours:minutes:seconds".  Can this be changed?

In Kendogrid how do we change the default filter options from "is true" and "is  false" to "Yes" and "No"  to match the data in the columns 

Is it possible to make the Stepper control responsive to fit on a small viewport?

Example:

In our project we have a web page that produces a diagram on screen; we would like to take this diagram and place it in a report. The report is generated on our server and the diagram is obviously shown in the browser on the client computer.

My question is, is there a way of taking the current view and sending it to the server and may be storing it in the database as a BLOB image? If I can do this then I will be able to insert the image in to the reports I generate/build.

Good morning,

creating a graph with a single data series, we found that, although the series is graphed with a dash-dot type, the same type is not shown in the legend (see attachment).

Is there an option to report the same type of line in the legend or do you have a work around to suggest to set it up?

Thank you,

I'm trying to make the SomeDate field format in the kendo grid below work, but no matter what I do, it always returns the ISO string instead of the formatted date. I even tried to define a template in the columns object, and used kendo.format, but I got the exact same result, an ISO string.

I need this data load to be delayed (autoBind:false), I can't provide any data at the beginning. I do know the field types in advance, and I'm defining it as "date". This got to use a locally defined variable.

I tested the code below in Kendo UI Dojo and it returns the ISO string also, so I know it is not an issue with my local libraries.

Why is the date not being formatted correctly? What am I missing?

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/grid/local-data-binding">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.default-main.min.css" />

    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2022.1.301/js/kendo.all.min.js"></script>
    
    

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2022.1.301/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.301/js/jszip.min.js"></script>
</head>
<body>
    <script src="../content/shared/js/products.js"></script>

<div id="example">
    <div id="grid"></div>

    <script>
        $(document).ready(function() {
            var myData = [{ProductName:"My Product",UnitPrice:123,SomeDate:"2022-01-01T00:00:00-06:00"}];
      
            var $myGrid = $("#grid").kendoGrid({
                autoBind: false,
                dataSource: {
                    schema: {
                        model: {
                            fields: {
                                ProductName: { type: "string" },
                                UnitPrice: { type: "number" },
                                SomeDate: { type: "date" }
                            }
                        }
                    },
                    pageSize: 20
                },
                height: 550,
                scrollable: true,
                sortable: true,
                filterable: true,
                pageable: {
                    input: true,
                    numeric: false
                },
                columns: [
                    "ProductName",
                    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                    { field: "SomeDate", title: "Some Date", format: "{0:d}", width: "130px" }
                ]
            });
            $myGrid.data("kendoGrid").dataSource.data(myData);
        });
    </script>
</div>

</body>
</html>

This is my example https://dojo.telerik.com/uxopADoB

I am able to align everything else to the right, but groupHeaderColumnTemplate. How can I do it?