Problem:
During creating a pdf previewer for an application, kendo MVVM approach has presented a problem with rebinding embed/iframe/object elements. When the layout gets placed and values are bound the embed element calls the binded src value twice (one gets canceled, the other gets displayed). In chrome this behavior starts with first bind of the layout, while in ie11, this happens after binding the layout for the second time.
In case when working with views the requests are compounded and go up for additional request (first time twice, third time four times, then six...)
Is there a way to bypass that or do we have to approach it with a completely different angle?
For easier understanding of the problem I pasted sample code. In case my problem didn't come quite across: To see what I'm talking about check chrome developer tools (F12) and go to Network tab. Then click the Show pdf text a couple of times.
Javascript:
01.$(function () {02. var obs_global_layout = new kendo.observable({03. id_1: "",04. id_2: ""05. });06. 07. var obs_leftSide = new kendo.observable({08. show_pdf: function (e) {09. global_layout.showIn("#rightSide", right_layout);10. }11. });12. 13. var obs_rightSide = new kendo.observable({14. pdf_link: "http://www.telerik.com/docs/default-source/case-studies-documents/cbre_casestudy_2.pdf"15. });16. 17. global_layout = new kendo.Layout("layout", {18. model: obs_global_layout,19. wrap: false20. });21. 22. left_layout = new kendo.Layout("lefter", {23. model: obs_leftSide,24. wrap: false25. });26. 27. right_layout = new kendo.Layout("viewer", {28. model: obs_rightSide,29. wrap: false30. });31. 32. global_layout.render($("#wrapper"));33. global_layout.showIn("#leftSide", left_layout);34.});Html:
01.<!DOCTYPE html>02.<html>03.<head>04. <title></title>05. <meta charset="utf-8" />06. <script src="jQuery/jquery.min.js"></script>07. <script src="kendoUI/js/kendo.web.min.js"></script>08. <style>09. body, html {margin:0;padding:0;height:100%;}10. #wrapper, .embed {height:100%;}11. #leftSide {float:left;width:25%;height:100%;}12. #rightSide {float:left;width:75%;height:100%;}13. </style>14.</head>15.<body>16. <div id="wrapper">17. 18. </div>19. 20. <script type="kendo/template" id="layout">21. <div>22. <div id="leftSide">23. 24. </div>25. <div id="rightSide">26. 27. </div>28. </div>29. </script>30. 31. <script type="kendo/template" id="lefter">32. <div class="link">33. <span data-bind="click: show_pdf">Show pdf</span>34. </div>35. </script>36. 37. <script type="kendo/template" id="viewer">38. <div class="embed">39. <iframe width="100%" height="100%" data-bind="attr: {src: pdf_link}" />40. </div>41. </script>42. <script src="default.js"></script>43.</body>44.</html>Hi!
I need to define some Hierarches in a pivot table with json data (not olap/xmla).
I can't find an example of this, the only example of Local Binding (http://demos.telerik.com/kendo-ui/pivotgrid/local-flat-data-binding) is very simple.
In this example, "All Categories" and "All Product" are two different ways to separate the data. What i need is a nested relation Category -> Product, so i can't view mesaures by product if i don't open the category first.
An example of this can be viewed on the "Basic Usage" example (http://demos.telerik.com/kendo-ui/pivotgrid/index). If you drag "Customer" fields into "ROWS" section, you will see nested fields in the pivot table (All Customes -> Australia, Canada, France...). See the image.
Any advice to configure the hierarchies?
Thanks!
Hi,
I have a requirement to display data on page scroll which is working fine , now client also want to freeze header when scrolling the page.
Thanks
I am trying to select all rows, but I also have paging enabled. I am using the angular grid control.
I have checkbox column with a checkbox for select all in the header row. I am utilizing the option that I have seen in other posts to select all:
grid.items().addClass('k-state-selected');
This seems to work for the page that I am viewing, but I want to select all rows on all pages. Is there a way to do this with paging enabled?
Hi all,
We has some issue with DDL.
There is some description:
We have kendo window
with two DDL.
<select kendo-drop-down-list id="aaa"k-data-text-field="'Name'"k-data-value-field="'Id'"k-data-source="OneSource" /><select kendo-drop-down-listid="bbb"k-data-text-field="'Name'"k-data-value-field="'Id'"k-cascade-from-field="'parentid'"k-cascade-from="'aaa'"k-data-source="TwoSource" />--------------------------------------
And data from server. [Server give all data (I`ll check with fiddler)]
Parent ds: (OneSource)
{"Id":1,"CodeXXX":"One","Name":"SuperValue","RandomNumber":1},{"Id":2,"CodeXXX":"Two","Name":"SuperValue2","RandomNumber":2}Child ds: (TwoSource)
{"Id":1,"CodeXXX":"A","Name":"Name1","parentid":1,"RandomNumber":1},{"Id":2,"CodeXXX":"B","Name":"Name2","parentid":1,"RandomNumber":2},{"Id":4,"CodeXXX":"C","Name":"Name3","parentid":1,"RandomNumber":3},{"Id":5,"CodeXXX":"D","Name":"Name4","parentid":1,"RandomNumber":4},First ddl work properly but second didn't cascade or show any date.
If it is important we are using v2015.2.805
chartDataEl.dataSource = new kendo.data.DataSource({ transport: { type: 'json', read: function(options) { //console.log('barchart read called'); var request = vm.shipmentManagementRequest; request.RequestType = myChart.chartData.htmlID; shipmentService.getBasicChartData(request) .then(function(result) { options.success(result.data); }).catch(function(error) { options.error(error); }); } }, sort: { field: "date", dir: "asc" }, schema: { model: { fields: { date: { type: "date" } } } }});value binding relies on the change DOM event which is raised after blurring an input element whose value has changed. This means that the
value from the View-Model will be updated when the input element loses focus.
Im not seeing any events. I think it might be the format on start and end.
This is my schedule options:
$scope.schedulerOptions = { date: new Date("2015/12/28"), startTime: new Date("2015/12/28 07:00 AM"), views: [ "day", { type: "workWeek", selected: true }, "week", "month", ], timezone: "Etc/UTC", dataSource: { data: $scope.panel.entities, schema: { model: { id: "taskId", fields: { taskId: { from: "taskID", type: "number" }, title: { from: "title", defaultValue: "No title", validation: { required: true } }, start: { type: "date", from: "start" }, end: { type: "date", from: "end" } } } }, }, };And the json string in $scope.panel.entities looks like this:
{"date":"2015-12-27T23:00:00.000Z","startTime":"2015-12-28T06:00:00.000Z","views":[" day",{ "type":"workWeek", "selected":true}, "week", "month"],"timezone":"Etc/UTC","dataSource":{ "data":[{ "taskId":1, "title":"Skoter", "start":"2015-12-29T08:00:00Z", "end":"2015-12-29T13:00:00Z", "description":"Ã…ka skoter", "ownerId":1 }], "schema":{ "model":{ "id":"taskId", "fields":{ "taskId":{ "from":"taskID","type":"number" },"title":{ "from":"title", "defaultValue":"No title", "validation":{ "required":true } }, "start":{ "type":"date", "from":"start" }, "end":{ "type":"date", "from":"end" }, "description":{ "from":"description" }, "ownerId":{ "from":"ownerID", "defaultValue":1 } } }, "timezone":"Etc/UTC" }, "filter":{ "logic":"or", "filters":[{ "field":"ownerId", "operator":"eq", "value":1 },{ "field":"ownerId", "operator":"eq", "value":2 } ]}}}I am passing json data to a Kendo javascript pie chart, but I would like to display 2 values on the chart, one is the number of units and the other is the % value of those units to the whole. For example,
Units Sold
100 Apples - 25%
200 Oranges - 50%
100 Peaches - 25%
I assume I can do it, but I don't know the syntax for the template. Thanks.
I have a Hierarchical grid and I'm trying to add a custom editor for pop-up editing. When I add the template to the child grid and click on the "edit" button, i get a invalid template error. If i add that same template to the parent, it works fine.
Here is the error in console:
Uncaught Error: Invalid template:'<div class="row popupForm"> <div class="col-xs-10">
I've attached a screenshot of what my grid looks like.
Here is the code
<PARENT>
@(Html.Kendo().Grid<ParentViewModel>()
.Name("GridAdjax")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Read(read => read.Action("Read", "controller"))
.Model(model =>
{
model.Id(c => c.Id);
})
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Events(events => events.RequestEnd("onRequestEnd"))
)
.Columns(columns =>
{
columns.Bound(p => p.CompanyName).Title("Company Name");
columns.Bound(p => p.CompanyDomain).Title("Company Domain");
columns.Bound(p => p.CompanySecurityRole).Title("Security Role");
columns.Bound(p => p.CompanySecurityGroup).Title("Security Group");
})
.ClientDetailTemplateId("template")
.Pageable()
.Sortable()
.Resizable(resize => resize.Columns(true))
.Events(e => e.DataBound("OnDataBound"))
.Deferred()
)
<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<ChildlViewModel>()
.Name("grid_#=CompanyId#")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Update(update => update.Action("CompanyList_Update", "Administration"))
.Read(read => read.Action("Read", "Child", new { companyId = "#=CompanyId#" }))
.Model(model =>
{
model.Id(c => c.Id);
model.Field(c => c.CompanySoldTo).Editable(true);
model.Field(c => c.CompanyDistributionChannel).Editable(true);
model.Field(c => c.CompanyDivision).Editable(true);
model.Field(c => c.CompanyPlant).Editable(true);
model.Field(c => c.CompanySalesOrg).Editable(true);
})
)
.Columns(columns =>
{
columns.Bound(p => p.CompanySoldTo).Title("Sold To");
columns.Bound(p => p.CompanyDistributionChannel).Title("Dist. Chan.");
columns.Bound(p => p.CompanyPlant).Title("Plant");
columns.Bound(p => p.CompanySalesOrg).Title("Sales Org");
columns.Command(command => { command.Edit(); }).Title(("Edit SAP Info."));
})
.Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("Detail"))
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
</script>