1. Open "Sample Kendo UI SpreadSheet Example.html" attached html file in the chrome browser.

2. Click on open button in the Toolbar of the spreadsheet.

3. Select "Sample Excel with Font Colors.xlsx" attached excel file. This excel file contains headers with background color and Rows with ForeColors.

4. Now when the file is loaded, you will observe that B2, B3 and B5 should come up in Red fore color but the fore color of these cell in the kendo spread sheet is Black.

5. Similarly C2 to C5 should come in Green color but the fore color in the spreadsheet is black.

Query: Kindly let me know how can we achieve the fore color present in the excel sheet show show up in the Kendo UI Spreadsheet?

Hi Team,

Sorry for the confusion. I don't know where to post this content issue I saw in your website.

Have a nice day :)

We are working on enterprise product, which uses Progress Telerik jQuery KendoUI components extensively purchased by our Company. In which Kendo PanelBar is used in many modules of our product.

Now a days we are working on Accessibility (i.e. keyboard and screen reader) as part of out-of-box feature of our product.

The Kendo Panel Bar has been made accessible so that it can be navigated using the keyboard arrow keys, once it receives focus via Tab Key.

We have created small example on dojo.telerik.com (i.e. which can be referred on https://dojo.telerik.com/@chiragvidani/EBEPUnoY/3) to explain issue faced by us, when accessing via Screen Reader. Please find issues below:

1. When the panel bar is initialized in expanded state and on receiving focus by Kendo PanelBar widget, screen reader reads Header as well as Content. Now because of this, content is read twice (i.e. second time when we navigate to content using down arrow keys one at a time). Whereas behavior in collapsed state is as expected.
2. Also, to read out the expand/collapse event of PanelBar we need to programmatically remove role attribute from <ul> and <li> tags after initialization of widget.

Secondly when referring WAI-ARIA practices on www.w3.org website (i.e. https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html), we found some differences as explained below:

1. Header of PanelBar or Accordion is surrounded by <button> inside <h3> (i.e. reference link is https://www.w3.org/TR/wai-aria-practices/#accordion)
2. Content of PanelBar or Accordion has an aria-labelledby attribute with value containing ID of respective Header.
3. In WAI-ARIA website PanelBar or Accordion is generated using combination of relevant <div> markup, whereas in Kendo, its generated using <ul> and <li> markup.
4. In current implementation of Kendo PanelBar, focus is set to <ul>, whereas in demo of w3.org website its being set to <button> placed as a header in order to restrict reading of list keyword.

Kindly help us with your assistance.

Thanks,

Chirag Vidani

Hi,

I've implemented the DateRangePicker in our software and I noticed that the selection of the DateRangePicker has a slide different behavior to the Angular DateRangePicker.
This behavior is also reproducible in the demo website.

Scenario:
Select a range. Alter range to the new values. First, update '03-11-2019' -> '04-11-2019'. Second, update '09-11-2019' -> ''

First selection:
Start date: 03-11-2019
End date: 09-11-2019

Now I want to update this range to:

Expectation:
Start date: 04-11-2019
End date: 16-11-2019

Result:
Start date: 16-11-2019
End date: null
When I select the start date, it's updated as expected (04-11-2019) but selecting the new end date (16-11-2019), sets the a new start date instead of the end date. As described by the result values.

Hi, our customers are complaining that does not work on iPhone iOS 13. We are using Kendo Hybrid UI components.

I looked into Kendo examples and noticed that scrolling does not work on Example on iOS 13.1.

Attaching of the page I am talking about.

Please review.

If you configure a Kendo Grid with client-side paging, each time you call setDataSource to update the data source then a new .k-pager-numbers-wrap DIV is added to the page controls. I've replicated the problem in Dojo at https://dojo.telerik.com/UTolOzer by taking a basic client-side paging demo, moving the dataSource configuration into a separate function (with data("kendoGrid").setDataSource), and calling that function 25 times. At the end, the source shows the UL element with the page buttons inside 25 .k-pager-numbers-wrap DIV elements.

I first noticed this problem because in my own environment, each nested DIV was shifting the page buttons left 1 pixel and overlapping the "previous page" buttons. In my Dojo example, with 25 nested DIVs the page buttons disappear completely.

I've added the following in my own code as a workaround in the dataBound event of the grid:

                            var trueParent = e.sender.pager.element.find(".k-pager-numbers-wrap").first();
                            e.sender.pager.element.find("ul").appendTo(trueParent);
                            trueParent.find(".k-pager-numbers-wrap").remove();

https://dojo.telerik.com/aPAcUDuc/2

open new window using the button, and close all window one by one, then see that k-overlay is still stay in page

Hi Team,

Kendo grid does not allow all columns to be hidden from column menu as it disables the check box for last column in column menu.

But if we set hidden = true and menu = false properties for column, grid hides that column from grid and column menu, but enables the checkbox to hide all columns from grid leaving it empty. After which we can't get back the columns in grid which isn't valid.

Grid should always allow at least one column to be included in grid/menu.

Please find attached screenshot and below sample link.

https://dojo.telerik.com/EHOgaJUK/2

Thanks,

Jyotika

Hi,

You prob. already know this, but in Chrome attribute autocomplete should be "disabled" instead of "off" for e.g. combobox - then we don't get the auto fill.

Even thought it has no id nor name - I think it looks at the lavbel - in my case its "Name" and the combobox get a big Chrome auto fill from the address book. Setting it from "off" to "disabled" will disable both auto complete AND auto fill.

The same goes for the AJAX Combobox - will you notify that team too? Current hotfix for that is `$(".rcbInput").attr("autocomplete", "disabled");`

Thanks

/Anders

When clicking on CheckBox to select a line, the widget check other checkbox (on other column of the same line) inserted from column template.

I suppose that the selector that the system use is too large.

For information, i created a template for boolean column based on how kendo generate checkbox structure (just de be coherent)

See the code extracted from https://dojo.telerik.com/EqiPIkiV

 var checkBoxtemplate = function(boolValue){
   	var checkedStr = '';
    if (boolValue) {
    	checkedStr = 'checked="checked"';
    }

        
    return '<input class="k-checkbox" data-role="checkbox" ' + checkedStr + ' type="checkbox"><label class="k-checkbox-label k-no-text smi-checkbox-fordisplay"></label>';
 };
  
$("#grid").kendoGrid({
  columns: [
    {
      selectable: true, 
      width: '30px'
    },
    { field: "name" },
    { field: "age" },
    { field: "administator", 
      template: function (dataItem) { 
        return checkBoxtemplate(dataItem.administator); 
      }  
    }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30, administator: false },
    { name: "John Doe", age: 33, administator: false },
    { name: "BigBoss Doe", age: 70, administator: true }
  ],
  selectable: true
});

Bug report

Copied text is pasted with some (editor's ?) styles.

Steps to reproduce

1. Open the Demo page in the Edge browser:

https://demos.telerik.com/kendo-ui/editor/index

2. Copy some words (e.g. "Kendo UI Editor") from the editor's default text.

3. Paste them at the end of the text.

4. Open developer tools (F12).

5. On the Elements tab, select the pasted paragraph and check its style, you will see <span style="display: inline !important; etc.

Reproduction steps:

1. Open column menu

2. Using arrow keys, go to Filter menu item.

3. Hit right arrow to open Filter submenu

4. Tab through filter submenu

5. Hit escape.

Expected behaviour: Filter submenu closes and focus returns to the parent column menu

Actual behaviour: Both filter and column menu are closed.

Snippet: http://dojo.telerik.com/@gearoidj/iqiwUCEp

This is an issue for accessibility users - there doesn't seem to be a way to return to the parent filter menu using the keyboard without closing all menus and reopening them.

There is one way for it to occur, and that is to use the mouse to place the focus on the Filter menu background - in this case hitting escape will close the Filter menu and focus will be returned to the parent column menu. However this is impractical for an accessibility user who is relying solely on keyboard navigation.

An example of where this (mostly) works is on the Columns submenu - the user can use the left arrow key or Escape to close the child menu or alternatively keep tabbing and they will eventually return to the parent menu (though if they do tab within the child menu, hitting Escape will close both the child and parent menus).

I am currently experiencing an issue between the Kendo ContextMenu and the Kendo EditorFor. When I open the ContextMenu inside of the EditorFor it display offset relative to the cursor, both the left and top values are completely incorrect relative to the editor.

Attached you will find a solution where this issue has been replicated, I removed the scripts folder in order to keep the file size small. I hope this can be fixed soon.

1 - when use bootstrap v4  theme, ddl does not handle long names gracefully, please find in attachment example in bootstrap v4 & silver themes, also here are the dojo exaples

v4: https://dojo.telerik.com/AYoXEyoT/5

silver: https://dojo.telerik.com/aqIkUSiP/2

2 - for grid and separate controls validation message has diff view

https://dojo.telerik.com/aBuKaDun/6

should be the same

1. Create a grid with two editable columns.
2. Define validation rules for both columns. Keep one column as required.
3. Edit the row. Set the required column value using model.set method.'

It fails because before setting the value it performs validation. If validation was successful then it will set the value on model.

Since the desired field has no value and validation rule will fail on that.

It should accept the value and then perform validation. If validation fails with new value then it might discard the changes.

$("#grid").kendoGrid({
  dataSource: {
    batch: true,
    transport: {
      read: function(e){
        e.success([1,2,3,4,5,6,7,8,9].map(function(i){return {id: i, title: "test" + i}}));
      }
    },
    schema: {
      model: {
        id: "id",
        fields: {
          id: {defaultValue: "-1"},
          title: {
            validation: {
              required: true
            }
          }
        }
      }
    }
  },
  columns: [
    {field: "title", title: "Title", filterable: {field: "title.a"}},
    {command: ["edit", {name: "destroy"}]}
  ],
  editable: {mode: "inline"},
  filterable: true,
  toolbar: [{name: "create"}]
});
 
var grid = $("#grid").getKendoGrid();
var model = grid.dataItems()[0];
grid.editRow(model);
model.set('title', '');
model.set('title', 'test 1111'); // it will fail

Applying the following filter to a datasource

app.localDocs = new kendo.data.DataSource({
        data: app.docArray,
        schema: {
            model: app.doctorModel,
            total: function () {
                return app.docArray.length;
            }
        }
    });

    app.doctorModel = new kendo.data.Model.define({
        id: "code",
        hasChildren: false,
        fields: {
            code: {
                type: "number",
                editable: "false"
            },
            name: {
                type: "string",
                editable: false
            },
            msp: {
                type: "string",
                editable: false
            }
        }
    }); 

app.localDocs.filter({
          logic:"or",
          filters: [
              {
              field: "name",
              operator: "contains",
              value: $('#filterV').val()
                    },
                    {
              field: "msp",
              operator: "contains",
              value: $('#filterV').val()
                    }
                ]
            });
            app.mobileApp.scroller().scrollTo(0, 0);

 Try the search using O'Brien  The list shows no results as soon as you hit the apostrophe.

Works fine on Safari on a mac, chrome on any system, but has the above result above on an ipad or iphone. 

When using a grid with locked columns if the unlocked area is scrollable once scrolled horizontally the resize handle keeps it's original absolute positioning and doesn't respect the change in scroll. 

When hovering over the edge of the column I can no longer see the resize handle. I can hover to the left where it would have been with no scrolling and then see it. 

On DOM inspection I see the event to update the handle's position STILL FIRES when hovering the edge of a column header, but the position is based on scrollLeft() === 0. 

I will assume the needed left position for each column is calculated on creation but is not re-calculated for horizontal scroll. 

This can be reproduced in the live demos on Telerik's site. 

https://demos.telerik.com/kendo-ui/grid/frozen-columns