I'm trying to write a group header template in Kendo Grid with title and button .
I have something like this:
group: { field: "ManagerName" }
},
columns: [
{ field: "Id", title: "Id" },
{ field: "ClientName", title: "Klient" },
{ field: "EngagementName", title: "Sprawa" },
{ field: "SubprojectName", title: "Podsprawa" },
{ field: "ManagerName", title: "Manager", groupHeaderTemplate: "#= value # <button class='rounded-button rounded-button-blue' type='button' onclick='confirmGroup()'>#Resources.Lang.confirmGroup</button>" },
{ field: "ManagerId", title: "ManagerId", hidden: true },
{ field: "LocationName", title: "Lokalizacja" },
{ field: "Signatures", title: "Ostatnia sygnatura" },
{ field: "LogicalState", title: "Stan" }
]
And I would like to call functions confirmGroup with parameter Manager Id.
Unfortunettly something like:
onclick='confirmGroup(#=ManagerId#)'
Doesn't work.
I was looking for solution but didn't find anything.
Could anyone tell me how to call this method, please?
Surround your parameter with escaped " and passing data.ManagerId will do the trick.
onclick='confirmGroup(\"#=data.ManagerId#\")'
Here I am formatting a couple of columns, but I have to repeat the field names (MyDate,MyDate2) inside the template in order to get the data.
$("#grid").kendoGrid({
dataSource: {
data: data
},
columns: [
{ field: "MyDate",
title: "My Date",
template: "#=kendo.toString(kendo.parseDate(new Date(MyDate)), 'dd/MM/yyyy HH:mm:ss')#" },
{ field: "MyDate2",
title: "My Date 2",
template: "#=kendo.toString(kendo.parseDate(new Date(MyDate2)), 'dd/MM/yyyy HH:mm:ss')#" }
]
});
I want to be able to define the template elsewhere:
var dateTemplate =
"#=kendo.toString(kendo.parseDate(new Date(?)), 'dd/MM/yyyy HH:mm:ss')#"
$("#grid").kendoGrid({
dataSource: {
data: data
},
columns: [
{ field: "MyDate",
title: "My Date",
template: dateTemplate },
{ field: "MyDate2",
title: "My Date 2",
template: dateTemplate }
]
});
So that I do not need to repeat the column's field name and can reuse templates.
What can I replace ? with in order to make this work?
Is there is any way to create widgets in kendo grid cell template? here is the sample code.
columns: [{
field: "Name",
title: "Contact Name",
width: 100
},
{
field: "Cost",
title: "Cost",
template: "<input value='#: Cost #'> </input>",// input must be an numerical up down.
}]
I want to create a numerical up down for cost column.
here is the demo
Use the "editor" property in your field definition. You have to specify a function that will append the widget to the row/bound cell.
Here's an example where I put a drop downlist in each of the rows of a grid:
$('#grdUsers').kendoGrid({
scrollable: true,
sortable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: [
{ field: "Id", title: "Id", hidden: true },
{ field: "Username", title: "UserName" },
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" },
{ field: "Email", title: "Email" },
{ field: "Team", title: "Team", editor: teamEdit, template: "#=Team ? Team.Name : 'Select Team'#" },
{ command: { text: "Save", click: saveEmployee }, width: '85px' },
{ command: { text: "Delete", click: deleteEmployee }, width: '85px' }
],
editable: true,
toolbar: [{ name: "create-user", text: "New Employee" }]
});
function teamEdit(container, options) {
$('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
optionLabel: {
Name: "Select Team",
Id: ""
},
dataTextField: "Name",
dataValueField: "Id",
dataSource: model.getAllTeams()
});
}
You can define kendo numeric textbox binding in template. Also define databound function where explictly call kendo.bind method.
I have updated your fiddle as below:
template: "<input value='#=Cost#' data-bind='value:Cost' type='number' data-role='numerictextbox' />"
Updated fiddle
<kendo-grid-column title="Billed" field="billed" class="text-center" id="">
<ng-template kendoGridCellTemplate let-dataItem="dataItem">
<input type="text" width="10px" value="45">
<a class="anchor_pointer">{{dataItem.billed }}</a>
</ng-template>
</kendo-grid-column>
So I have a JsonRest store with a dgrid attached to it.
I use php and the yii framework.
If I fire a PUT I get a response formatted like this:
[{id: 1, abbreviation: 'FL' }]
Is that the correct form for the row to be updated?
Or should I get only {id: 1, abbreviation: 'FL' } as a response?
Thanks!
Update #1:
<div
data-dojo-type="dijit.MenuBar"
data-dojo-props="region:'top', layoutPriority:2, style:'margin-top: 10px'">
<div
id="OrderButton"
data-dojo-type="dijit.form.Button">
<span>Submit Order</span>
<script type="dojo/on" data-dojo-event="Click">
handleFinalizeOrder();
</script>
</div>
<span class="right">Package Price: 20$ + 1$/pic</span><span id="results"></span>
</div>
<div id="imageList"></div>
<?php $this->beginDojoScript() ?>
<script type="text/javascript">
require([
'dojo/parser',
'dojo/dom-construct',
'dojo/dom-style',
'dojo/_base/declare',
'dojo/_base/xhr',
'dojo/_base/loader',
'dojo/_base/Deferred',
'dojo/data/ItemFileWriteStore',
'dojo/store/util/QueryResults',
'dijit/Toolbar',
'dijit/Tree',
'dijit/TooltipDialog',
'dijit/layout/StackContainer',
'dijit/layout/ContentPane',
'dijit/form/Button',
'dijit/tree/ForestStoreModel',
'dijit/form/Form',
'dijit/form/ValidationTextBox',
'dijit/form/DropDownButton',
'dijit/form/CheckBox',
'dojox/form/Uploader',
'dojox/form/uploader/plugins/IFrame',
'dgrid/OnDemandGrid',
'dgrid/Selection',
'dojo/on',
'dgrid/editor',
'dgrid/List',
'dgrid/tree',
'dgrid/Keyboard',
'dijit/form/HorizontalSlider',
'dijit/form/NumberSpinner',
'dgrid/OnDemandGrid',
'dojo/store/Memory',
'dojo/store/Observable',
'dijit/form/FilteringSelect',
'dojo/data/ObjectStore',
'dijit/Dialog',
'dojo/store/Cache',
'dojo/store/JsonRest',
'dojo/domReady!'
], function(parser, domConstruct, domStyle, declare, xhr,
loader, Deferred,ItemFileWriteStore, QueryResults, Toolbar, Tree, TooltipDialog,
StackContainer, ContentPane, Button,
ForestStoreModel, Form, ValidationTextBox, DropDownButton, CheckBox,
Uploader, UploaderIFramePlugin, OndemandGrid, Selection, on, editor,
List, tree, Keyboard, Slider, NumberSpinner, Grid, Memory,
Observable, FilteringSelect, ObjectStore, Dialog, Cache, JsonRest) {
/* Declaration */
filetypeStore = Observable(new Memory({
idProperty: "pictype",
labelProperty: "name",
data: [
{ "pictype": "1", "name": "Paperpic" },
{ "pictype": "3", "name": "DVD" }
]
}));
filesubtypeStore = Observable(new Memory({
idProperty: "picsubtype",
labelProperty: "name",
data: [
{ "picsubtype": "1", "pictype": "1", "name": "10x15" },
{ "picsubtype": "2", "pictype": "1", "name": "13x18" },
{ "picsubtype": "3", "pictype": "1", "name": "20x30" },
{ "picsubtype": "4", "pictype": "1", "name": "30x45" },
{ "picsubtype": "10", "pictype": "3", "name": "DVD" }
]
}));
var columns = [
{
label: 'Picture',
field: 'filename',
formatter: function(filename){
return '<div class="icon" style="background-image:url(<?php echo Yii::app()->baseUrl ?>/images/client/thumbnails/' + filename + ');"><a class="iconlink" href="<?php echo Yii::app()->baseUrl ?>/images/client/' + filename + '"> </a></div>';
}
},
editor({
label: 'Type of pic', autoSave: false, field: 'pictype',
widgetArgs: {
store: filetypeStore, autoComplete: true, required: true, maxHeight: 150, style: "height: 20px; width: 120px;"
},
}, FilteringSelect),
editor({
label: 'Size of pic', autoSave: true, field: 'picsubtype',
widgetArgs: {
store: filesubtypeStore, autoComplete: true, required: true, maxHeight: 150, style: "height: 20px; width: 120px;"
},
}, FilteringSelect),
{
label: 'Price/pcs',
field: 'picprice',
formatter: function(picprice){
return '<span class="pic_price">' + picprice + '</span>';
}
},
editor({
label: 'Number of pics',
autoSave: true,
field: 'piccount',
widgetArgs: {
class: 'pic_count',
style: 'width: 4em;',
constraints: {
min:1,
max:100,
places:0
}
},
}, NumberSpinner),
];
/* Model */
collectionId = <?php echo $colID; ?>;
var userMemoryStore = Memory();
var userJsonRestStore = JsonRest({idProperty: "id", target: "<?php echo $this->createUrl('/orderCollectionOrder/handleOrderedImages') ?>?id=" + collectionId + "&picid="});
var imageStore = Cache(userJsonRestStore, userMemoryStore);
window.grid = new (declare([editor, ObjectStore, OndemandGrid, Selection]))({
store: imageStore,
getBeforePut: false,
columns: columns
}, "imageList");
parser.parse();
grid.on(".dgrid-content .iconlink:click", function (evt) {
evt.preventDefault();
var data = dojo.getAttr(this, "href");
var dlg = new Dialog({
title: "Pic: " + data.substr(15),
className:"dialogclass",
content: '<img src="' + data + '">'
});
dlg.show();
});
});
</script>
<?php $this->endDojoScript() ?>
So, if I change the second filteringselect, the put fires correctly.
Contents of put in firebug:
{"id":"1","categoryId":"2","collectionId":"146","fileid":"20737","pictype":"3","picsubtype":"2","filename":"pic_143_resize.jpg","filetype":"DVD","filesubtype":"30x45","picprice":"2000","piccount":"2"}
Response:
{"id":"1","categoryId":"2","collectionId":"146","fileid":"20737","pictype":"3","picsubtype":"2","filename":"pic_143_resize.jpg","filetype":"DVD","filesubtype":"13x18","picprice":"300","piccount":"2"}
So I get the response, but the dgrid does not get updated...
Should I add an Observable store as well?
Thanks!
This actually comes down to logic in dojo/store/Observable in this case. Observable will do one of two things in response to put calls:
If the server request resolves to an object, this object will be passed to notify (which the grid will pick up)
Otherwise, the object originally passed to put will be passed through to notify
You're falling into the first case, since arrays are objects - in which case, as you suspected, you'll want just the object itself, not an array. The array doesn't make much sense anyway, since put operates on a single item.
I am not able retrieve records from complex json objects but i am able to get the data when using an TPL.
Please see the below example codes:
JSON:
{
"lists": [
{
"title": "Groceries",
"id": "1",
"items": [
{
"text": "contact solution - COUPON",
"listId": "1",
"id": "4",
"leaf": "true"
},
{
"text": "Falafel (bulk)",
"listId": "1",
"id": "161",
"leaf": "true"
},
{
"text": "brita filters",
"listId": "1",
"id": "166",
"leaf": "false"
}
]
}
]
Model:
Ext.regModel("TopModel",
{
fields: [
{ name: 'title', type: 'string' },
{ name: 'id', type: 'string' },
],
hasMany: [
{ model: 'SubModel', name: 'items' }
],
proxy: {
type: 'ajax',
url : 'test/lists.json',
actionMethods: {
create: 'POST',
destroy: 'POST',
read: 'POST',
update: 'POST'
},
reader: {
type: 'json',
root: function(data) {
return data.lists || [];
}
}
}
});
Ext.regModel("SubModel",
{
fields: [
{ name: 'text', type: 'string'},
{ name: 'listId', type: 'string'},
{ name: 'id', type: 'string'},
{ name: 'leaf', type: 'string'}
]
});
In my View file, i have defined the store as below.
this.stores = new Ext.data.Store({
clearOnPageLoad: false,
autoLoad:true,
model:'TopModel',
getGroupString: function(record) {
return record.get('leaf');
}
});
});
I am not able to retrieve the values for record.get('leaf') as this refers to the child model items. When I tried to print it, it prints as undefined.
How to access the child attributes? Here 'items' is listed as an array.
I tried to display the data using list as below. All the records are displayed but the problem is that it is picked as one whole item instead of separate list for each item.
var list = new Ext.List({
cls: 'big-list',
grouped : true,
emptyText: '<div>No data found</div>',
itemTpl: ['<div><tpl for="items">',
'<div>',
'{id} {text}',
'</div>',
'</tpl></div>',
],
store: this.stores,
listeners: {
itemtap: this.onListItemTap,
scope: this
}
});
Kindly help me on how to get the list items to be displayed as individual records.
you can use online json parser(http://json.parser.online.fr/) to parse json xml from parser data you easily seprate objects and arrays and you get all data which are require for you..i hope this help you