I would like to run code in the viewModel after the page has loaded/rendered.
e.g. <div id="terminalForm" data-bind="events: {onload: addValidator}" >
My problem I'm trying to solve is attaching a validator , which can only be done after the template has been rendered.
$("#terminalForm").kendoValidator().data("kendoValidator");
I'm building a spa app, and not sure it it's preventing the onload event firing or if the kendo bind doesn't support it.
any help appreciated.
cheers,
I'm stumped on how to implement a foreign Key dropdownlist in a custom popup editor template for a grid. The scenario is quite common so I'm curious as to why I can't find an implementation of this. For example, say you have an Orders table with an inter column called CustomerId. This is a foreign key to a table called Customer, which also has the column CustomerName. Now I build a grid for orders and I want to use a custom popup editor template because I want to change the layout. How do I provide my user the ability to use a "Customer" dropdownlist that is populated with all the customers and id edit mode, is pre-selected to the current dataItems CustomerId?
I have tried creating a custom dropdown editor template with it's own datasource and it seems to work for the non-custom template, but it DOESN'T work for a custom one. How do you bind this? There does not appear to be an easy way to get to $scope to set the widget's datasource.
Environment: Kendo 2016.1.112, AngularJS v1.3.15, Windows 7 64bit, Google Chrome Version 38.0.2125.111 m
$scope.customers = new kendo.data.DataSource({
transport: {
read: {
url: 'api/customers',
dataType: 'json',
type: 'GET'
},
},
schema: {
model: {
id: "customerId",
fields: {
customerId: { type: "number" },
customerName: { type: "string" },
}
}
},
serverPaging: false,
}),
$scope.customerDropDownEditor = function customerDropDownEditor(container, options) {
//specify the value field in the "data-bind" attribute
$('<input required data-text-field="customerName" data-value-field="customerId" data-bind="value:customerId"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: $scope.customers
});
},
Hello all
I have the following model
public class MyModel
{
public MyModel()
{
SomeList = new List<string>();
}
public int ServiceId { get; set; }
[UIHint("ModifierListEditor")]
public List<string>SomeList { get; set; }
}
This has an editor bound to a list of string. I want the editor to consist of 4 kendo autocomplete elements. Each element will be an element of the list.
How do I accomplish this?
Hello,
After upgrading to lastest version (2016Q1) the dropdownlists in my application using custimized templates stopped working with the following error: The 'optionLabel' option is not valid due to missing fields.
my code is similar to:
$("#mylist").kendoDropDownList({ optionLabel: "Select ...", autoBind: true, dataSource: recordDataSource, dataTextField: "recordId", dataValueField: "recordId", filter : "contains", template: '#: firstName # #: lastName #', valueTemplate: '#: firstName # #: lastName #'});Datasoruce is made by 3 columns recordId, firstName, lastName
We currently use the JQueryUI accordion (http://api.jqueryui.com/accordion/), and are looking to convert to the Kendo PanelBar. However, there's some functionality in the accordion that we've come to rely on, and I need to see if there are equivalents or workarounds in the PanelBar before we actually switch.
First off, this is the HTML we'll be using:
<ul id="accordion"> <li id="header_1_header"> Header 1 <div id="header_1_accordion"> CONTENT 1 </div> </li> <li id="header_2_header"> Header 2 <div id="header_2_accordion"> CONTENT 2 </div> </li> <li id="header_3_header"> Header 3 <div id="header_3_accordion"> CONTENT 3 </div> </li> <li id="header_4_header"> Header 4 <div id="header_4_accordion"> CONTENT 4 </div> </li></ul>And this is my first pass at the init:
$('#accordion').kendoPanelBar({ expandMode: 'single', activate: function(e) { var header_id = e.item.id; var content_id = $('#' + e.item.id).find('div:first').attr('id'); switch(header_id) { case 'header_1_header': header1Function(); break; case 'header_4_header': header4Function(); break; } if (errorExists) validateSection('#' + content_id); }});Our primary use of the accordion functionality is for handling error messages - validating a section at a time, opening the first section w/ an error on attempted save, and clearing the errors for a section when it's closed.
First off, is there a better way to get the content div than $('#' + e.item.id).find('div:first').attr('id')? In the JQueryUI accordion there are built in functions to get the content (div) based on the parent (li).
Second, is there any functionality built in to the panelbar to get the currently selected section and the newly selected section? For example, if header_4_header was open, and I clicked header_1_header, I'd want to know header_4_accordion as the "old" section, and header_1_accordion as the "new" section. If all we can get is the IDs for the headers (li) that's fine as well.
Finally, is there any way, outside of the init, to get the currently selected panel (the div preferrably, not the li)? This would be for clearing error messages based on the newly-active section - ie. click header_2_header and hide the errors in header_3_accordion.
Hi,
I have a ViewModel, which has a collection field ("Buildings") which should be sent back to the server and a field to fill select lists from ("BuildingsData"):
var model = kendo.observable({ Buildings: [], BuildingsData: [{ Id: 1, Title: "Building1" }, { Id: 2, Title: "Building2" }, { Id: 3, Title: "Building3" }]});
<div data-bind="source: Buildings" data-template="Building"></div>And a template to render a single building:
<script type="x-kendo-template" id="Building"> <select data-bind="source: parent().parent().BuildingsData, value: BuildingId" data-text-field="Title", data-value-field="Id" data-value-primitive="true"></select></script>What I'd like to achieve is that a building could be selected only once.
For example, I have 3 elements in the Buildings array; so after I select a value in the first dropdown, it should disappear from the two remaining.
When I reset the selection, the previously selected value should appear in all dropdowns again.
But I am confused what is the best way to implement such a behavior. I'd like to use shared data source (BuildingsData will never be changed) and cause as little refresh operations as possible.
Thanks.
Hello
Is it possible to make the scheduler auto scroll when dragging an event?
With "autoScroll: true" on a kendoDraggable object it works for items dragged in to the scheduler from a grid.
But how can it be done for an event already planned in the scheduler?
Thanks
Bjorn
Hi
in a TreeList (and in Angular TreeView) it is possible to drag a whole branch to a new parent node.
Is there a work-around to achieve this with the TreeView Control?
Regards
Alex
I'm currently facing the problem that I have a splitter in a tab of a tabstrip containing a treeview, listview and treelist. First I select an item from the treeview. The change trigges a filtering of the listview. Then I doubleclick an item of the listview that triggers a filter of the treelist. At the same time the filter/selection of the treeview and listview resets and I have no idea why. And it happens as soon as I do this:
var f = $("#treelist").getKendoTreeList().dataSource;f.filter( { "field": "Status", "operator": "eq", "value": "!" });