I am using the AutoComplete widget with a minLength of 4. However, if the user clicks a "GO" button I want to force the search to execute before the minLength is reached. The line where search is called executes without errors while debugging  but does nothing. I am using remote data with server filtering. It works perfectly once the min length is reached. Here is my code: 

<div id="ddPatientSearch" class="dropdown-menu dropdown-menu-left border-dark" aria-labelledby="btnOpenSearch">
    <div class="demo-section k-content" style="width:400px">
        <div class="container-fluid">
            <div class="row">
                <div class="col-10 pl-1 pr-0 text-right">
                    <input id="txtPatientSearch" class="form-control form-control-sm" placeholder="Search patients" />
                </div>
                <div class="col-2 pl-1 pr-0">
                    <button id="btnSearchPatients" type="button">GO</button>
                </div>
            </div>
        </div>
        <div class="demo-hint pl-2 text-dark" style="font-size:12px">Hint: Search by name, subscriber, or MRN</div>
    </div>
</div>

$(function() {
    $("#txtPatientSearch").kendoAutoComplete({
        dataTextField: 'PatName',
        filter: 'contains',
        minLength: 4,
        clearButton: false,
        template: '#= data.PatName # ( #= data.CurrentAge # #= data.Gender # ) <br> Sub. ID: #= data.SubscriberID # <br> MRN: #= data.MRN #',          
        dataSource: {
            serverFiltering: true,
            transport: {
                read: {
                    url: searchUrl,
                    data: function () {
                        return {
                            searchTerm: $('#txtPatientSearch').val(),
                            patientListId: Filters.getSelectedPatientList().value
                        }
                    }
                    
                }
            },
            group: { field: "ResCategory" }
            
        }
    });

    $('#btnSearchPatients').on('click', function () {
        var searchTerm = $('#txtPatientSearch').val();
        $('#txtPatientSearch').data('kendoAutoComplete').search(searchTerm);
    });

    //Keeps the dropdown from closing when the "GO" button is clicked
    $('#ddPatientSearch').click(function (e) {
        e.stopPropagation();
    });
});

This was my original reference for aligning the aggregates in their respective columns in the groupHeaderTemplate.

https://docs.telerik.com/kendo-ui/knowledge-base/grid-align-group-header-with-cells

A requirement is to have the grid have an editable layout, i.e., hide/show columns, be grouped differently, rearrange columns, etc.

By default, the grid is working properly, following the reference above.

But once you do edit the layout (e.g., hiding the tasksCompleted column) of the grid, the groupHeaderTemplate no longer works properly. As is expected because the column or table td's are defined and fixed.

Any ideas on how to properly set up the groupHeaderTemplate is much appreciated.

Here is the updated Kendo UI Dojo link as reference of the issue: https://dojo.telerik.com/IYuGOraj/2

I'm trying to get the validation working on my form with kendovalidator

I'm using Telerik ver : 2019.2.619

    $.validator.setDefaults({
        ignore: ""
    });
    $(function () {
        $("#form1").kendoValidator();
    });

this shows validation messages correctly if values are empty eg:

issue is  when an incorrect value is entered the message shows:

    <div class="form-group row">
        @Html.LabelFor(model => model.CountryCodeId, htmlAttributes: new { @class = "control-label col-md-2 required" })
        <div class="col-md-10">
            @(Html.Kendo().ComboBoxFor(m => m.CountryCodeId)
                                         .Name("CountryCodeId")
                                        .Placeholder(@Resources.Resources.CountryPlaceholder)
                                        .DataTextField("Description")
                                        .DataValueField("Id")
                                        .Filter("contains")
                                        .Suggest(true)
                                        .DataSource(s => s.Read(r => r.Action("GetCountries", "Customer")).ServerFiltering(false))
                                        .HtmlAttributes(new {  style = "width:300px" })
            )
            @Html.ValidationMessageFor(model => model.CountryCodeId, "", new { @class = "text-danger" })
        </div>
    </div>

        [Required(ErrorMessageResourceType = typeof(Resources.Resources), ErrorMessageResourceName = "CountryValidation")]
        [Display(ResourceType = typeof(Resources.Resources), Name = "Country")]
        public int? CountryCodeId { get; set; }

and if  I enter a number the validation seems to pass, which it shouldn't

Validation should pass only if a country is selected from the combobox, entrering a numeric value or any other text which is not on the list should fail validation

How do I get default dataanotation message if an invalid entry is made?

Thanks

The kendo template function injects the literal " value into the DOM instead of " when the html encoding template format is used.  For example:

var template = kendo.template("<div id='box'>#= firstName #</div>");
var data = { firstName: "<b>Todd'\" &amp; &quot; &#34; &#x00022; </b>" };

results in the following value being inserted into the DOM:

<b>Todd'" &amp; " " " </b>

Why are the 3 html entity representations of double quotes translated back to the double quote literal?  Is there a way to avoid this?  If not, what other html entities behave this way?  

http://jsfiddle.net/6fcz2e9j/1/

A recent change - probably from here - https://github.com/telerik/kendo-ui-core/issues/1650

Means that all our input boxes now come with what is, for us, an ugly and inappropriate clear button.

Seems especially odd to make it appear on a DropDownList - since all our values are readonly.

Can you advise the best way to remove this feature?

Project wide would be nice.

Hello

I have some page with a Kendo Ui  for JQuery Multicolumnbobox.
At on one page there are around 20 MilticolumnComboboxes and only one large data (around 10000 rows) others have around 5-200 rows ( load data via .json array files)
It takes very long time(maybe 7-15 sec) for the page to load already.

If I off all the Multicolumncomboboxes the page renders fast.

Are there ways to increase the performance with the Jquery Ui MulticolumnComboBoxes?

Thank you

I'm trying to implement validation on he form , but having issues with radio button.

        <div class="form-group row">
            @Html.LabelFor(model => model.LanguageID, htmlAttributes: new { @class = "control-label col-md-2 required" })
            <div class="col-md-10">
                @(Html.Kendo().ComboBoxFor(m => m.LanguageID)
                                         .Name("LanguageID")
                                        .Placeholder(@Resources.Resources.LanguagePlaceholder)
                                        .DataTextField("Description")
                                        .DataValueField("Id")
                                        .Filter("contains")
                                        .Suggest(true)
                                        .DataSource(s => s.Read(r => r.Action("GetLanguages", "Student")).ServerFiltering(false))
                                        .HtmlAttributes(new {  style = "width:300px" })
            )
                @Html.ValidationMessageFor(model => model.LanguageID, "", new { @class = "text-danger" })
            </div>
        </div>

            <div class="form-group row">
                @Html.LabelFor(model => model.WebsiteDisplay, htmlAttributes: new { @class = "control-label col-md-2 required" })
                <div class="form-group k-radio-list">
                    <div class="checkbox">
                        @(Html.Kendo().RadioButtonFor(m => m.WebsiteDisplay).Label(@Resources.Resources.Yes).Value(true))
                        @(Html.Kendo().RadioButtonFor(m => m.WebsiteDisplay).Label(@Resources.Resources.No).Value(false))
                        @Html.ValidationMessageFor(model => model.WebsiteDisplay, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>

<script>
    $(function () {
        $("form").kendoValidator();
    });

</script>

it does work for combobox and textboxes , but error is not displayed for radio button.

Am I missing something?

Dear progress folks,

we use in our product the ignore property of the kendo.ui.Draggable (kendo version 2020.2.617) method. This works fine on Safari with an iPad and a OS version 14.7.1. But the problem here is that we have some Click Events on some interactive elements which also gets ignored. The behaviour in such situations should be that the dragging gets ignored and the Click Events should still work.

The interesting fact about this is that the problem doesn't appear on Safari at an iPad with an OS version 12.5.4.

I would like to sort the timeline through the date field, in descending order, meaning that the first item to be displayed is the most recent date.
I used this way:
sort: {
    field: "EventDate", dir: "desc"
}
 
This works, but I wouldn't want the timeline to be displayed as it is now, with the most recent date being the first item from Left to Right (from newest to oldest). See Sreenshot_1.png
Because this creates a feeling that as I go forward in the timeline, instead of going "forward" in time, I am going backwards. It should be the opposite, when I click on "previous", I navigate backwards in the timeline, I go to an older date and not a newer date.

Given this, I would like to know if there is any way to order the horizontal timeline items descending with a visual behavior where the first item to be displayed is the one most to the right of the timeline (most recent). And when navigating "backwards", clicking on "Previous" I navigate to the oldest items chronologically.

I even tried to force this behavior by ordering ascending and using the open() method as below:
    let timeline = $("#timeline").data().kendoTimeline;
    let firstEvent = timeline.element.find(".k-timeline-track-item:last-child");
    timeline.open(firstEvent);
    timeline.redraw();

But this method generates strange behavior on small screens like mobile devices. When triggering open(), the "Previous" navigation button is disabled and therefore the horizontal timeline is left unnavigated. See Screenshot_2.png

Hi, 

I am working on an already existing kendo grid that gets the data from the server. 

The grid has filters enabled and I can see the calls being made (under Chrome developer tools -> network) when i filter the data.

However, the calls being made are of the GET type (with the filter data on the URL), is there a way to change the request method from GET to POST?

Currently I can see the call being made as this when i apply the filter "Side = sell":

http://mywebsite.com/get_orders/account-1?take=150&skip=0&page=1&pageSize=150&filter%5Blogic%5D=and&filter%5Bfilters%5D%5B0%5D%5Bfield%5D=SIDE&filter%5Bfilters%5D%5B0%5D%5Boperator%5D=contains&filter%5Bfilters%5D%5B0%5D%5Bvalue%5D=sell

thanks