When text part of a node is clicked, emdedded Treeview events triggered once for each node.  They don't work on following clicks, but nodes are visually seen checked/unchecked.

How can it be overcome? Or is it possible to disable clicking on text part?

I'm trying to add a little margin between stacked notifications to visually better separate individual notifications, however, I can't get the css right.

All demo's of stacked notifications has zero margin.

Do you have any suggestions?

I have a kendo ui multiselect setup using the code method. It populates fine and I can select values. However if I leave the field blank then run a kendo custom kendoValidator the select field never gets to the custom validation. It's like a blank is being marked as valid. Which means it never even makes it to the custom rules.Is there a setting i need when i create the control to tell it that blanks are not OK?

@(Html.Kendo().MultiSelect()
.Name("JobSelected")
.HtmlAttributes(new { @required = "required", @validationMessage = "Enter Job", @class = "form-control job" })
.DataTextField("Text")
.DataValueField("Value")
.Placeholder("Select Jobs...")
.DataSource(source =>
{
source.Read(read =>
{
    read.Action("JobsGetAll", "Application");
}).ServerFiltering(true);}).AutoBind(true))

//input is never the multiselect box

var validator = $("#personalDiv").kendoValidator({
                    rules: {
                        //implement your custom date validation
                        custom: function (input) {
                            if (input.is(".drp")) {
                                var ms = input.data("kendoDropDownList");
                                if (ms.value() == "-1") {
                                    input.parent().addClass("k-invalid");
                                    return false;
                                }
                                else {
                                    input.parent().removeClass("k-invalid");
                                    return true;
                                }
                            }
                            else if(input.is(".job")) 
                            {
                                var ms = input.data("kendoMultiSelect");
                                if (ms.value().length === 0) {
                                    input.parent().addClass("k-invalid");
                                    return false;
                                }
                                else {
                                    input.parent().removeClass("k-invalid");
                                    return true;
                                }
                            }
                            else if(input.is(".date") && input.val() != "") {
                                var currentDate = Date.parse($(input).val());
                                //Check if Date parse is successful
                                if (!currentDate) {
                                    return false;
                                }
                                //grad date needs to be in the future
                                if (input.is("#txtGradDate") || input.is("#txtStartDate")) {
                                    var d = new Date();
                                    if (currentDate < d) {
                                        return false;
                                    }
                                }
                            }
                            else if (input.is("[data-role=maskedtextbox]") && input.val() != "") {
                                var maskedtextbox = input.data("kendoMaskedTextBox");
                                return maskedtextbox.value().indexOf(maskedtextbox.options.promptChar) === -1;
                            }

                            return true;
                        }
                    }
                }).data("kendoValidator");

if (!validator.validate()) {
                    $("#personalDiv").removeClass("valid").addClass("invalid");
                    $('#btnPreviousPage').show();
                    $('#btnNextPage').show();
                    break;
                } else {
                    $("#personalDiv").removeClass("invalid").addClass("valid");
                }

The tabstrip expands to fit content to a point then stops. And if you put a splitter inside it doesn't expand at all and instead scrollbars appear.

I have a large grid in a tab and I want the tabstrip to fit to the grid size which is taller than the window. How can I do that? Can it be done with split content too?

I have a tab strip where the content of each tab contains a grid. When a user performs an action I need to refresh the grid on the selected tab as well as the grids in the tabs that are not selected. The problem that I have is that the grid in one of the tabs has columns that are frozen. When this tab is not selected and the grid is refreshed, the locked columns do not get displayed. All of the other grids in the tabs that are not selected get displayed correctly.

Link to dojo: https://dojo.telerik.com/@jedvalson/asexEDOv with instructions to reproduce the issue

I have used code from this example - https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/AngularJS/editing-using-contextmenu - to create a context menu.

Occasionally the menu will close immediately after it is displayed, so all you see is a flash of the menu. This has only happened on Chrome on Windows 10. 

It only happens very occasionally, I cannot recreate it at will.

Pressing F5 does not fix it. Only restarting Chrome seems to fix the issue.

See attached video which shows menu 'flashing' for a moment,

I need to be able to use a DropDownlist as a filter row control with the ability to select multiple options.

I set the cell filter template to the below function (ComboBoxInit) and I found the multibox extended plugin in another forum thread (bottom).

When I run this, it gives me an error message within kendo.all.min.js 

   JavaScript runtime error: Unable to get property 'done' of undefined or null reference

Any help would be appreciated.  I have tried everything.  I can get a regular dropdownlist to work, but we need the ability to select multiple options.  The MultiSelect box is not an option as it's way too bulky for our needs.

function ComboBoxInit(args)
{

  var data = [ { text: "Tony", value: "110" }, { text: "Gary", value: "120" }];
  args.element.kendoMultiSelectBox({
     valuePrimitive: true,
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data
  });

}

    var MultiSelectBox = window.kendo.ui.DropDownList.extend({

        init: function (element, options) {
            var me = this;
            // setup template to include a checkbox
            options.template = kendo.template(
                kendo.format('<label><input type="checkbox" name="{0}" value="#= {1} #" />&nbsp;#= {2} #</label>',
                    element.id + "_option_" + options.dataValueField,
                    options.dataValueField,
                    options.dataTextField
                )
            );
            // remove option label from options, b/c DDL will create an item for it
            if (options.optionLabel !== undefined && options.optionLabel !== null && options.optionLabel !== "") {
                me.optionLabel = options.optionLabel;
                options.optionLabel = undefined;
            }

            // create drop down UI
            window.kendo.ui.DropDownList.fn.init.call(me, element, options);
            // setup change trigger when popup closes
            me.popup.bind('close', function () {
                var values = me.ul.find(":checked")
                    .map(function () { return this.value; }).toArray();
                // check for array inequality
                if (values < me.selectedIndexes || values > me.selectedIndexes) {
                    me._setText();
                    me._setValues();
                    me.trigger('change', {});
                }
            });
            me._setText();
        },

        options: {
            name: "MultiSelectBox"
        },

        optionLabel: "",

        selectedIndexes: [],

        _accessor: function (vals, idx) { // for view model changes
            var me = this;
            if (vals === undefined) {
                return me.selectedIndexes;
            }
        },

        value: function (vals) {
            var me = this;
            if (vals === undefined) { // for view model changes
                return me._accessor();
            } else { // for loading from view model
                var checkboxes = me.ul.find("input[type='checkbox']");
                if (vals.length > 0) {
                    // convert to array of strings
                    var valArray = vals
                        .map(function (item) { return item + ''; });
                    checkboxes.each(function () {
                        this.checked = $.inArray(this.value, valArray) !== -1;
                    });
                    me._setText();
                    me._setValues();
                }
            }
        },

        _select: function (li) { }, // kills highlighting behavior
        _blur: function () { }, // kills popup-close-on-click behavior

        _setText: function () { // set text based on selections
            var me = this;
            var text = me.ul.find(":checked")
                .map(function () { return $(this).parent().text(); })
                .toArray();
            if (text.length === 0)
                me.text(me.optionLabel);
            else
                me.text(text.join(', '));
        },
        _setValues: function () { // set selectedIndexes based on selection
            var me = this;
            var values = me.ul.find(":checked")
                .map(function () { return this.value; })
                .toArray();
            me.selectedIndexes = values;
            me.element.val(values);
        }

    });

    window.kendo.ui.plugin(MultiSelectBox);

I develop an application asp.net mvc core 2.1.

I have this:

--------------------------------------------------------------------------------------------------------------------------------
@model Dto
@{
    ViewBag.Title = "PrincipalView";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

...

<div class="page-container hidden-on-narrow row">
    <partial name="partialView" model="Model" />
</div>

...

<button class="btn btn-submit btn-block" onclick="getPDF('.pdf-page');">Print Receipt</button>

...

--------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------

function getPDF(selector) {
    kendo.drawing.drawDOM($(selector)).then(function (group) {
        kendo.drawing.exportPDF(group/*, { paperSize: "A5", landscape: true }*/).done(function(data) {
            kendo.saveAs({
                dataURI: data,
                fileName: "partialview.pdf"
            });
        });
    });
}

--------------------------------------------------------------------------------------------------------------------------------

With the above code, I can export a partial view and save it, but I don't want that approach.

I want to export that partial view to PDF and open it in another tab or a new browser window.

Could you guys point me to the correct path?

Hello,

I've got multiple numeric textbox that gets rendered inside a gride via SPA architecture with MVVM binding and templates. I've posted this on stackoverflow before but have gotten no response hopefully I'll get one here. Stackoverflow link

My main issue was the numeric textboxes are editable and onchange/onspin I'd like whichever textbox's font that got changed to change color so lets say red in my case. It only works for whichever one is selected, so if I changed the first textbox and then I click somewhere on my page to focusout of the textbox and then I try to change the 2nd textbox and focusout the first textbox styles gets reverted back to it's default and doesn't keep its red font color and only the 2nd textbox does. I want all changed textboxes to keep its font color change.

My code:

My viewmodel function that handles the changing of the colors: