I have implemented the autocomplete item grouping functionality, but need a slightly different implementation.

The first group header item is injected as a disabled item, but the following items are injected as right aligned divs within the list.  This is causing issues because I do not have a lot of width to play with and the items are being overlapped by the injected div's

Is there any way that I can get the control to always inject group headers as disabled items?  I can add a "IsHeader" attribute and doctor the items inline if needed.

I have attached a screenshot displaying the current render

Is this achievable?  Please say it is because I just want one control suite on the site.

The TabStrip is not working properly when:

- you hide one or multiple tabs

- then navigate with the keyboard(left/right or up/down arrows)

The content of the hidden tag is then showing during navigation while the tab stays hidden. On Chrome the hidden tab even reappeared!

To reproduce the error I've use the navigation demo of the TabStrip (http://demos.telerik.com/kendo-ui/tabstrip/keyboard-navigation) and added the following line

as advised in the forum to be able to hide tabs.

I propose a fix in TypeScript definition files from:

to:

This should make sense, since all widgets does not inherits from kendo.ui.widget as your kendo.all.d.ts file defines.

I need a type for variable that lists all widgets that implements dataSource property. I don't want to write:

So I really love how Telerik does navigation for different examples.  I'm trying to figure out if this is a panelbar or a drawer, so I can replicate similar functionality.  Is there a control that encompasses this type of back and forth/list functionality or is it a matter of cobbling together several controls?

We are manually configuring the datasource for our Grid Pager. I realize Kendo UI has provisions for this already, but for reasons I'm currently unsure of, we have found we need to manually manage our grid pager and keep it in sync with our grid, which works quite well.

The issue is that when the server returns no data (zero records), I'd like to set the Pager to zero records, but when I do it this way as shown below, I get a Maximum Call Stack Exceeded in the init._valueExpr function on the line that says comparer = new Function('current', 'values', body); Note that line of code is inside a loop and I'm assuming the loop simply runs until the call stack is exceeded, but I'm not sure.

Is there a better way to handle this?

I'm developing an ASP.NET 4.5 Web Forms app using the Kendo UI controls in Visual Studio. The controls run fine on my development machine, however when the code is uploaded to the server, the Kendo UI controls do not function as they're supposed to. The attached images show the differences between how the software looks on my development machine versus on the server.

I publish the application from my development machine to the test server using Visual Studio's publish function. Please note that pages that don't use the Kendo UI controls look fine, however pages with Kendo UI components are distorted. My API also works fine. Any ideas as to what's going on? Has anyone seen anything like this before?

I have the following code adding xml datasource to a template. The data comes over but is not formatted as a collapse ui. This is in Appbuilder hybrid ui.

I have a rest service that returns one field as an array of strings:

"$9":"0071", "NAMES": ["Chris Bob","Jim Kuster","Rick Dill","David Scope","Bryan Tim" ]

My JS looks like this:

//Set URL of Rest Service
var loc = (location.href);
var url = loc.substring(0,loc.lastIndexOf("/")) + "/xpRest.xsp/xpRest1";

var dataSource = new kendo.data.DataSource({
transport: {
        read: {
            url: url,
            type: 'GET'
        },batch: false
},
pageSize: 15,
});


dataSource.read();


$("#grid").kendoGrid({
dataSource: dataSource,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
height: 543,
noRecords: true,
selectable : false,
columns : [{
field : "$9",
title : "Location",
width : 75
},{
field: "D_APPRNAME",
title : "Approvers"
  }],
}); 
});

The output in the column is [Object][Object]

Thank you in advance for any feedback:

1) Am I defining correctly the parameters to be passed on my vm.audit.load function on the grid data source?

$(document).ready(function () {
    var vm = kendo.observable(fhfa.vm.default({
        container: $("#app-main"),
        appVersion: audit.constants.appVersion
    }));

    //***grid data***
    var o = audit.auditCollection({});
    vm.set("audit", o);

   // kendo.bind($("#app-main"), vm);

 

     $("#grid").kendoGrid({
        //data: vm.audit.load,

        dataSource: {
            p : function(){

                //*** Search criteria values ***
                var auditTypeCB = $("#auditType").data("kendoComboBox");
                auditTypeID: checkIfZeroOrBlank(auditTypeCB.select());

                startDate: checkIfZeroOrBlank($("#sDate").val());
                endDate: checkIfZeroOrBlank($("#eDate").val());

                var applicationCB = $("#appDropDownList").data("kendoComboBox");
                applicationID: checkIfZeroOrBlank(applicationCB.select());

                auditUser: checkIfZeroOrBlank($("#user").val());
                ipAddress: checkIfZeroOrBlank($("#ipAddress").val());
                auditDescription: checkIfZeroOrBlank($("#description").val());

                pageOffset: null;
                pageSize: 0;
                orderBy: null;
                orderByDirection: null
            },
            schema: {
                data: "audit.items"
            },
            transport: {
                read: function (options) {
                    vm.audit.load(p.applicationID, p.auditTypeID, p.auditUser, p.ipAddress, p.startDate, p.endDate, p.auditDescription, p.pageOffset, p.pageSize, p.orderBy, p.orderByDirection, p.pageMax).then(function () {
                        options.success(data);
                    });
                }
            }
        },
        columns: [{
            field: "applicationID",
            hidden: true
        },
        {
            field: "auditTypeID",
            title: "Type"
        },
        {
            field: "auditDate",
            title: "Date",
        },
        {
            field: "applicationName",
            title: "Application",
        },
        {
            field: "auditUser",
            title: "User"
        },
        {
            field: "iPAddress",
            title: "IP Address"
        },
        {
            field: "auditDescription",
            title: "Description"
        }],
        scrollable: true,
        groupable: true,
        reorderable: true,
        sortable: true,
        selectable: true
    });

 audit.auditCollection = function (init) {
    var o = fhfa.object.baseCollection(init);
    o._name = "auditCollection"
    o._createObject = function () {
        return audit.audit(init);
    };
    o.onloading = function (args) {
        vm = this;
        kendo.ui.progress(vm._view.element, args.isLoading);
    };
    o.load = function (applicationID, auditTypeID, auditUser, ipAddress, startDate, endDate, auditDescription, pageOffset, pageSize, orderBy, orderByDirection, pageMax) {
        var that = this;

        var vPageSize = 100;
        var vCount = 0;
        var def = $.Deferred();
        that._isLoading = true;

        if (pageSize === 0) {
            pageSize = vPageSize;
        }

        audit.da.auditItems_get(applicationID, auditTypeID, auditUser, ipAddress, startDate, endDate, auditDescription, pageOffset, pageSize, orderBy, orderByDirection, vPageSize, pageMax).done(function(eResult) {
            var items = eResult.d.auditItems;
            vCount = eReResult.d.auditItems.lenght;
            that.set("total", vCount);
            that.addArray(items);

            def.resolve(that);
        }).fail(function (error) {
            if (init.onerror) init.onerror({ source: that, sourceType: that._name, error: error });
            def.resolve(that);
        }).always(function () {
            that._isloading = false;
        });     

        return def.promise();
    };