I have a model, and I need a field to store an array of objects, for which I don't know the structure.
Extend the underlying Schema with a mixed type does not work wither
var Schema = mongoose.Schema;
MyList.schema.add({
ImageData: {type:Schema.Types.Mixed}, // for storing entire JS objects
});
The data I wanna save
ImageData : [
{
"Uri":"Test.com",
"Hash":"42e04950d6f11cd5350e3179083c7c7f",
"Path":"/public/server/img/de29d68ab3594032bef70ead0b0d8fc2.jpg"
},
{
"Uri":"Test.com",
"Hash":"42e04950d6f11cd5350e3179083c7c7f",
"Path":"/public/server/img/de29d68ab3594032bef70ead0b0d8fc2.jpg"
}
]
My Model
Data.add({
name: { type: String, required: false },
Type: { type: Types.Select, options: 'New, Used,', index: true },
ImageData: { type: Types.TextArray },
content: {
brief: { type: Types.Html, wysiwyg: true, height: 150 },
extended: { type: Types.Html, wysiwyg: true, height: 400 },
},
});
Related
I am working on a project in which I need to display List of objects in Kendo Grid.
below is the code for data binding.
$("#GridProperty").kendoGrid({
dataSource: {
transport: {
read: {
dataType: "json",
url: $_BindPropertyData,
data: { "LegalEntityId": LegalEntityId, "DatasetId": DatasetId },
async: true,
}
},
schema: {
model: {
fields: {
GeoId: { type: "int" },
GeoDescription: { type: "string" },
GeoAbbreviation: { type: "string" },
//ComponentDesc: { type: "string", from: "CompModelList.ComponentDesc" },
Id: { type: "int" },
Amount1: { type: "decimal", from: "CompModelList.SaDataModel.Amount1" },
Amount2: { type: "decimal"}
//lstcompModel: {type: ""}
}
}
},
},
noRecords: {
template: "<p style='margin-top:5px;'>There are currently no items available<p>"
},
height: 525,
reorderable: true,
groupable: true,
sortable: true,
filterable: true,
resizable: true,
columnMenu: true,
selectable: "row",
dataBound: function () {
},
columns: Columns
});
Description :
I am returning list of objects as json from my Action . but i am not able to bind the list of objects in kendo grid.
I am breaking my head for last four days. Please help.
Thanks
I am using jsGrid for showing data from database. But I am stuck with a problem.
All text field or select field are rendering correctly. But I need to add a custom field with functionality to add image on edit (when no image added) a row and show image on the field while page load using jsGrid. I searched the web but not find any solution to solve my issue.
This is how it could be implemented:
var data = [
{ Name: "John", Img: "http://placehold.it/250x250" },
{ Name: "Jimmy", Img: "http://placehold.it/250x250" },
{ Name: "Tom", Img: "http://placehold.it/250x250" },
{ Name: "Frank", Img: "http://placehold.it/250x250" },
{ Name: "Peter", Img: "http://placehold.it/250x250" }
];
$("#dialog").dialog({
modal: true,
autoOpen: false,
position: {
my: "center",
at: "center",
of: $("#jsgrid")
}
});
$("#jsgrid").jsGrid({
autoload: true,
width: 350,
filtering: true,
inserting: true,
controller: {
loadData: function(filter) {
return !filter.Name
? data
: $.grep(data, function(item) { return item.Name.indexOf(filter.Name) > -1; });
// use ajax request to load data from the server
/*
return $.ajax({
method: "GET",
url: "/YourUrlToAddItemFilteringScript",
data: filter
});
*/
},
insertItem: function(insertingItem) {
var formData = new FormData();
formData.append("Name", insertingItem.Name);
formData.append("Img[]", insertingItem.Img, insertingItem.Img.name);
return $.ajax({
method: "post",
type: "POST",
url: "/YourUrlToAddItemAndSaveImage",
data: formData,
contentType: false,
processData: false
});
}
},
fields: [
{
name: "Img",
itemTemplate: function(val, item) {
return $("<img>").attr("src", val).css({ height: 50, width: 50 }).on("click", function() {
$("#imagePreview").attr("src", item.Img);
$("#dialog").dialog("open");
});
},
insertTemplate: function() {
var insertControl = this.insertControl = $("<input>").prop("type", "file");
return insertControl;
},
insertValue: function() {
return this.insertControl[0].files[0];
},
align: "center",
width: 120
},
{ type: "text", name: "Name" },
{ type: "control", editButton: false }
]
});
Checkout the working fiddle http://jsfiddle.net/tabalinas/ccy9u7pa/16/
According issue on GitHub: https://github.com/tabalinas/jsgrid/issues/107
See this question with no response: Kendo Grid does not update the grid with newly created id after creation
When creating a new link, my method is hit, and I return the full item with the ID set:
[HttpPost]
public JsonResult Create(string LINK_TEXT, string HREF, string CATEGORY)
{
var link = new LinkDTO {LINK_TEXT = LINK_TEXT, HREF = HREF, CATEGORY = CATEGORY};
var insertedLink = LinkService.Create(link);
return Json(new[] {insertedLink}, JsonRequestBehavior.AllowGet);
}
In the client, the response is:
{"ID":86,"LINK_TEXT":"Test2","HREF":"http://www.google.com","CATEGORY":"Category1"}
I've also tried only returning the ID:
{"ID":86}
Upon inspection of the kendo data:
CATEGORY: "Category1"
HREF: "http://www.google.com"
ID: 0
LINK_TEXT: "Test2"
_events: Object
dirty: false
id: 0
parent: function (){return r}
uid: "4739cc3d-a270-44dd-9c63-e9d378433d98"
The ID is 0. When I try to edit this link it thinks it is new, so it calls create again, thus duplicating the link.
Here is my grid definition:
$(document).ready(function () {
$("#link-results").kendoGrid({
dataSource: {
transport: {
create: {
url: '#Url.Action("Create", "Link")',
dataType: 'json',
type: 'POST'
},
read: {
url: '#Url.Action("Read", "Link")',
dataType: 'json',
type: 'GET',
data: {
CATEGORY: '#Model.CategoryName'
}
},
update: {
url: '#Url.Action("Update", "Link")',
dataType: 'json',
type: 'POST',
data: {
CATEGORY: '#Model.CategoryName'
}
},
destroy: {
url: '#Url.Action("Delete", "Link")',
dataType: 'json',
type: 'POST'
}
},
pageSize: 10,
schema: {
data: "Links",
total: "ResultCount",
model: {
id: "ID",
fields: {
ID: {type: "number"},
LINK_TEXT: { type: "string", required: true },
HREF: { type: "string", defaultValue: "", validation: { required: true } },
CATEGORY: { type: "string", defaultValue: '#Model.CategoryName', editable: false }
}
}
}
},
pageable: true,
toolbar: ["create"],
columns: [
{ field: "ID", hidden: true },
{ field: "LINK_TEXT", title: "Name", width: "40px"/*, template: "<a href='#=HREF#'>#=LINK_TEXT#</a>"*/ },
{ field: "HREF", title: "Link", width: "100px",filterable: false/*, template: "<a href='#=HREF#'>#=HREF#</a>"*/ },
{ field: "CATEGORY", title: "Category", width: "50px", filterable: false},
{
command: [
{ name: "edit", text: "" },
{ name: "destroy", text: "" }
],
title: " ",
width: "70px"
}
],
editable: "inline",
filterable: true,
sortable: "true"
});
I added the ID: {type: "number"}, part in an attempt to get this to work, I realize I should not need this in my fields definition since it is defined with id: "ID".
I figured out what the problem was, here is the text from another answer I provided regarding the same issue (see Kendo Grid does not update the grid with newly created id after creation):
I've had the same problem and think I may have found the answer. If in the schema you define the object that holds the results, you must return the result of the created link in that same object. Example:
schema: {
data: "data",
total: "total", ....
}
Example MVC method:
public JsonResult CreateNewRow(RowModel rowModel)
{
// rowModel.id will be defaulted to 0
// save row to server and get new id back
var newId = SaveRowToServer(rowModel);
// set new id to model
rowModel.id = newId;
return Json(new {data= new[] {rowModel}});
}
I am trying to fetch data from store.and i want to use it on my table layout in an extjs panel but always get an empty string though the data is printed in the console. Any pointers would be much appreciated.
<code>
Ext.onReady(function(){
Ext.define('Account', {
extend: 'Ext.data.Model',
fields: [
'id',
'name',
'nooflicenses'
]
});
var store = Ext.create('Ext.data.Store', {
model: 'Account',
autoSync: true,
proxy: {
type: 'ajax',
api: {
read: "accounts"
},
reader: {
type: 'json',
root: 'Account',
successProperty: 'success',
messageProperty: 'message',
totalProperty: 'results',
idProperty: 'id'
},
listeners: {
exception: function(proxy, type, action, o, result, records) {
if (type = 'remote') {
Ext.Msg.alert("Could not ");
} else if (type = 'response') {
Ext.Msg.alert("Could not " + action, "Server's response could not be decoded");
} else {
Ext.Msg.alert("Store sync failed", "Unknown error");}
}
}//end of listeners
}//end of proxy
});
store.load();
store.on('load', function(store, records) {
for (var i = 0; i < records.length; i++) {
console.log(store.data.items[0].data['name']); //data printed successfully here
console.log(store.getProxy().getReader().rawData);
console.log(store);
};
});
function syncStore(rowEditing, changes, r, rowIndex) {
store.save();
}
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
saveText: 'Save',
listeners: {
afteredit: syncStore
}
});
var grid = Ext.create('Ext.panel.Panel', {
title: 'Table Layout',
width: 500,
height:'30%',
store: store,
layout: {
type: 'table',
// The total column count must be specified here
columns: 2,
tableAttrs: {
style: {
width: '100%',
height:'100%'
}
},
tdAttrs: {
style: {
height:'10%'
}
}
},
defaults: {
// applied to each contained panel
bodyStyle:'border:0px;',
xtype:'displayfield',
labelWidth: 120
},
items: [{
fieldLabel: 'My Field1',
name :'nooflicenses',
value: store //How to get the data here
//bodyStyle:'background-color:red;'
},{
fieldLabel: 'My Field',
name:'name',
value:'name'
}],
renderTo: document.getElementById("grid1")
});
});
</code>
Ext.grid.Panel control is totally configurable so it allows to hide different parts of the grid. In our case the way to hide a headers is adding property: hideHeaders:
Ext.create("Ext.grid.Panel", {
hideHeaders: true,
columns: [ ... ],
... other options ...
});
If you still would like to adopt another solution, the more complex solution I have think about is the use of XTemplate for building table dynamically. (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.XTemplate). In this approach you write the template describing how the table will be built.
Otherwise, I still recommend you to deal with the former solution rather than the latter one. The latter approach opposes the basic idea of Sencha ExtJS: use ExtJS library's widgets, customize them in the most flexible way and then automate them by creating store and model.
The most "native" way to show data is by use Ext.grid.Panel.
Example:
Ext.application({
name: 'LearnExample',
launch: function() {
//Create Store
Ext.create ('Ext.data.Store', {
storeId: 'example1',
fields: ['name','email'],
autoLoad: true,
data: [
{name: 'Ed', email: 'ed#sencha.com'},
{name: 'Tommy', email: 'tommy#sencha.com'}
]
});
Ext.create ('Ext.grid.Panel', {
title: 'example1',
store: Ext.data.StoreManager.lookup('example1'),
columns: [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
],
renderTo: Ext.getBody()
});
}
});
The grid can be configured in the way it mostly customized for user's needs.
If you have a specific reason why to use Ext.panel.Panel with a table layout, you can use XTemplate, but it more complicate to bind the data.
i have a paging grid and some function that load a new store to the grid, but when i click on the next page it reverts back to the initial store
the grid:
Ext.define('Pedido', {
extend: 'Ext.data.Model',
fields: [{
name: 'ID',
type: 'int'
}, {
name: 'Nome',
type: 'string'
}, {
name: 'CPF/CNPJ',
type: 'string'
}, {
name: 'Data',
type: 'datetime'
}, {
name: 'TipoPagamento',
type: 'string'
}, {
name: 'StatusPagamento',
type: 'string'
}, {
name: 'TipoPagamento',
type: 'string'
}, {
name: 'Total',
type: 'string'
}],
idProperty: 'ID'
});
var store = Ext.create('Ext.data.Store', {
pageSize: 10,
model: 'Pedido',
remoteSort: true,
proxy: {
type: 'ajax',
url: 'http://localhost:4904/Pedido/ObterPedidosPorInquilino',
reader: {
root: 'Items',
totalProperty: 'TotalItemCount'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
id: 'grid',
width: 500,
height: 250,
title: 'Array Grid',
store: store,
loadMask: true,
viewConfig: {
id: 'gv',
trackOver: false,
stripeRows: false
},
columns: [{
id: 'gridid',
text: "ID",
dataIndex: 'ID',
width: 50
}],
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Exibindo {0} - {1} de {2}',
emptyMsg: "Nenhum pedido"
}),
renderTo: 'pedidos'
});
store.load({
params: {
start: 0,
limit: 10
}
});
and the function that set the new store
store.load({
params: {
param: newparam
}
});
also, when I call this function, I would like to set the label on the viewing page x of y back to 1, since setting a new store takes you back to the first page
thanks again
I am not sure why you are replacing the store when you page through your data..but notice the paging toolbar is bound to the store as well as the grid itself. If you are going to change the underlying store here you will need to rebind columns, and the paging bar. Try the reconfigure method http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Table-method-reconfigure
Again I think you need to reevaluate your use case and perhaps think of a different way of accomplishing what you are doing.