Here's how I set up the Multiselect

I also so have some codes to auto select when user hit tabs key

Due to a large list of data items, virtual is set to true. But it seems like doing so will result in an error "Cannot read property 'item' of undefined" whenever user tabs to autoselect first row in the option list. Not using virtual causes some delay in loading the list.

What should I do?

Also is there a better way to format code block? Copy and paste my codes into the "Format Code Block" doesn't indent the codes as I want it to, if not messing it up.

Below is my code.  Kendo chart is taking my date time data and displaying the axis by date not date and time.  I've tried many ways to get this to work.  When I tried Labels(labels => labels.DateFormats(formats => formats.Days("dd/MM/yyyy hh tt"))) and it displays all dates as 12 AM.    Why wont it display my data on the axis natively without formatting?  It seems to convert the data to a day range defaulted to 12 AM.   What am I doing wrong?

Data is like:

8/24/2017 1:00 

8/24/2017 2:00 

8/24/2017 3:00 

                 @(Html.Kendo().Chart<ElmahErrorsHourCountModel>()

                  .Name("HourlyErrorTotals")
                  .DataSource(ds => ds.Read(read => read.Action("HourlyErrorsCountByDate_Read", "Grid")))
                  .HtmlAttributes(new { style = "height:225px; width= 100%" })
                  .Series(series =>
                  {
                      series
                          .Line(model => model.ErrorCount);
                  })
                  .CategoryAxis(axis => axis
                      .Categories(model => model.HourlyDateTime)
                      .Labels(label => label.Rotation(-90))
                      .Crosshair(c => c.Visible(true))
                      
                  )
                  .ValueAxis(axis => axis.Numeric()
                      .Labels(labels => labels.Format("{0:N0}"))
                  )

                  .Tooltip(tooltip => tooltip
                      .Visible(true)
                      .Shared(true)
                      .Format("{0:N0}")
                  )
                  )  

In Kendo Spreadsheet api doc, under toolbar section: http://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet#configuration-toolbar.home

                    // for all available options, see the toolbar items configuration
                    // http://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar#configuration-items
So when I try to add attributes to the toolbar item, I get error. See setup in this dojo:

https://dojo.telerik.com/oMiCi

What I ultimately want to do is to add tooltips to the buttons.

When the windows size is smaller. The top level menu items will auto wrap. The top menu items will display in mult-lines.

I want all top menu item display in single line always. 

Thank you!

I'm using the editor for AngularJS. The tools array is passed to the kendo-editor directive by the k-tools property.
I want to change the tools displayed in the toolbar at runtime. I tried to change the tools array and calling the editor.toolbar.refreshTools() method, but it didn't work.

Is it possible to change the value of the tools array passed and then call some method to re-render the toolbar?
Or is there some other way to change the displayed tools at runtime?

After I select an item from Dropdownlist and hit save, Grid is not displaying the description corresponding to the Id value returned from the service.

Here is the code snippet...

$("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: false,
            columns: [
                {
                    field: "TransferTypeId",
                    title: "Transfer Type",
                    template: "#:TransferType#",
                    width: 150,
                    editor: function (container, options) {
                        $('<input data-bind="value:' + options.field + '" required/>')
                             .appendTo(container)
                             .kendoDropDownList({
                                 autoBind: true,
                                 dataTextField: "Value",
                                 dataValueField: "Key",
                                 valuePrimitive: true,
                                 dataSource: {
                                     transport: {
                                         read: {
                                             url: THIS_APP_PATH + "Api/Lookup/TransferType"
                                         }
                                     }
                                 }
                             });
                    }
                }] });

         What am I missing here?

         Appreciated for your help.

Hi there

I have a grid bound to a data source. It is an ajax grid. I am trying to use a Popup editor template for adding new items. In the template, I have a simple

regular HTML listbox.

@Html.ListBoxFor(x => x.DropdownListOptions, new SelectList(Model.DropdownListOptions), new {id = "dropdownlistBox", @class = "form-control", multiple= "multiple" })</div>

The postback returns all the data in the listbox if they are selected. If none are selected, the model binding field is null. (This is normal behaviour)

Now usually in ASP.NET MVC you just write a simple Jquery on postback to select all the listbox items before postback, like so:

$("#dropdownlistBox option").attr("selected", "selected");

This works just fine without using Telerik controls. However when I use this via Telerik Grid -> Popup -> Edit template. Even tho I visually see ALL fields being selected. The model field is still null.

I have confirmed that the values are not posted back from the browser using devtools.

I have even gone so far as to use jquery to fire off a grid event on .RequestStart('selectAllInListBox') like so:

var selectAllInListBox = function(e) {
        if (e.type === 'create') {
            debugger;
            var ddl = $('#dropdownlistBox option');
            if (ddl.length > 0)
            {
                var lastEl = e.sender._data[e.sender._data.length - 1];
                var optionsArray = ['test', 'test2', 'test3'];
                lastEl.DropdownListOptions = optionsArray;
            }
        }

Forcing the actual grid data source to update the values. By the time it gets back to my controller, it is still null.

Is there an easy way to do this? I have exhausted all options.

THANKS!

Chris

Hello,

I have a Kendo UI Grid that loads 5000+ records.  The data is local data on the page, and the grid is handling it ok, but we'd like to improve performance.  I'd like to try loading the local data in batches of 100 as the user scrolls down the grid results.  I've seen the examples, but have not seen very many examples of MVVM implementations and the best way to approach our situation.  Could someone recommend the way to get virtual scrolling working with row batches?

Thanks in advance!

Hi,

I am working on an angular4 application with Kendo UI widgets and trying to achieve tooltip in Kendo UI controls with the help of title attribute, is there any other way to get it done.

Thanks!!!