Hello,
I need advice how to approach one nice problem... I have to generate kind of complex form based on very dynamic xml (that will most probably end up as my model entities).
The main question would be what do you think it is the easiest way to dynamically add kendoUi form elements with their validations, bindings etc on the form ?
Thank you in advance.
_grid.kendoGrid({ navigatable: true, pageable: true, editable: true, toolbar: ["create", "save"], columns: (_columns.length > 0) ? _columns : null, dataSource: { data: (_view.data > 0) ? _view.data : null, pageSize: 100, schema: { model: { id: "id", fields: _spec } } },});var _filter = null;var _columns = new Array();var _spec = new Array();for (_field in _view.fields) { if (typeof _view.fields[_field] == 'undefined') continue; var _f = _view.fields[_field]; if (_f.type == 'DropDown') { _filter = { field: _f.key, title: _f.title, editor: setEditor(_f) }; _spec[_f.key] = _f.key; } else { _filter = { field: _f.key, title: _f.title }; _spec[_f.key] = { type: getKendoFieldType(_f), //editable: true, validation: { required: ((_f.required) ? true : false) //min: 1 } }; } _columns.push(_filter);}_command = { command: 'destroy', title: ' ', width: 110};_columns.push(_command);setEditor: function (_field) { var _context = this; return function (container, options) { $.post('/api/', { method: 'GET', api: context.api + _field.populateapi, json: '' }, function (data) { if (!_context.valid(data, true)) return; var _data = $.parseJSON(data); $('<input data-bind="value:' + options.field + '" />') .appendTo(container) .kendoComboBox({ autobind: false, dataValueField: 'id', dataTextField: 'datatext', dataSource: _data }); }); }},<div> <input type="search" id="fieldSearch" placeholder="search..."> <div id="listView" style="height: 325px; overflow: auto;"> </div> <div class="k-pager-wrap"> <div id="pager"> </div> </div> </div>Jquerry:
$(document).ready(function () {}$("#fieldSearch").live("change", Search);
function Search() { var tSearchText = $("#fieldSearch").val(); var dataSource = new kendo.data.DataSource({ transport: { read: { url: "http://...." + tSearchText, dataType: "json" } }, pageSize: 12 }); $("#pager").kendoPager({ dataSource: dataSource }); $("#listView").kendoListView({ dataSource: dataSource, selectable: "single", dataBound: onDataBound, change: function (e) { onChange(e) }, template: kendo.template($("#Template").html()) }); }
<script type="text/x-kendo-tmpl" id="Template"> <div style="height:27px; cursor: pointer;"> <span>${Name}</span> </div> </script>
I am completely new to KendoUI and am trying to understand the grid aggregates example. I have looked at the example code. Although the example code is very helpful, it doesn't always clarify what one can and cannot do with aggregated data in a grid.
Suppose I have data with fields a,b,c,d,e,f. I want to group the data on field a, but
display in the groupheadertemplate only fields b & c and an aggregate based on field d . In the main grid, I want to display d, e, & f in
columns, but nothing else. Is this
feasible with the current kendo grid? (I assume that templates might be required to achieve this)