I can rotate the tab labels by putting a css rotate into the <li> entry. However it doesn't modify the size of the tabs to match. Is there a way to have the tab strips down the side of the display and have the labels turned 90 degrees so that they fit?

Hello,
I wanted to test the new Grid Column Virtualization (https://demos.telerik.com/kendo-ui/grid/column-virtualization) but I noticed that the Typescript typings don't accept string, only number:
interface GridScrollable {
virtual?: boolean;
endless?: boolean;
}
According to the API, this should be possible: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/scrollable.virtual
Hi Team,
I ma trying to generate a grid with HTML Table. I AM adding row and creating HTML Textbox in DOM CELLS property in kendogrid. but when i am filtering the data, filtering and pagination is not working in kendogrid table. Grid get regenerated. Can someone help pls. lPlease find the code.
$(document).ready(function(){
var grid=$("#dataTable").kendoGrid({
toolbar: [ { template:"<input type='button' class='k-button' value='AddData' onclick='addRow()'/>" }
/* {name: "addrow", text: " Add Row "} */],
columns: [ { field: 'english' }, { field: 'local' }, { field: 'del' } ],
pageable: {
messages: {
empty: "No items to display"
},
input: true,
refresh: true,
pageSizes: true,
pageSizes: [10, 20, 30, 50]
},
scrollable: true,
sortable: true,
selectable: "row",
filterable: true
, dataSource: { pageSize: 10 }
}).data("kendoGrid");
grid.dataSource.pageSize(10);
});
function addRow() {
var table;
var tableID;
table = document.getElementById("dataTable");
tableID='dataTable';
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.id="row["+length+"].english";
var element1 = document.createElement("textarea");
element1.cols="85";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell1.id="row["+length+"].english";
var element2 = document.createElement("textarea");
element2.cols="85";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
cell1.id="row["+length+"].english";
}
</script>
<TABLE id="dataTable" width="500px" border="double">
<thead>
<tr style="height:8px">
<th data-field="english" >English</th>
<th data-field="local" >Local</th>
<th data-field="del">Delete </th>
</tr>
</table>
Kindly suggest solution.
Hi, Dev Team!
Not sure this right thread, but i find problem on Grid control.
I set Fiori css in my project and put folder "Fiori" near css files. but on grid control i can't see any picture, like arrow for filter column.
<link rel="stylesheet" href="https://[my path]/styles/kendo.common-fiori.min.css" />
<link rel="stylesheet" href="https://[my path]/styles/kendo.fiori.min.css" />
Also i check availability of pictures from path, like "https://[my path]/styles/Fiori/sprite.png"

I am trying a scenario where I want to move rows from one grid to another. I have used this link as a starter: https://onabai.wordpress.com/2013/01/28/kendoui-move-rows-between-grids/
The method in the above link works fine, but I am looking to add a dropdownlist in the target grid when a row is added. I am providing a dojo link to illustrate:
https://dojo.telerik.com/@alanwhurt/IsAqOVug/2
The dropdownlist is being added and what I would like to do is to be able to select a value in the list and have it persist when a new row is added. For example, if I select the first user in the left grid and move it to the target grid on the right and then select a role, all is well. If I add another user to the target grid, any previous dropdownlist selection is reset. I assume this is happening due to the grid being refreshed when a new item is added to its datasource. Is there a way to prevent this from happening, or another way I can try to accomplish this scenario?
.Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("EditSchool").Window(w => w.Title("Edit School Details").Name("editWindow").HtmlAttributes(new { id = "editWindow", @width = "700px" })))
@(Html.Kendo().Grid(Model) .Name("SchoolGrid") .Columns(columns => { columns.Bound(p => p.SchoolID).Width("100px"); columns.Bound(p => p.Name); columns.Bound(p => p.Campus).Width("100px"); columns.Bound(p => p.StateCode).Width("100px"); columns.Command(command => { command.Edit(); command.Destroy(); }).Width("180px"); }) .ToolBar(tb => tb.Create()) .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("EditSchool").Window(w => w.Title("Edit School Details").Name("editWindow").HtmlAttributes(new { id = "editWindow", @width = "700px" }))) .Pageable() .Sortable() .DataSource(dataSource => dataSource .Ajax() .Model(model => model.Id(p => p.SchoolID)) .Read("Index", "School") .Update("Edit", "School") .Create("Create", "School") .Destroy("Delete", "School") ) )

I have a kendo chart I am using within a dashboard.
The definition of the chart contains a link to the data which is returned as a DataSource (using dt.ToDataSourceResult()) and is in the format.
Field 1, Field 2, Field 3
A, 1, 2
B, 2, 2
etc.
The series are defined as
series:[{field:"Field2",type:"x", categoryField:"field1",axis:"primary", name:"ABC" }
,{field:"Field3",type:"x", categoryField:"Field1",axis:"primary", name:"Contract Value" }]
where type is set to the series type.
In scenario 1, Field 1 is a date and we require Field 2 and 3 to each be a separately defined series (one being a bar and the other a line.) this works as we would like.
In scenario 2, Field 1 is a company name and Field 2 and 3 are again separately defined series but both bars. In this case the first series is shown as a bar but the second is missing, however the legend contains an entry for both. What is going wrong? If we change series 2 to a line it appears as before.
I understand we could reshape the data for every instance and have separate definitions but would rather have a single elegant solution.
Can you shed any light in what is happening?
Thanks