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)