Related
How to define a custom filter-function for a column or cell? Just as an example, assume we have a text value and in the header there is a search input
How to tell the gridview to call a function
class FooComponent {
protected doSomeFilter (value: string, searchQuery: string) {
if (someConditions(value, searchQuery)) {
return true;
}
return false;
}
}
And I would expect to use it like this:
<dxi-column
dataField="myFooProperty"
[(customFilter)]='doSomeFilter'
></dxi-column>
But the GridView doesn't support customFilter method, and nothing similar. Do you know how to achieve such custom filtering in devexpress, looks very simple but I'm struggling with this for hours. Thank you in advance.
This example shows how to filter data using the filter panel. You can use its check box to enable/disable the current filter expression, and clicking on this expression opens the integrated filter builder. Note that changes made in it are reflected in the filter row and header filter, and vice versa, from (https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/FilterPanel/jQuery/Light/), Please see this:
$("#gridContainer").dxDataGrid({
dataSource: orders,
columnsAutoWidth: true,
filterRow: { visible: true },
filterPanel: { visible: true },
headerFilter: { visible: true },
filterValue: [["Employee", "=", "Clark Morgan"], "and", ["OrderDate", "weekends"]],
filterBuilder: {
customOperations: [{
name: "weekends",
caption: "Weekends",
dataTypes: ["date"],
icon: "check",
hasValue: false,
calculateFilterExpression: function() {
return [[getOrderDay, "=", 0], "or", [getOrderDay, "=", 6]];
}
}]
},
filterBuilderPopup: {
position: { of: window, at: "top", my: "top", offset: { y: 10 } },
},
scrolling: { mode: "infinite" },
showBorders: true,
columns: [{
caption: "Invoice Number",
dataField: "OrderNumber",
dataType: "number",
headerFilter: {
groupInterval: 10000
}
}, {
dataField: "OrderDate",
dataType: "date"
}, {
dataField: "SaleAmount",
dataType: "number",
format: "currency",
editorOptions: {
format: "currency",
showClearButton: true
},
headerFilter: {
dataSource: [ {
text: "Less than $3000",
value: ["SaleAmount", "<", 3000]
}, {
text: "$3000 - $5000",
value: [["SaleAmount", ">=", 3000], ["SaleAmount", "<", 5000]]
}, {
text: "$5000 - $10000",
value: [["SaleAmount", ">=", 5000], ["SaleAmount", "<", 10000]]
}, {
text: "$10000 - $20000",
value: [["SaleAmount", ">=", 10000], ["SaleAmount", "<", 20000]]
}, {
text: "Greater than $20000",
value: ["SaleAmount", ">=", 20000]
}]
}
}, {
dataField: "Employee",
dataType: "string"
}, {
caption: "City",
dataField: "CustomerInfo.StoreCity",
dataType: "string"
}, {
caption: "State",
dataField: "CustomerInfo.StoreState",
dataType: "string"
}]
});
Also see this: https://jsfiddle.net/mx1ovwp1/7/
$("#gridContainer").dxDataGrid({
dataSource: employees,
filterRow: {
visible: true,
applyFilter: "auto"
},
groupPanel:{
visible: true
},
searchPanel: {
visible: true,
width: 240,
placeholder: "Search..."
},
headerFilter: {
visible: true
},
paging: {
enabled: false
},
editing: {
mode: "form",
allowUpdating: true
},
columns: [
{
dataField: "Prefix",
caption: "Title",
width: 70
},
"FirstName",
"LastName", {
dataField: "Position",
width: 170
}, {
dataField: "StateID",
caption: "State",
width: 125,
lookup: {
dataSource: states,
displayExpr: "Name",
valueExpr: "ID"
}
}, {
dataField: "BirthDate",
dataType: "date"
}
]
});
Also refer to this link(dxDataGrid - How to implement a custom filter for a date field):
https://supportcenter.devexpress.com/ticket/details/t490195/dxdatagrid-how-to-implement-a-custom-filter-for-a-date-field
For the demo from DevExtreme, see this:
https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Filtering/jQuery/Light/
I am trying to parse the JSON data below into the structs that are shown. I am having a helluva time trying to figure out how to get at the "nested" elements, such as elements "title:", "content:", and "excerpt:". Whenever the code runs, it barfs while parsing the nested elements.
I've looked at the Apple Developer stuff and reviewed the Playground here: https://developer.apple.com/documentation/foundation/archives_and_serialization/using_json_with_custom_types
I also tried using quicktype.io to create the data models from the sample JSON, however, in the header of the exported file from quicktype it has the line: "let blogItem = try? newJSONDecoder().decode(BlogItem.self, from: jsonData)", however, I get a compile error that jsonData is not recognized and I'm not able to find any reference to it.
struct BlogSection: Codable, Identifiable {
var id: Int
var slug: String
var link: String
var title: [BlogTitle]
var content: [ContentData]
}
struct BlogTitle: Codable, Equatable, Identifiable {
var id: UUID
var rendered: String
}
struct ContentData: Codable, Identifiable{
var id: UUID
var rendered: String
}
/**************** JSON Data ***************/
[
{
"id": 10960,
"date": "2019-10-02T01:00:07",
"date_gmt": "2019-10-02T05:00:07",
"guid": {
"rendered": "example.com/blog-template-copy-copy/"
},
"modified": "2019-09-20T07:08:41",
"modified_gmt": "2019-09-20T11:08:41",
"slug": "relationships-matter",
"status": "publish",
"type": "post",
"link": "example.com/relationships-matter/",
"title": {
"rendered": "Relationships Matter"
},
"content": {
"rendered": "<h1>Page content</h1>",
"protected": false
},
"excerpt": {
"rendered": "<p>By: Joe Schmoe<br />\nFirst Author",
"protected": false
},
"author": 57,
"featured_media": 10958,
"comment_status": "open",
"ping_status": "open",
"sticky": false,
"template": "",
"format": "standard",
"meta": [],
"categories": [
613
],
"tags": [],
"_links": {
"self": [
{
"href": "example.com/wp-json/wp/v2/posts/10960"
}
],
"collection": [
{
"href": "example.com/wp-json/wp/v2/posts"
}
],
"about": [
{
"href": "example.com/wp-json/wp/v2/types/post"
}
],
"author": [
{
"embeddable": true,
"href": "example.com/wp-json/wp/v2/users/57"
}
],
"replies": [
{
"embeddable": true,
"href": "example.com/wp-json/wp/v2/comments?post=10960"
}
],
"version-history": [
{
"count": 5,
"href": "example.com/wp-json/wp/v2/posts/10960/revisions"
}
],
"predecessor-version": [
{
"id": 10971,
"href": "example.com/wp-json/wp/v2/posts/10960/revisions/10971"
}
],
"wp:featuredmedia": [
{
"embeddable": true,
"href": "example.com/wp-json/wp/v2/media/10958"
}
],
"wp:attachment": [
{
"href": "example.com/wp-json/wp/v2/media?parent=10960"
}
],
"wp:term": [
{
"taxonomy": "category",
"embeddable": true,
"href": "example.com/wp-json/wp/v2/categories?post=10960"
},
{
"taxonomy": "post_tag",
"embeddable": true,
"href": "example.com/wp-json/wp/v2/tags?post=10960"
}
],
"curies": [
{
"name": "wp",
"href": "https://api.w.org/{rel}",
"templated": true
}
]
}
}
]
'
In the JSON you do not have arrays for title and content, so just remove the brackets
struct BlogSection: Codable, Identifiable {
var id: Int
var slug: String
var link: String
var title: BlogTitle
var content: ContentData
}
struct BlogTitle: Codable, Equatable, Identifiable {
var id: UUID
var rendered: String
}
struct ContentData: Codable, Identifiable{
var id: UUID
var rendered: String
}
Title and Content are not Arrays in the json provided so should be declared as entities. Your BlogTitle and ContentData are declared as Identifiable and have a variable for id, but both do not have an id in the json provided, so you will get a decoding error because of that as well.
The error you are getting points to a completely different problem though. How is your jsonData declared?
I have combo box with some values. When i click the combo listed down the data. but there not align with combo box and popup listed.
any help
/**
* This is the combo box with common values
*/
var combo_1 = Ext.extend(Ext.form.ComboBox, {
editable:true,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
anchor:'95%',
forceSelection: true,
tabIndex: 1,
labelStyle: 'width:110px'
});
/**
* This is the form panal
*/
var form_panal = new Ext.form.FormPanel({
id:'form_panal',
frame:true,
bodyStyle:'padding:10px 10px 10px 10px',
buttonAlign:'center',
items: [
combo_1,
combo_2,
combo_3,
combo_4
],
buttons: [ {
text: 'Save',
handler : function(){
}
},
{text: 'Cancel',
handler : function() {
}
}
]
});
enter image description here
Here is the sample code
Ext.application({
name : 'Fiddle',
launch : function() {
var combo_1 = Ext.create('Ext.form.field.ComboBox', {
editable:true,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
anchor:'95%',
forceSelection: true,
tabIndex: 1,
labelStyle: 'width:110px',
displayField: 'name',
valueField: 'name',
store: {
fields: [{
name: 'name'
}],
proxy: {
type: 'memory'
},
data: [{
name: 'Android'
},{
name: 'iOS'
}, {
name: 'Windows'
}]
}
});
var combo_2 = Ext.create('Ext.form.field.ComboBox', {
editable:true,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
anchor:'95%',
forceSelection: true,
tabIndex: 1,
labelStyle: 'width:110px',
displayField: 'name1',
valueField: 'name1',
store: {
fields: [{
name: 'name1'
}],
proxy: {
type: 'memory'
},
data: [{
name1: 'Blue Star'
},{
name1: 'LLoyd'
}, {
name1: 'Samsung'
}]
}
});
var combo_3 = Ext.create('Ext.form.field.ComboBox', {
editable:true,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
anchor:'95%',
forceSelection: true,
tabIndex: 1,
labelStyle: 'width:110px',
displayField: 'name2',
valueField: 'name2',
store: {
fields: [{
name: 'name2'
}],
proxy: {
type: 'memory'
},
data: [{
name2: 'Andhra pradesh'
},{
name2: 'Telangana'
}, {
name2: 'Karnataka'
}]
}
});
/**
* This is the form panal
*/
Ext.create('Ext.form.FormPanel',{
frame:true,
bodyStyle:'padding:10px 10px 10px 10px',
buttonAlign:'center',
items: [
combo_1,
combo_2,
combo_3
],
buttons: [ {
text: 'Save',
handler : function(){
}
},{
text: 'Cancel',
handler : function() {
}
}],
renderTo: document.body
});
}
});
You can see my code about grid.
Here, Window opens but there is not any value in my grid.
Could you please help?
My php returns JSON encode blow:
{"results":3,"disPath":"","success":"true","rows":[{"id":"1","faz":"Faz1"},{"id":"2","faz":"Faz2"},{"id":"3","faz":"Faz3"}]}
Code
Ext.define('MyDesktop.GridFazlar', {
extend: 'Ext.ux.desktop.Module',
requires: [
'Ext.data.ArrayStore',
'Ext.util.Format',
'Ext.grid.Panel',
'Ext.grid.RowNumberer'
],
id:'grid-fazlar',
init : function(){
this.launcher = {
text: 'Fazlar',
iconCls:'icon-grid'
};
},
createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-fazlar');
if(!win){
var fazlarGridStore = new Ext.data.JsonStore({
root: 'rows',
autoLoad: true,
totalProperty: 'results',
remoteSort: true,
proxy: new Ext.data.HttpProxy({
url: 'phps/gridPhasesLoader.php',
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
},
}),
baseParams:{
depth: '2',
parentId: '2',
proccess: 'callGrid',
},
fields: [{
name :'id'
},{
name :'faz'
},
//{
]
});
win = desktop.createWindow({
id: 'grid-fazlar',
title:'Fazlar',
width:740,
height:480,
iconCls: 'icon-grid',
animCollapse:false,
constrainHeader:true,
layout: 'fit',
listeners:{
beforeshow: function(){
fazlarGridStore.proxy.extraParams = {
depth: '2',
parentId: '2',
proccess: 'callGrid',
};
}
},
items: [
{
border: false,
xtype: 'grid',
listeners: {
celldblclick : function() {
alert('Deneme');
},
},
contextMenu: new Ext.menu.Menu({
items:[
{
id:'grid-fazlar_menu_denemebutton',
text: 'DenemeButonu',
listeners: {
click: function(){
alert('sssss');
}
}
}
]
}),
store:fazlarGridStore,
columns: [
new Ext.grid.RowNumberer(),
{
text: "ID",
//flex: 1,
width: 70,
sortable: true,
dataIndex: 'id'
},{
text: "Faz",
//flex: 1,
width: 70,
sortable: true,
dataIndex: 'faz'
},
]
}
],
tbar:[{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add'
}, '-', {
text:'Options',
tooltip:'Modify options',
iconCls:'option'
},'-',{
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove'
}]
});
}
return win;
},
statics: {
getDummyData: function () {
return [
['Faz1','06/06/2011','15/08/2010','19/12/2010'],
['Faz2','01/10/2010','15/11/2010','29/11/2011'],
['Faz3','16/11/2010','16/12/2010','14/02/2011'],
['Faz4','19/03/2011','20/03/2011','18/06/2011'],
['Faz5','21/03/2011','20/05/2011','18/08/2011'],
['Faz6','21/05/2011','05/07/2011','18/09/2011'],
['Faz7','06/07/2011','04/09/2011','06/12/2011'],
['Faz8','30/09/2011','30/10/2011','29/12/2011'],
];
}
}
});
Your Json has a custom root : 'rows'. You must configure your datareader to take this into account:
proxy: {
type: 'ajax',
url: 'phps/gridPhasesLoader.php',
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
},
reader: {
type: 'json',
root: 'rows'
}
},
I have a JSON store which read data from webservice.
The JSON from the webservice is valid (I've tried reading the data directly from file and it was working).
Here is the JSON Data:
{
"type": "FeatureCollection",
"name": "Points",
"keyField": "GPSUserName",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
35.19999,
31.780965
]
},
"properties": {
"GPSId": "<img src=images/battery3.png />",
"DateTime": "12/07/2013 09:05:00",
"GPSUserName": "13",
"GPSUserColor": "#00FF57",
"GPSUserIcon": "marker_red2.png",
"GPSLabelPosX": "6",
"GPSLabelPosY": "7"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
35.201142,
31.780699
]
},
"properties": {
"GPSId": "<img src=images/battery4.png />",
"DateTime": "12/07/2013 09:05:00",
"GPSUserName": "14",
"GPSUserColor": "#00FF57",
"GPSUserIcon": "marker_red2.png",
"GPSLabelPosX": "6",
"GPSLabelPosY": "7"
}
}
]
}
When using the following store , everything is working fine :
initComponent: function () {
this.store = new Ext.data.JsonStore({
storeId: 'usersStore',
autoLoad: true,
autoSync: false,
proxy: {
type: 'ajax',
url: 'data/users.json',
reader: {
type: 'json',
root: 'features'
}
},
fields: [
{ name: 'name', mapping: 'properties.GPSUserName'},
{ name: 'date', mapping: 'properties.DateTime' },
{ name: 'battery', mapping: 'properties.GPSId' }
]
});
this.columns = [
{ header: 'name', dataIndex: 'name', flex: 1 },
{ header: 'date', dataIndex: 'date', flex: 3 },
{ header: 'battery', dataIndex: 'battery', flex: 1 }
];
this.callParent(arguments);
}
but when I change to use a webservice (which returns the file content) nothing works:
initComponent: function () {
this.store = new Ext.data.JsonStore({
storeId: 'usersStore',
autoLoad: true,
autoSync: false,
proxy: new Ext.data.HttpProxy({
url: 'service.asmx/GetJson',
headers: { 'Content-Type': 'application/json; charset=utf-8;' },
reader: { root: 'd', record: 'features' }
}),
fields: [
{ name: 'name', mapping: 'properties.GPSUserName'},
{ name: 'date', mapping: 'properties.DateTime' },
{ name: 'battery', mapping: 'properties.GPSId' }
]
});
this.callParent(arguments);
}
and this is the webservice :
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]
public string GetJson()
{
string res = File.ReadAllText("data\users.json");
return res;
/*HttpContext.Current.Response.Clear();
HttpContext.Current.Response.ContentType = "application/json";
HttpContext.Current.Response.Charset = "utf-8";
HttpContext.Current.Response.Write(res);*/
}
In firebug I see the following returns from the call :
So ... what am I missing here ?
What you are missing is the buggy implementation of ExtJS JsonStore in ExtJS 4.2. If you look at the source code of this class, you will see that it is ignoring your proxy configuration:
Ext.define('Ext.data.JsonStore', {
extend: 'Ext.data.Store',
alias: 'store.json',
requires: [
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json',
'Ext.data.writer.Json'
],
constructor: function(config) {
config = Ext.apply({
proxy: {
type : 'ajax',
reader: 'json',
writer: 'json'
}
}, config);
this.callParent([config]);
}
});
Just use the Ext.data.Store class and everything should be find. Lost a lot of time on this before figuring this out.