Hello All !
First of all I want to say that you are doing a great job with Kendo ! It is a AWESOME framework.
BUT, before I buy a license, I need to know if I will be able to migrate my currently running app to kendo.
I must confess that I am not a javascript master, I am a OK developer, my focus was always PHP...
The part of my app that is giving me headaches is the javascript templates.
My app strongly rely on templates. Mostly to build complex html forms. Also, it is important to say, that my app uses the SINGLE PAGE structure, so, the javascript is loaded only once into the page.
Currently I use Boris Moore plugin, called jQuery tmpl. (https://github.com/BorisMoore/jquery-tmpl)
I will show you the logic I use in my app, so you can tell me if I can do the same with KendoUI templating engine.
First of all, I make a AJAX request to get from php a JSON structure of my form (for this example I will make it a JS array)
This is the object:
var form = [ { method: "post", action: "save.php", id: "new_form", title: "Add new invoice", sections: [ {name: "Details", id : "Details", fields : [ { name: "Client Name", type: "Text" }, { name: "Client Address", type: "Text" }, { name: "Client Sex", type: "Radio", options: [ { name: "Male", value: "1" }, { name: "Female", value: "2" } ] } ] } ] }];
OK, now, this are the templates that are ALL defined in a javascript loaded once.
I am showing a basic example, made only for this post, I didnt even test it, in my app it is MUCH more complex
01.var form_wrapper = "<form> {{if method}} method='{{>method}}' {{/if}} {{if action}} action='{{>action}}' {{/if}} id='{{>id}}' <h3>{{>title}}</h3> {{for sections tmpl='#form_section'/}} </form>";02.var form_section = "<h4 id='{{>id}}'>{{>name}}</h4> {{for fields tmpl='#form_field'/}} ";03.var form_field_wrapper = "<div> {{for this tmpl = formInputTemplate( this.type ) /}} </div>";04. 05.var form_field_text = "<legend>{{>name}}</legend><input type='text' name='{{>name}}' >";06.var form_field_radios = "<legend>{{>name}}</legend><input type='radio' name='{{>name}}' >";07. 08.$.templates("form_wrapper", form_wrapper);09.$.templates("form_section", form_section);10.$.templates("form_field_wrapper", form_field_wrapper);11.$.templates("form_field_wrapper", form_field_text);12.$.templates("form_field_wrapper", form_field_radios);13. 14.function formInputTemplate(input) {15. 16. if (input.type === "1")17. var template = 'form_field_text';18. 19. if (input.type === "2")20. var template = 'form_field_radios';21. 22. return template;23.}24. 25.$("#form").html(26. $.templates.form_wrapper.render(form)27.);The main part of the code is when, to determine the INPUT template, it will run a function that will return the tamplate name that must be used for that input based on its TYPE.
My question: If you show me how this example would run with kendo template engine, I would be able to make my whole app run with it !!!
Thank you VERY MUCH !

Hi all,
I am using the Kendo UI Window now, for the resize function, can I just resize the window in a special direction?
For example, I just want the window can resize east or south so that the window's location not change.
I find there is a resizingDirection property on the. I try to judge it on the Window's resize event, but it not work.
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