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

1) normal select box : (in the iPAD)

<select id="size0" >
    <option>S - 6 3/4"</option>
    <option>M - 7 1/4"</option>
    <option>L - 7 1/8"</option>
    <option>XL - 7 5/8"</option>
</select>

2) kendo ui select box :

  Question : 

How can I input like 1) on mobile while using kendo jquery?

I have a kendoGrid with filterable columns using jQuery. Let's say I have a column named Title. When I click on filter icon besides the column name a dropdown occurs that has "Filter" ption and on hovering over "Filter" option a new dropdown containing all the values from the columns is opened. I want this newly opened dropdown to the left always. How can I do so ?

$('#grid').data("kendoGrid");
            if (grid != undefined || grid != null)
                $('#grid').empty();

            var grid = $("#grid").kendoGrid({
                dataSource: DataSource,
                    schema: {
                        data: function (response) {
                            return response;
                        }
                    },
                },
                sortable: true,
                filterable: true,
                columnMenu: true,
                reorderable: true,
                resizable: true,
                multi: true,
                selectable: true,
                dataBinding: function () {
                    record = (this.dataSource.page() - 1) * this.dataSource.pageSize();
                },
                noRecords: true,
                messages: {
                    noRecords: "No records found"
                },
                pageable: {
                    pageSize: 5,
                    input: true
                },
                columns: [
                    {
                        title: "Sr. No.",
                        template: "#= ++record #",
                        width: 70
                    },
                    {
                        field: "Title", title: 'Title',
                        width: "25%",
                        attributes: {
                            style: 'white-space: nowrap;'
                        },
                        filterable: {
                            multi: true,
                            extra: false,
                            search: true,
                            operators: {
                                string: {
                                    eq: "Is equal to",
                                    neq: "Is not equal to",
                                    contains: "Contains"
                                }
                            }
                        }
                    },

                    {
                        command: [
                            { name: "edit1", text: "", iconClass: "k-icon k-i-eye", className: "ob-view" }],
                        title: "Action", lock: true, width: 80, headerAttributes: {
                            style: "text-align: center;"
                        }
                    }
                ]
            });

}

Hi there! I'm not a developer but working with one to try and get a fix for my web application. This specific issue is not happening on any desktop computer but appears to be happening on my MacBook Pro when using Safari (not Chrome) and my 5th Gen iPad in both Safari and Chrome. When access a specific section of the program it begins to 'tab' through every field on that page endlessly. When I check the network log it states  'PerformValidationActions' appears to be in a loop cycling through 'text1_enter' 'text1_leave' 'text2_enter' 'text2_leave' 'text3_enter' 'text3_leave'  etc.  It EVENTUALLY ends but then when you try to log out you get the error Object reference not set to an instance of an object.

Any help would be GREATLY appreciated!

Hi all,

I'm currently having a problem to try to change the focus one cell up/down using the key arrows when the focus is on a DatePicker component and it is located inside a Grid. The current behavior is that the focus is on the DatePicker and the up/down arrows change the segment value of the date. (It only changes the day, month or years).

Can you please give an idea how to override this kendo behavior?

Additionally, can you share with me more information about the keyboard navigation inside the DatePickers components?

I read this information DatePicker Component - Keyboard Navigation | Kendo UI for Angular (telerik.com) but it doesn't mention anything about the behavior pressing just the up/down arrows without opening the calendar component. 

Thank you in advance. 

I have a DropDownTree on my site. When the text of the item is too long to fit I am seeing a horizontal scrollbar and the gray colored background does not expand. I don't want auto width as that makes the container grow larger than the input control is. How can I instead have it wrap? 

I have a kendo dropdown tree with a selected value that was there on initialization. When the user clicks on the dropdown for the first time, I want the list to auto expand the selected node so the user can see it the child item. How do I do this? 

Similarly, I would like the user to be able to click on a parent node and, instead of selecting the parent node, since that isn't allowed in my case, it should just expand so they can see the children. 

Hi support team.

how to get the row data?  the following is currently not working..

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "id" },
      { field: "name" },
      { command: [
        {
          // for click to work when there is template, add class "k-grid-[command.name]" to some element, otherwise the click handler will not be triggered
          name: "settings",
          template: "#= data.id # text in the command column <a class='k-button k-grid-settings'><span class='k-icon k-i-settings'></span>Settings</a>",
          click(e){
            kendo.alert("how to")
          }
        }
      ]
      }
    ],
    dataSource: [{ id: 1, name: "Jane Doe", bib: 1 }, { id: 2, name: "Jane Doe 2", bib: 1 }]
  });
</script>
</body>
</html>

Hi support team,

when setting the content using the setOptions method we only see a white window. Why is not loading?

 var window = $('#kendo-window')
            
         	if(!window.data("kendoWindow")) {
            window.kendoWindow({})
          }
          
         window.data("kendoWindow").setOptions({
                 title: title,
           			 content: "../content/web/window/ajax/ajaxContent1.html",
           			 modal: true,
                 actions: ["maximize","close"],
                 position: {
                     top: "10",
                     left: "10"
                 },
                 width: width,
                 minHeight: 900,
               	 scrollable: true,
                 animation: {
                     open: {
                         effects: "fade:in",
                         duration: 500
                     },
                     close: {
                         effects: "fade:out",
                         duration: 500
                     }
                 }
             })
         
         window.data("kendoWindow").center().open()