Related
I am trying to use Bootstrap 3 datetimepicker. But the glyphicon calendar doesn't open. See this fiddle:
http://jsfiddle.net/vqsss5fx/
$(function () {
var data = [
{ rank: 1, company: 'Exxon Mobil', DatePicker: '04/04/1990 00:00', revenues: '339938.0', profits: '36130.0' },
{ rank: 2, company: 'Wal-Mart Stores', DatePicker: '05/03/2014 00:00', revenues: '315654.0', profits: '11231.0' },
];
var obj = {
title: "ParamQuery Grid with JSON Data",
scrollModel:{autoFit:true, theme:true}
};
obj.colModel = [
{ title: "Rank", width: 100, dataType: "integer", dataIndx: "rank" },
{ title: "Company", width: 200, dataType: "string", dataIndx: "company" },
{ title: "DatePicker", width: 200, dataType: "string", dataIndx: "date",editable:false,
render : function(){
var date = '<div class="form-group" style="width:150px;margin-left:50px;text-align:center"><div class="input-group date" id="datetimepicker123"><input type="text" value="04/05/2012 00:00" class="form-control"><span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span></div></div>';
return date;
}
},
{ title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right", dataIndx: "revenues" },
];
$('body').on('mouseover','.input-group',function() {
$("#datetimepicker123").datetimepicker();
});
obj.dataModel = { data: data };
$("#grid_json").pqGrid(obj);
});
<div id="grid_json" style="margin:100px;"></div>
I see three problems:
You have multiple HTML elements with the same ID (#datetimepicker123): please avoid it!
Instead of $("#datetimepicker123").datetimepicker(); you should use $(".input-group.date").datetimepicker(); to add a timepicker to every date input.
The timepicker appears, but it's truncated by the HTML Cell (you can see the arrow under the input field). Some CSS customization might be required:
.pq-grid-cell{
overflow:visible;
}
Result: http://jsfiddle.net/vqsss5fx/3/
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>
Is it possible to create a Kendo UI DataViz chart from a remote datasource with a structure such as
"gender": [
{"male": 23421},
{"female": 24376},
{"unknown": 324}
],
Instead of using (from the example in the documentation)
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
field: "year"
},
series: [
{ field: "value" }
],
dataSource: [
{ year: "2012", value: 1 },
{ year: "2013", value: 2 }
]
});
</script>
I would like to use a data source formatted as
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
field: "year"
},
series: [
{ field: "value" }
],
dataSource: [
{ "2012": 1 },
{ "2013": 2 }
]
});
</script>
Well, it's a straightforward transformation in Javascript.
convertDataSource = function(dataSource) {
for(i in dataSource) {
(y = {})[dataSource[i].year] = dataSource[i].value;
dataSource[i] = y;
}
return dataSource;
}
convertDataSource([ { year: "2012", value: 1 }, { year: "2013", value: 2 }])
// [ { "2012": 1, "2013": 2}
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 want to read json data from file - content of the json file shown below
{
"form": {
"fields" : [
{
"field":"textfield",
"name": "username",
"constrain": "5-10",
"value": ""
},
{
"field":"textfield",
"name": "password",
"constrain": "5-10",
"value": ""
},
{
"field":"datepickerfield",
"name": "Birthday",
"constrain": "5-10",
"value": "new Date()"
},
{
"field":"selectfield",
"name": "Select one",
"options":[
{"text": "First Option", "value": 'first'},
{"text": "Second Option", "value": 'second'},
{"text": "Third Option", "value": 'third'}
]
},
]
}
}
Model
Ext.define('dynamicForm.model.Form', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'field', type: 'string'},
{name: 'name', type: 'string'},
{name: 'constrain', type: 'string'},
{name: 'value', type: 'string'}
],
hasMany: {model: 'dynamicForm.model.SelectOption', name: 'options'}
}
});
Ext.define('dynamicForm.model.SelectOption', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'text', type: 'string'},
{name: 'value', type: 'string'}
]
}
});
store
Ext.define('dynamicForm.store.FormStore', {
extend : 'Ext.data.Store',
storeId: 'formStore',
config : {
model : 'dynamicForm.model.Form',
proxy : {
type : 'ajax',
url : 'form.json',
reader : {
type : 'json',
rootProperty : 'form.fields'
}
},
autoLoad: true
}
});
This what i tried so for.
var fromval = Ext.create('dynamicForm.store.FormStore');
fromval.load(function (){
console.log(fromval);
// i added register view which having form panel with id "testForm"
Ext.Viewport.add({
xtype : 'register'
});
for(i=0; i< fromval.getCount(); i++) {
console.log("------");
Ext.getCmp('testForm').add({
xtype: fromval.getAt(i).data.field,
label: fromval.getAt(i).data.name,
value: fromval.getAt(i).data.value,
options: [
{text: "First Option", value: "first"},
{text: "Second Option", value: "second"},
{text: "Third Option", value: "third"}
]
});
}
});
two text fileds and date are woking good, but i don't know how to get options for select field from store, just heard coded now.
over all Based on the above json data, i need to create sencha form dynamically.
Better to follow MVC structure:
Create a model:
Ext.define('MyApp.model.FormModel', {
extend: 'Ext.data.Model',
config: {
fields: ["field","name"]
}
});
A store with proxy:
Ext.define('MyApp.store.FormStore',{
extend: 'Ext.data.Store',
config:
{
model: 'MyApp.model.FormModel',
autoLoad:true,
proxy:
{
type: 'ajax',
url : 'FormData.json', //Your file containing json data
reader:
{
rootProperty:'form.fields'
}
}
}
});
The formData.json file:
{
"form": {
"fields" : [
{
"field":"textfield",
"name": "username"
},
{
"field":"textfield",
"name": "password"
},
]
}
}
And then use the FormStore to fill the form data as you need.
Ext.define('MyApp.view.LoginPage', {
extend: 'Ext.form.Panel',
config: {
items:{
xtype:'fieldset',
layout:'vbox',
items:[{
flex:1,
xtype:'textfield',
id:'namefield',
placeHolder:'Username'
},{
flex:1,
xtype:'passwordfield',
id:'passwordfield',
placeHolder:'Password'
}]
},
listeners:{
painted:function()
{
var store=Ext.getStore('FormStore');
while(!store.isLoaded())
{
console.log("loading...");
}
var record=store.getAt(0);
Ext.getCmp('namefield').setValue(record.data.name);
Ext.getCmp('passwordfield').setValue(record.data.password);
}
}
}
});
{
"data":[
{
"xtype":"textfield",
"title":"UserName",
"name": "username"
},
{
"xtype":"textfield",
"title":"password",
"name": "password"
},
{
"xtype":"textfield",
"title":"phone no",
"name": "birthday"
},
{
"xtype":"textarea",
"title":"address",
"name": "address"
}
]
}
Ext.define('dynamicForm.model.FormModel', {
extend: 'Ext.data.Model',
fields: ['field', 'name']
});
Ext.define('dynamicForm.store.FormStore', {
extend : 'Ext.data.Store',
model : 'dynamicForm.model.FormModel',
proxy :
{
type : 'ajax',
url : 'data/user.json',
reader :
{
type : 'json',
rootProperty:'data'
},
autoLoad: true
}
});
Ext.define('dynamicForm.view.DynaForm',{
extend:'Ext.form.Panel',
alias:'widget.df1',
items:[]
});
Ext.application({
name:'dynamicForm',
appFolder:'app',
controllers:['Users'],
launch:function(){
Ext.create('Ext.container.Viewport',{
items:[
{
xtype:'df1',
items:[]
}
]
});
}
});
Ext.define('dynamicForm.controller.Users',{
extend:'Ext.app.Controller',
views:['DynaForm'],
models:['FormModel'],
stores:['FormStore'],
refs:[
{
ref:'form1',
selector:'df1'
}
],
init:function(){
console.log('in init');
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
onPanelRendered: function() {
var fromval=this.getFormStoreStore();
var form=this.getForm1();
fromval.load({
scope: this,
callback: function(records ,operation, success) {
Ext.each(records, function(rec) {
var json= Ext.encode(rec.raw);
var response=Ext.JSON.decode(json);
for (var i = 0; i < response.data.length; i++) {
form.add({
xtype: response.data[i].xtype,
fieldLabel: response.data[i].title,
name: response.data[i].name
});
}
//form.add(Ext.JSON.decode(json).data);
form.doLayout();
});
}
});
}
});
It will be done automatically if you insert it into any extjs component content :
var jsonValues = "{
"form": {
"fields" : [
{
"field":"textfield",
"name": "username"
},
{
"field":"textfield",
"name": "password"
},
]
}
}";
var panel = new Ext.Panel({
id : 'myPanel',
items : [jsonValues]
});
panel.show();