or
7 answers
437 views
If you have a Tabstrip with "tabPosition: Left" or "tabPosition: Right", and then you next a TabStrip inside it with "tabPosition: Top" or "tabPosition: Bottom", it appears to apply some of the styling/position from the parent left/right positioning, breaking the TabStrip, places the tabs one above the other in an incorrect position.
Hopefull this link will work, if not you'll have to paste the code below into a new Dojo: http://dojo.telerik.com/eWiHa
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/tabstrip/tab-position">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.blueopal.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.blueopal.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
</head>
<body>
<div class="demo-section k-header">
<div id="tabstrip-A">
<ul>
<li class="k-state-active">One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div><p>A</p></div>
<div><p>B</p></div>
<div>
<div id="tabstrip-B">
<ul>
<li class="k-state-active">One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div><p>A</p></div>
<div><p>B</p></div>
<div><p>C</p></div>
</div>
</div>
</div>
</div>
<style>
.demo-section { width: 600px; }
.demo-section * + h4 { margin-top: 2em; }
.demo-section .k-tabstrip .k-content { height: 140px; }
</style>
<script>
$(document).ready(function () {
$("#tabstrip-A").kendoTabStrip({ tabPosition: "right" });
$("#tabstrip-B").kendoTabStrip({ tabPosition: "bottom" });
});
</script>
</body>
</html>
Iliana Dyankova
Telerik team
answered
on
19 Aug 2016
1 answer
299 views
Hello, i'm trying to learn Kendo and would like to use my local drive initially, just to start off with simple examples and so i'm wondering if Telerik has some examples that i can simply cut and paste to my C:\ drive like below and where the data inputs are JSON files?
Or in the example below, can i somehow determine what the full path is for this input dataset?
//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers
thanks very much for any pointers!
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script>
</div>
<style type="text/css">
.customer-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>
</body>
</html>
Alex Hajigeorgieva
Telerik team
answered
on
19 Aug 2016
1 answer
109 views
Hello,
I'm trying to get a reference to the kendo multiselect widget that I've created using the AngularJS kendo-multiselect directive. In following the example here (http://docs.telerik.com/kendo-ui/AngularJS/introduction#widget-references), I've tried to add a kendo-widget-name attribute to my element, but it doesn't seem to do anything. In fact, the docs make mention of 'kendo-widget-name', but none of the examples actually use it. I scanned the source code, and I can find no reference to that attribute or a directive with that name. What am I missing?
Alexander Valchev
Telerik team
answered
on
19 Aug 2016
4 answers
564 views
Hello.
We are trying to implement pagination (with virtual scrolling instead of actual pages) for every group of Grid widget. So, we have Grid with serverPaging, serverGrouping and virtual scrolling. As far as I understand, Kendo Grid doesn't support paging if it's grouped. So, the idea is to return from server empty grouped results (with empty items for every group), collapse all groups by default and then after user opens a group - send separate request and populate just this particular group.
Could you please help us with implementation showing an example of something similar or tell any better way to reach the goal?
Just to make it clear - currently our grouped (aggregated) data can have millions of rows in every group.
Thank you.
Max
Nikolay Rusev
Telerik team
answered
on
19 Aug 2016
3 answers
261 views
We've been using different themes for our application, and are having some trouble with the "Flat" theme.
When adding icons to widget contents (ex. Kendo Window), the icons don't show up. Reason seems simple: both icons and widget background are white. :)
This can be seen easily in the icons demo page (switch to Flat theme):
http://demos.telerik.com/kendo-ui/styling/icons
Any plans to make Flat theme work the same way as other themes, or any workarounds for this?
Iliana Dyankova
Telerik team
answered
on
19 Aug 2016
5 answers
1.8K+ views
Hi,
I have searched all the document & demo, but no records about how to send costom para(argument) to event handler.
1. In jQuery, we could do this:
jQuery("#test").bind("keyup",{sendpara: thepara},function(event) {alert(event.data.sendpara);});var editor = jQuery("#test").data("kendoEditor"); editor.bind("keyup",{sendpara: thepara},function(event) {alert(event.data.sendpara);});2. I found this:
http://www.kendoui.com/forums/kendo-ui-framework/mvvm/passing-parameters-through-html-bindings-mvvm.aspx
it says we could:
var viewModel = kendo.observable({ Id: "users/1", Points: 10, ReducePoints: function(id) { console.log(this.get("Id")); }}); jQuery("#test").kendoEditor({ sendpara:"123" });var editor = jQuery("#test").data("kendoEditor"); editor.bind("change",function(event) { alert("b:"+ this.get("sendpara") ); });3. At last, I found this:
http://www.kendoui.com/forums/kendo-ui-web/numeric-textbox/get-element-id-from-change-event-handler.aspx
So I changed my code to:
jQuery("#test").kendoEditor(); var editor = jQuery("#test").data("kendoEditor"); editor.bind("change",function(event) { alert("b:"+this.element.attr("sendpara") ); });This is really not very good.
So the general question is this: where can I find documentation on the properties and methods of the event argument parameter?
Or kendoUI not really support to send para to an event handler?
If so, that's really a bad news, because it's very ordinary need to send some paras in to event handler, and to handle some ajax call or function to send this paras to the server, and so on.
yours,
Ivan
Dimo
Telerik team
answered
on
19 Aug 2016
1 answer
100 views
Because
the rendering indication of the screen takes time and wants to suppress half of
the processing time to degree, I investigate a solution.
Dimo
Telerik team
answered
on
19 Aug 2016
2 answers
245 views
This is my master grid
$(document).ready(function() { $("#grid").kendoGrid({ height: 800, sortable: true, pageable: true, selectable: "row", filterable: { mode: "row" }, editable: { //disables the deletion functionality update: false, destroy: false }, scrollable: true, groupable: true, pageable: { pageSizes: [10, 25, 50, 100], refresh: true, buttonCount: 5
This is the subgrid, when I click the save button, it never make to the POST to the php script. Is there a bug I have to make a event for make the POST?
01.function detailInit(e) {
02. // get a reference to the current row being initialized
03. var detailRow = e.detailRow;
04.
05. detailRow.find(".subgrid").kendoGrid({
06. dataSource: {
07. transport: {
08. read: "./data/getDetails.php",
09. update: {
10. url: "./data/getDetails.php",
11. type: "POST"
12. }
13. },
14. schema: {
15. data: "data"
16. },
17. serverFiltering: true,
18. filter: {field: "candidate_id", operator: "eq", value: e.data.candidate_id}
19. },
20. sortable: true,
21. pageable: true,
22. selectable: "row",
23. height:300,
24. pageable: {
25. pageSizes: 5,
26. refresh: true,
27. buttonCount: 5
28. },
29.
30. //rowTemplate: kendo.template($("#rowTemplate").html()),
31. columns: [
32.
33. {title: "Task", field: "ARS",width: "100px",filterable: {
34. cell: {
35. showOperators: false
36. }
37. }},
38. {title: "Score", field: "Value",width: "250px"},
39. { showOperators: false}
40. ],
41. detailInit: detailInit,
42. editable: true,
43. navigable: true,
44. toolbar: [ "save", "cancel" ]
45.
46. });
47. }
48.
49. });
Please advice, I had been working on it for a while, still havent figure out the details. To make this work.
Do I have to define the schema to fix the problem? But even without it , everything looks great
Daniel
Telerik team
answered
on
19 Aug 2016
3 answers
187 views
Hi,
Is it possible to use different editable modes for different actions? For example; when creating a new record, I want to use the "popup" window option, but when editing, I'd like to be able to do so "inline".
Thanks,
Grant
Rosen
Telerik team
answered
on
19 Aug 2016
1 answer
152 views
Following is my grid.
$("#grid").kendoGrid({
selectable: "single cell",
allowCopy: true,
change: function(e) {
var selected = this.select();
var row = this.select().closest("tr");
selectedRow = this.dataItem(row);
deselectSelection();
},
excel: {
fileName: "Report.xlsx",
allPages:true,
filterable: true
},
dataSource: {
schema: {
model: {
fields: columnSchemaModel
}
},
transport: {
read: function (e) {
e.success(reportList);
}
},
pageSize: 500,
aggregate: aggregateList,
change: function(e) {
var dataSource = this;
if (typeof dataSource.filter() != "undefined") {
app.fltrButton.enabled = true;
}
}
....
I am trying to capture datasource change when filter by column. Change function fires as expected. ' app.fltrButton.enabled = true; ' is a variable of button class. If it set to true, css class of button changes. However it doesn't get effect unless I click on another parallel button. So it's the html that doesn't get update, not the value. Please provide a suggestion.
Dimo
Telerik team
answered
on
19 Aug 2016
