jqgrid - search toolbar - jqgrid

The Toolbar Search demo under section 3.7 draws up the search toolbar for every column. Is it possible to have just one search toolbar that filters data across all columns and all pages?
For more info: jqGrid filtering on the client-side using "filterToolbar"
JSON
{
"mypage":{
"outerwrapper":{
"page":"1",
"total":"2",
"records":"2",
"innerwrapper":{
"rows":[
{
"id":"1",
"cells": [
{
"fieldType": "image",
"label": "image",
"value": "<img src=icon.gif>"
},
{
"fieldType": "number",
"label": "number",
"value": 100
},
{
"fieldType": "string",
"label": "string",
"value": "James Kisnar"
},
{
"fieldType": "alphanumeric",
"label": "alphanumeric",
"value": "77 Wall Street"
},
{
"fieldType": "date",
"label": "date",
"value": "12/20/2011"
},
{
"fieldType": "decimal",
"label": "decimal",
"value": "23.55"
}
]
},
{
"id":"2",
"cells": [
{
"fieldType": "image",
"label": "image",
"value": "<img src=icon.gif>"
},
{
"fieldType": "number",
"label": "number",
"value": 140
},
{
"fieldType": "string",
"label": "string",
"value": "James Kitchener"
},
{
"fieldType": "alphanumeric",
"label": "alphanumeric",
"value": "123 ABC"
},
{
"fieldType": "date",
"label": "date",
"value": "12/20/2011"
},
{
"fieldType": "decimal",
"label": "decimal",
"value": "23.55"
}
]
},
{
"id":"3",
"cells": [
{
"fieldType": "image",
"label": "image",
"value": "<img src=icon.gif>"
},
{
"fieldType": "number",
"label": "number",
"value": 657
},
{
"fieldType": "string",
"label": "string",
"value": "Loo Gatner"
},
{
"fieldType": "alphanumeric",
"label": "alphanumeric",
"value": "123 XYZ"
},
{
"fieldType": "date",
"label": "date",
"value": "12/20/2011"
},
{
"fieldType": "decimal",
"label": "decimal",
"value": "23.55"
}
]
},
{
"id":"4",
"cells": [
{
"fieldType": "image",
"label": "image",
"value": "<img src=icon.gif>"
},
{
"fieldType": "number",
"label": "number",
"value": 1290
},
{
"fieldType": "string",
"label": "string",
"value": "William Parker"
},
{
"fieldType": "alphanumeric",
"label": "alphanumeric",
"value": "123 FGH"
},
{
"fieldType": "date",
"label": "date",
"value": "12/20/2011"
},
{
"fieldType": "decimal",
"label": "decimal",
"value": "23.55"
}
]
}
]
}
}
}
}
JQGrid Definition
$(function (){
var getValueByName = function (cells, cellItem) {
var i, count = cells.length, item;
for (i = 0; i < count; i += 1) {
item = cells[i];
if (item.label === cellItem) {
return item.value;
}
}
return '';
};
$("#myjqgrid").jqGrid({
url: "jqgrid.json",
datatype: "json",
contentType: "application/x-javascript; charset=utf-8",
colNames:['Image','Number', 'String', 'Alphanumeric','Date','Decimal'],
colModel:[
{name:'image',index:'image',jsonmap:function(obj){return getValueByName(obj.cells, "image");}, width:150, align:"center"},
{name:'number',index:'number',jsonmap:function(obj){return getValueByName(obj.cells, "number");}, width:150, align:"left", sortable:true},
{name:'string',index:'string',jsonmap:function(obj){return getValueByName(obj.cells, "string");}, width:150, align:"left", sortable:true},
{name:'alphanumeric',index:'alphanumeric',jsonmap:function(obj){return getValueByName(obj.cells, "alphanumeric");}, width:200, align:"left", sortable:true},
{name:'date',index:'date',jsonmap:function(obj){return getValueByName(obj.cells, "date");}, width:150,align:"left", sortable:true},
{name:'decimal',index:'decimal',jsonmap:function(obj){return getValueByName(obj.cells, "decimal");}, width:150,align:"left", sortable:true},
],
jsonReader: {
root: "mypage.outerwrapper.innerwrapper.rows",
page: "mypage.outerwrapper.page",
total: "mypage.outerwrapper.total",
records: "mypage.outerwrapper.records",
repeatitems: false
},
rowNum:2,
rowList:[2, 4],
pager: '#Pager',
recordpos: 'left',
multiboxonly:true,
viewrecords: true,
sortorder: "desc",
multiselect: true,
scrolloffset: 0,
loadonce: true,
sortable: true,
sorttype: "text",
cache: true,
height: "120px"
});
$("#myjqgrid").jqGrid('navGrid','#Pager',{add:false,del:false,edit:false,position:'right'});
$("#myjqgrid").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
});

Related

Creating/Manipulating Elasticsearch Data View from filebeat.yml

I created some kibana dashboards and they are referencing to a kibana data view. This data view is currently default generated by Filebeat when i'm uploading the filebeat setup, etc. Therefore the data view gets a random Id and my dashboard gets a mising reference since those id's are changing. Now i want to configure somewhere the default created data view since my index- and template-pattern have fixed names and i could create a fixed data view. Then my Dashboards wouldn't go into "missing references". I searched the following sites:
https://www.elastic.co/guide/en/beats/filebeat/current/filebeat-installation-configuration.html
https://github.com/elastic/kibana/issues
I created the Dashboards within the kibana UI and exported them for easier integration within my filebeat project.
My filebeat.yml file
# ============================== Filebeat modules ==============================
filebeat.config.modules:
# Glob pattern for configuration loading
path: ${path.config}/modules.d/*.yml
# Set to true to enable config reloading
reload.enabled: false
# ======================= Elasticsearch template setting =======================
setup.template.settings:
index.number_of_shards: 1
setup.template.name: pac-filebeat-%{[agent.version]}
setup.template.pattern: pac-filebeat-%{[agent.version]}
setup.template.fields: ${path.config}/fields.yml
setup.dashboards.enabled: false
setup.dashboards.directory: ${path.config}\kibana\custom
# =================================== Kibana ===================================
# Starting with Beats version 6.0.0, the dashboards are loaded via the Kibana API.
# This requires a Kibana endpoint configuration.
setup.kibana:
# Kibana Host
# Scheme and port can be left out and will be set to the default (http and 5601)
# In case you specify and additional path, the scheme is required: http://localhost:5601/path
# IPv6 addresses should always be defined as: https://[2001:db8::1]:5601
host: "localhost:5601"
# ---------------------------- Elasticsearch Output ----------------------------
output.elasticsearch:
# Array of hosts to connect to.
hosts: ["localhost:9200"]
# Protocol - either `http` (default) or `https`.
protocol: "http"
index: pac-filebeat-%{[agent.version]}
# ================================= Processors =================================
processors:
- add_host_metadata:
when.not.contains.tags: forwarded
- add_cloud_metadata: ~
- add_docker_metadata: ~
- add_kubernetes_metadata: ~
# ================================== Logging ===================================
This is one example Dashboard.
{
"attributes": {
"description": "",
"hits": 0,
"kibanaSavedObjectMeta": {
"searchSourceJSON": {
"query": {
"query": "",
"language": "kuery"
},
"filter": []
}
},
"optionsJSON": {
"useMargins": true,
"syncColors": false,
"syncTooltips": false,
"hidePanelTitles": false
},
"panelsJSON": [
{
"version": "8.5.3",
"type": "lens",
"gridData": {
"x": 0,
"y": 0,
"w": 9,
"h": 10,
"i": "70779a3d-7880-416d-9736-8a374af8ae41"
},
"panelIndex": "70779a3d-7880-416d-9736-8a374af8ae41",
"embeddableConfig": {
"attributes": {
"title": "",
"visualizationType": "lnsLegacyMetric",
"type": "lens",
"references": [
{
"type": "index-pattern",
"id": "454f0a8e-d5b8-4c8d-9dbe-a1a61782d24d",
"name": "indexpattern-datasource-layer-2a27a515-43d0-4aae-8764-467983de9faf"
},
{
"type": "index-pattern",
"name": "99c2853a-48e3-4042-badf-9c0829cec119",
"id": "454f0a8e-d5b8-4c8d-9dbe-a1a61782d24d"
}
],
"state": {
"visualization": {
"layerId": "2a27a515-43d0-4aae-8764-467983de9faf",
"accessor": "10b01daf-1c3d-46d1-a014-b381ac70019c",
"layerType": "data"
},
"query": {
"query": "",
"language": "kuery"
},
"filters": [
{
"meta": {
"index": "99c2853a-48e3-4042-badf-9c0829cec119",
"alias": "pac.log.level : ERROR",
"type": "custom",
"key": "query",
"value": {
"bool": {
"must": [],
"filter": [
{
"bool": {
"should": [
{
"match": {
"pac.log.level": "ERROR"
}
}
],
"minimum_should_match": 1
}
}
],
"should": [],
"must_not": []
}
},
"disabled": false,
"negate": false
},
"query": {
"bool": {
"must": [],
"filter": [
{
"bool": {
"should": [
{
"match": {
"pac.log.level": "ERROR"
}
}
],
"minimum_should_match": 1
}
}
],
"should": [],
"must_not": []
}
},
"$state": {
"store": "appState"
}
}
],
"datasourceStates": {
"indexpattern": {
"layers": {
"2a27a515-43d0-4aae-8764-467983de9faf": {
"columns": {
"10b01daf-1c3d-46d1-a014-b381ac70019c": {
"label": "Errors",
"customLabel": true,
"dataType": "number",
"operationType": "count",
"isBucketed": false,
"scale": "ratio",
"sourceField": "pac.log.level",
"filter": {
"query": "pac.log.level : ERROR",
"language": "kuery"
},
"params": {
"emptyAsNull": true
}
}
},
"columnOrder": [
"10b01daf-1c3d-46d1-a014-b381ac70019c"
],
"incompleteColumns": {}
}
}
}
},
"internalReferences": [],
"adHocDataViews": {}
}
},
"enhancements": {}
}
},
{
"version": "8.5.3",
"type": "lens",
"gridData": {
"x": 9,
"y": 0,
"w": 12,
"h": 10,
"i": "2bbc2f60-dfb2-4545-a725-9f9bec323e4b"
},
"panelIndex": "2bbc2f60-dfb2-4545-a725-9f9bec323e4b",
"embeddableConfig": {
"attributes": {
"title": "",
"visualizationType": "lnsXY",
"type": "lens",
"references": [
{
"type": "index-pattern",
"id": "454f0a8e-d5b8-4c8d-9dbe-a1a61782d24d",
"name": "indexpattern-datasource-layer-a0f69cd9-6726-4551-9a91-cb330cf0b16d"
}
],
"state": {
"visualization": {
"legend": {
"isVisible": true,
"position": "right"
},
"valueLabels": "hide",
"fittingFunction": "None",
"xTitle": "",
"yTitle": "",
"axisTitlesVisibilitySettings": {
"x": false,
"yLeft": false,
"yRight": true
},
"tickLabelsVisibilitySettings": {
"x": true,
"yLeft": false,
"yRight": true
},
"labelsOrientation": {
"x": 0,
"yLeft": 0,
"yRight": 0
},
"gridlinesVisibilitySettings": {
"x": true,
"yLeft": false,
"yRight": true
},
"preferredSeriesType": "bar_horizontal_percentage_stacked",
"layers": [
{
"layerId": "a0f69cd9-6726-4551-9a91-cb330cf0b16d",
"seriesType": "bar_horizontal_percentage_stacked",
"accessors": [
"cbf5323b-0d81-4411-afa3-91087f062874"
],
"yConfig": [],
"layerType": "data",
"splitAccessor": "a98ba577-d539-4ab3-b798-2bddcb2efd3f",
"palette": {
"type": "palette",
"name": "status"
}
}
]
},
"query": {
"query": "",
"language": "kuery"
},
"filters": [],
"datasourceStates": {
"indexpattern": {
"layers": {
"a0f69cd9-6726-4551-9a91-cb330cf0b16d": {
"columns": {
"a98ba577-d539-4ab3-b798-2bddcb2efd3f": {
"label": "ESA states",
"dataType": "string",
"operationType": "terms",
"scale": "ordinal",
"sourceField": "pac.log.esa.connection",
"isBucketed": true,
"params": {
"size": 3,
"orderBy": {
"type": "column",
"columnId": "cbf5323b-0d81-4411-afa3-91087f062874"
},
"orderDirection": "desc",
"otherBucket": true,
"missingBucket": false,
"parentFormat": {
"id": "terms"
}
},
"customLabel": true
},
"cbf5323b-0d81-4411-afa3-91087f062874": {
"label": "Connected",
"dataType": "number",
"operationType": "unique_count",
"scale": "ratio",
"sourceField": "pac.log.esa.connection",
"isBucketed": false,
"filter": {
"query": "pac.log.esa.connection : Connected",
"language": "kuery"
},
"params": {
"emptyAsNull": true
},
"customLabel": true
}
},
"columnOrder": [
"a98ba577-d539-4ab3-b798-2bddcb2efd3f",
"cbf5323b-0d81-4411-afa3-91087f062874"
],
"incompleteColumns": {}
}
}
}
},
"internalReferences": [],
"adHocDataViews": {}
}
},
"enhancements": {}
}
},
{
"version": "8.5.3",
"type": "lens",
"gridData": {
"x": 21,
"y": 0,
"w": 7,
"h": 10,
"i": "ef851b6b-222a-4b70-a7c3-ec6a85bdf4d1"
},
"panelIndex": "ef851b6b-222a-4b70-a7c3-ec6a85bdf4d1",
"embeddableConfig": {
"attributes": {
"title": "",
"visualizationType": "lnsLegacyMetric",
"type": "lens",
"references": [
{
"type": "index-pattern",
"id": "454f0a8e-d5b8-4c8d-9dbe-a1a61782d24d",
"name": "indexpattern-datasource-layer-d8719702-b241-4931-8bd3-d706f1403c25"
}
],
"state": {
"visualization": {
"layerId": "d8719702-b241-4931-8bd3-d706f1403c25",
"accessor": "312ded46-d0e9-4dcf-9779-b0ca10249a90",
"layerType": "data"
},
"query": {
"query": "",
"language": "kuery"
},
"filters": [],
"datasourceStates": {
"indexpattern": {
"layers": {
"d8719702-b241-4931-8bd3-d706f1403c25": {
"columns": {
"312ded46-d0e9-4dcf-9779-b0ca10249a90": {
"label": "Failed DEO Executions",
"customLabel": true,
"dataType": "number",
"operationType": "count",
"isBucketed": false,
"scale": "ratio",
"sourceField": "pac.log.deo.status",
"filter": {
"query": "pac.log.deo.status : failed",
"language": "kuery"
},
"params": {
"emptyAsNull": true
}
}
},
"columnOrder": [
"312ded46-d0e9-4dcf-9779-b0ca10249a90"
],
"incompleteColumns": {}
}
}
}
},
"internalReferences": [],
"adHocDataViews": {}
}
},
"enhancements": {}
}
},
{
"version": "8.5.3",
"type": "lens",
"gridData": {
"x": 0,
"y": 10,
"w": 14,
"h": 11,
"i": "7bcd2a3e-54c1-4b09-a0b6-d41c339c2ae6"
},
"panelIndex": "7bcd2a3e-54c1-4b09-a0b6-d41c339c2ae6",
"embeddableConfig": {
"attributes": {
"title": "",
"visualizationType": "lnsXY",
"type": "lens",
"references": [
{
"type": "index-pattern",
"id": "454f0a8e-d5b8-4c8d-9dbe-a1a61782d24d",
"name": "indexpattern-datasource-layer-cd91feb0-0927-4465-b0fd-b5bac50af734"
}
],
"state": {
"visualization": {
"title": "Empty XY chart",
"legend": {
"isVisible": true,
"position": "right",
"showSingleSeries": true
},
"valueLabels": "hide",
"preferredSeriesType": "line",
"layers": [
{
"layerId": "cd91feb0-0927-4465-b0fd-b5bac50af734",
"accessors": [
"8ccc17fc-529e-4460-9925-149e77e37dd1"
],
"position": "top",
"seriesType": "line",
"showGridlines": false,
"layerType": "data",
"xAccessor": "43aa69d1-f806-4f87-a2b8-57718e85400a"
}
],
"yTitle": "",
"axisTitlesVisibilitySettings": {
"x": true,
"yLeft": false,
"yRight": true
}
},
"query": {
"query": "",
"language": "kuery"
},
"filters": [],
"datasourceStates": {
"indexpattern": {
"layers": {
"cd91feb0-0927-4465-b0fd-b5bac50af734": {
"columns": {
"43aa69d1-f806-4f87-a2b8-57718e85400a": {
"label": "#timestamp",
"dataType": "date",
"operationType": "date_histogram",
"sourceField": "#timestamp",
"isBucketed": true,
"scale": "interval",
"params": {
"interval": "auto",
"includeEmptyRows": true,
"dropPartials": false
}
},
"8ccc17fc-529e-4460-9925-149e77e37dd1": {
"label": " System cpu usage",
"dataType": "number",
"operationType": "median",
"sourceField": "pac.log.system.monitor.cpu.pct",
"isBucketed": false,
"scale": "ratio",
"params": {
"emptyAsNull": true,
"format": {
"id": "percent",
"params": {
"decimals": 2
}
}
},
"customLabel": true
}
},
"columnOrder": [
"43aa69d1-f806-4f87-a2b8-57718e85400a",
"8ccc17fc-529e-4460-9925-149e77e37dd1"
],
"incompleteColumns": {}
}
}
}
},
"internalReferences": [],
"adHocDataViews": {}
}
},
"enhancements": {}
}
}
],
"timeRestore": false,
"title": "ESA overview",
"version": 1
},
"coreMigrationVersion": "8.5.3",
"id": "d29c4ac0-ab68-11ed-bfcf-939f8111002e",
"migrationVersion": {
"dashboard": "8.5.0"
},
"references": [
{
"id": "454f0a8e-d5b8-4c8d-9dbe-a1a61782d24d",
"name": "70779a3d-7880-416d-9736-8a374af8ae41:indexpattern-datasource-layer-2a27a515-43d0-4aae-8764-467983de9faf",
"type": "index-pattern"
},
{
"id": "454f0a8e-d5b8-4c8d-9dbe-a1a61782d24d",
"name": "70779a3d-7880-416d-9736-8a374af8ae41:99c2853a-48e3-4042-badf-9c0829cec119",
"type": "index-pattern"
},
{
"id": "454f0a8e-d5b8-4c8d-9dbe-a1a61782d24d",
"name": "2bbc2f60-dfb2-4545-a725-9f9bec323e4b:indexpattern-datasource-layer-a0f69cd9-6726-4551-9a91-cb330cf0b16d",
"type": "index-pattern"
},
{
"id": "454f0a8e-d5b8-4c8d-9dbe-a1a61782d24d",
"name": "ef851b6b-222a-4b70-a7c3-ec6a85bdf4d1:indexpattern-datasource-layer-d8719702-b241-4931-8bd3-d706f1403c25",
"type": "index-pattern"
},
{
"id": "454f0a8e-d5b8-4c8d-9dbe-a1a61782d24d",
"name": "7bcd2a3e-54c1-4b09-a0b6-d41c339c2ae6:indexpattern-datasource-layer-cd91feb0-0927-4465-b0fd-b5bac50af734",
"type": "index-pattern"
},
{
"id": "c6a11f70-ab68-11ed-bfcf-939f8111002e",
"name": "tag-c6a11f70-ab68-11ed-bfcf-939f8111002e",
"type": "tag"
}
],
"type": "dashboard",
"updated_at": "2023-02-13T07:14:45.551Z",
"version": "WzE1NTI1NiwzMl0="
}
This would be the used tag inside the above dashboard
{
"attributes": {
"color": "#52bc22",
"description": "",
"name": "custom"
},
"coreMigrationVersion": "8.5.3",
"id": "c6a11f70-ab68-11ed-bfcf-939f8111002e",
"migrationVersion": {
"tag": "8.0.0"
},
"references": [],
"type": "tag",
"updated_at": "2023-02-13T07:39:07.543Z",
"version": "WzE1NTM0NywzMl0="
}
The error message:
error dashboard asset: returned 200 to import file: 1 error: error: missing_references, asset ID=d29c4ac0-ab68-11ed-bfcf-939f8111002e; asset type=dashboard; references=[{Type:index-pattern ID:454f0a8e-d5b8-4c8d-9dbe-a1a61782d24d} {Type:index-pattern ID:454f0a8e-d5b8-4c8d-9dbe-a1a61782d24d} {Type:index-pattern ID:454f0a8e-d5b8-4c8d-9dbe-a1a61782d24d} {Type:index-pattern ID:454f0a8e-d5b8-4c8d-9dbe-a1a61782d24d} {Type:index-pattern ID:454f0a8e-d5b8-4c8d-9dbe-a1a61782d24d}]. Response: {"successCount":1,"success":false,"warnings":[],"successResults":[{"type":"tag","id":"c6a11f70-ab68-11ed-bfcf-939f8111002e","meta":{"title":"custom","icon":"tag"},"overwrite":true}],"errors":[{"id":"d29c4ac0-ab68-11ed-bfcf-939f8111002e","type":"dashboard","meta":{"title":"ESA overview","icon":"dashboardApp"},"error":{"type":"missing_references","references":[{"type":"index-pattern","id":"454f0a8e-d5b8-4c8d-9dbe-a1a61782d24d"},{"type":"index-pattern","id":"454f0a8e-d5b8-4c8d-9dbe-a1a61782d24d"},{"type":"index-pattern","id":"454f0a8e-d5b8-4c8d-9dbe-a1a61782d24d"},{"type":"index-pattern","id":"454f0a8e-d5b8-4c8d-9dbe-a1a61782d24d"},{"type":"index-pattern","id":"454f0a8e-d5b8-4c8d-9dbe-a1a61782d24d"}]},"overwrite":true}]}
kind regardes
You can configure Filebeat to use your own dashboard using the following settings:
setup.dashboards.url
setup.dashboards.file
setup.dashboards.index
setup.dashboards.string_replacements (<-- probably the one you're looking for)

Using loadable, common files are bundled into a common bundle

I am using loadable for code splitting. The problem is all my files which are being used in more than one file are bundle into my initial bundle which is making it too large. Instead I want them to be included in my particular route bundle which is opened. How can I solve this?
I want my files to be included in route bundle only. I don't want any common bundle.
This is my webpack config
{
"cache": true,
"context": "/src/client",
"entry": {
"desktop": "./app.desktop.jsx",
"mobile": "./app.mobile.jsx"
},
"output": {
"path": "repo_name/dist/js",
"pathinfo": false,
"publicPath": "https://{url}/js/",
"chunkFilename": "[contenthash].[name].js",
"filename": "[name].bundle.[contenthash].js"
},
"resolve": {
"alias": {},
"symlinks": true,
"plugins": [{
"source": "module",
"nmPath": "node_modules",
"originDir": "repo_name/node_modules/electrode-archetype-react-app-dev",
"target": "resolve"
}],
"modules": [
"repo_name/src",
"repo_name",
"node_modules"
],
"extensions": [
".js",
".jsx",
".json"
]
},
"resolveLoader": {
"symlinks": true,
"modules": [
"repo_name/lib",
"repo_name"
],
"plugins": [{
"source": "module",
"nmPath": "node_modules",
"originDir": "repo_name/node_modules/electrode-archetype-react-app-dev",
"target": "resolve"
}]
},
"module": {
"rules": [{
"test": {},
"use": [{
"loader": "repo_name/node_modules/babel-loader/lib/index.js",
"options": {
"cacheDirectory": "repo_name/.etmp/babel-loader"
}
}]
},
{
"test": {},
"use": [{
"loader": "repo_name/node_modules/mini-css-extract-plugin/dist/loader.js",
"options": {
"hmr": false,
"reload": false,
"publicPath": "/js/"
}
},
{
"loader": "repo_name/node_modules/css-loader/index.js",
"options": {
"context": "repo_name/src",
"modules": true,
"localIdentName": "[hash:base64:5]"
}
},
{
"loader": "repo_name/node_modules/postcss-loader/src/index.js",
"options": {
"ident": "postcss"
}
}
]
},
{
"test": {},
"use": [{
"loader": "repo_name/node_modules/mini-css-extract-plugin/dist/loader.js",
"options": {
"hmr": false,
"reload": false,
"publicPath": ""
}
},
{
"loader": "repo_name/node_modules/css-loader/index.js",
"options": {
"context": "repo_name/src",
"modules": true,
"localIdentName": "[hash:base64:5]"
}
},
{
"loader": "repo_name/node_modules/postcss-loader/src/index.js",
"options": {
"ident": "postcss"
}
},
{
"loader": "repo_name/node_modules/sass-loader/lib/loader.js"
}
]
},
{
"test": {},
"use": [{
"loader": "repo_name/node_modules/mini-css-extract-plugin/dist/loader.js",
"options": {
"hmr": false,
"reload": false,
"publicPath": ""
}
},
{
"loader": "repo_name/node_modules/css-loader/index.js",
"options": {
"context": "repo_name/src",
"modules": true,
"localIdentName": "[hash:base64:5]"
}
},
{
"loader": "repo_name/node_modules/postcss-loader/src/index.js",
"options": {
"ident": "postcss"
}
},
{
"loader": "repo_name/node_modules/stylus-relative-loader/index.js"
}
]
},
{
"test": {},
"use": [{
"loader": "repo_name/node_modules/url-loader/index.js",
"options": {
"limit": 1000,
"mimetype": "application/font-woff"
}
},
"repo_name/node_modules/isomorphic-loader/index.js"
]
},
{
"test": {},
"use": [
"repo_name/node_modules/file-loader/dist/cjs.js",
"repo_name/node_modules/isomorphic-loader/index.js"
]
},
{
"test": {},
"use": [{
"loader": "repo_name/node_modules/electrode-cdn-file-loader/index.js",
"options": {
"limit": 10000
}
},
"repo_name/node_modules/isomorphic-loader/index.js"
]
}
]
},
"plugins": [{
"options": {
"filename": "[name].style.[contenthash].css",
"chunkFilename": "[name].style.[contenthash].css"
},
"__name": "MiniCssExtractPlugin"
},
{
"pluginDescriptor": {
"name": "OptimizeCssAssetsWebpackPlugin"
},
"options": {
"assetProcessors": [{
"phase": "compilation.optimize-chunk-assets",
"regExp": {}
}],
"assetNameRegExp": {},
"cssProcessorOptions": {
"zindex": false
},
"cssProcessorPluginOptions": {}
},
"phaseAssetProcessors": {
"compilation.optimize-chunk-assets": [{
"phase": "compilation.optimize-chunk-assets",
"regExp": {}
}],
"compilation.optimize-assets": [],
"emit": []
},
"deleteAssetsMap": {},
"__name": "OptimizeCssAssetsWebpackPlugin"
},
{
"options": {
"minimize": true,
"options": {
"context": "repo_name/src"
},
"test": {}
},
"__name": "LoaderOptionsPlugin"
},
{
"opts": {
"filename": "../server/stats.json",
"fields": [
"assetsByChunkName",
"assets",
"entrypoints",
"chunks"
]
},
"__name": "StatsWriterPlugin"
},
{
"config": {
"valid": false
},
"options": {
"assetsFile": "../isomorphic-assets.json",
"configFile": "repo_name/.isomorphic-loader-config.json",
"webpackDev": {
"url": "http://localhost:2992",
"addUrl": false
}
},
"__name": "IsomorphicLoaderPlugin"
},
{
"opts": {
"filename": "../server/loadable-stats.json",
"outputAsset": true
},
"compiler": null,
"__name": "LoadablePlugin"
},
{
"resourceRegExp": {},
"newContentRegExp": {},
"__name": "ContextReplacementPlugin"
},
{
"sourceMapFilename": "../map/[file].map",
"sourceMappingURLComment": "\n//# sourceMappingURL=/map/[url]",
"moduleFilenameTemplate": "webpack://[namespace]/[resourcePath]",
"fallbackModuleFilenameTemplate": "webpack://[namespace]/[resourcePath]?[hash]",
"namespace": "",
"options": {
"filename": "../map/[file].map",
"append": "\n//# sourceMappingURL=/map/[url]"
},
"__name": "SourceMapDevToolPlugin"
},
{
"isWatch": true,
"__name": "FailPlugin"
},
{
"__name": "DonePlugin"
},
{
"opts": {
"analyzerMode": "server",
"analyzerHost": "127.0.0.1",
"analyzerPort": 8888,
"reportFilename": "report.html",
"defaultSizes": "parsed",
"openAnalyzer": true,
"generateStatsFile": false,
"statsFilename": "stats.json",
"statsOptions": null,
"excludeAssets": null,
"logLevel": "info",
"startAnalyzer": true
},
"server": null,
"logger": {
"activeLevels": {}
}
},
{
"options": {},
"timeEventData": {},
"smpPluginAdded": true
}
],
"mode": "production",
"optimization": {
"splitChunks": {
"cacheGroups": {
"node_vendors": {
"name": "node_vendor",
"test": {},
"chunks": "initial",
"priority": 1
},
"sentry": {
"name": "sentry",
"test": {},
"chunks": "all",
"priority": 10
}
}
}
}
}

Ghost image showing up in kendo grid drag and drop

A kendo grid has been having a problem with the drag-and-drop functionality, where it has a copy of all the data essentially stuck to the left side of the grid, in-line with the cursor.
The grid that I attach it to is set to editable, however, that appears to have no impact on this. Disabling editing does not fix the problem. It is also worth noting that the grid is bound to the dynamic type, which may have some impact, but I didn't find anything looking into that.
Sortable block is below
#(Html.Kendo().Sortable()
.For("#QuestionGridEditable")
.Filter("table > tbody > tr")
.Cursor("move")
.Axis(SortableAxis.Y)
.PlaceholderHandler("placeholder")
.ContainerSelector("#QuestionGridEditable tbody")
.Events(e => {
e.Change("onDrag");
e.Move("startDrag");
})
Image of the problem
Generated javascript
<script>
kendo.syncReady(function() {
jQuery("#QuestionGridEditable").kendoGrid({
"dataBound": onNewRow,
"columns": [{
"title": "#",
"attributes": {
"style": "width: 2em"
},
"headerAttributes": {
"data-field": "number",
"data-title": "#"
},
"field": "number",
"encoded": true,
"editor": "\u003cinput id=\"number\" max=\"2147483647\" min=\"-2147483648\" name=\"number\" style=\"width:100%\" type=\"text\" /\u003e\u003cscript\u003e\r\n\tkendo.syncReady(function(){jQuery(\"#number\").kendoNumericTextBox({\"format\":\"n0\",\"decimals\":0});});\r\n\u003c/script\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"number\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e",
"editable": funcFalse
}, {
"title": "Visibility",
"attributes": {
"style": "width: 30%"
},
"headerAttributes": {
"data-field": "viewableby",
"data-title": "Visibility"
},
"template": "#=ArrayToString(viewableby)#",
"field": "viewableby",
"encoded": true,
"editor": "\u003cselect id=\"viewableby\" multiple=\"multiple\" name=\"viewableby\"\u003e\u003c/select\u003e\u003cscript\u003e\r\n\tkendo.syncReady(function(){jQuery(\"#viewableby\").kendoMultiSelect({\"dataSource\":[\"Everyone\",\"Faculty\",\"Students\",\"Self\"],\"value\":\"#=ViewersCompactToList(data)#\"});});\r\n\u003c/script\u003e\r\n\r\n\r\n\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"viewableby\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"
}, {
"title": "Radio button",
"headerAttributes": {
"data-field": "cells[0].Text.text",
"data-title": "Radio button"
},
"field": "cells[0].Text.text",
"encoded": true,
"editor": "\u003cbutton id=\"buttonAddRadio\" class=\"k-button k-button-icontext\" onclick=\"addRB\"\u003e+\u003c/button\u003e\r\n\u003cinput class=\"k-textbox\" id=\"cells_0__Text_text\" name=\"cells[0].Text.text\" /\u003e\r\n \r\n\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"cells[0].Text.text\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e",
"editable": funcTrue
}, {
"title": "Basic text entry static",
"headerAttributes": {
"data-field": "cells[1].Text.text",
"data-title": "Basic text entry static"
},
"field": "cells[1].Text.text",
"encoded": true,
"editor": "\u003cinput class=\"k-textbox\" id=\"cells_1__Text_text\" name=\"cells[1].Text.text\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"cells[1].Text.text\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e",
"editable": funcTrue
}, {
"attributes": {
"style": "width: 2em"
},
"command": [{
"name": "destroy",
"buttonType": "ImageAndText",
"text": "Delete"
}]
}],
"scrollable": false,
"editable": {
"confirmation": "Are you sure you want to delete this record?",
"confirmDelete": "Delete",
"cancelDelete": "Cancel",
"mode": "incell",
"template": null,
"createAt": "bottom",
"create": true,
"update": true,
"destroy": true
},
"toolbar": {
"command": [{
"name": null,
"buttonType": "ImageAndText",
"text": "Add new record"
}, {
"name": null,
"buttonType": "ImageAndText"
}]
},
"messages": {
"noRecords": "No records available."
},
"dataSource": {
"type": (function() {
if (kendo.data.transports['aspnetmvc-ajax']) {
return 'aspnetmvc-ajax';
} else {
throw new Error('The kendo.aspnetmvc.min.js script is not included.');
}
}
)(),
"transport": {
"read": {
"url": "/FeedbackForm/ReadQuestionGrid/57"
},
"prefix": "",
"update": {
"url": "/FeedbackForm/UpdateQuestionGrid"
},
"create": {
"url": "/FeedbackForm/CreateQuestionGrid/57"
},
"destroy": {
"url": "/FeedbackForm/DestroyQuestionGrid"
}
},
"serverPaging": true,
"serverSorting": true,
"serverFiltering": true,
"serverGrouping": true,
"serverAggregates": true,
"filter": [],
"schema": {
"data": "Data",
"total": "Total",
"errors": "Errors",
"model": {
"id": "id",
"fields": {
"id": {
"editable": false,
"type": "number",
"defaultValue": -1
},
"number": {
"type": "number"
},
"viewableby": {
"type": "object",
"defaultValue": []
},
"cells": {
"type": "object",
"defaultValue": [{
"Location": {
"id": 0,
"question_id": 0,
"column_id": 14
},
"Text": {
"id": 0,
"location_id": 0,
"viewableby": null,
"text": null
}
}, {
"Location": {
"id": 0,
"question_id": 0,
"column_id": 9
},
"Text": {
"id": 0,
"location_id": 0,
"viewableby": null,
"text": null
}
}]
}
}
}
},
"batch": true
},
"navigatable": true
});
});
<script>
kendo.syncReady(function() {
jQuery("#QuestionGridEditable").kendoSortable({
"change": onDrag,
"filter": "table \u003e tbody \u003e tr",
"container": "#QuestionGridEditable tbody",
"axis": "y",
"cursor": "move",
"placeholder": placeholder
});
});
The problem came down to the HintHandler. Setting the sortable item's HintHandler to a JavaScript function that returned false fixed the issue with the ghost image.

Kendo UI Grid Column typed date has a trouble

I have a grid which would have many columns typed date. These all grids is generated from a generic function, so that I cannot know whether the column type is date or not. There is one rule validates through all columns. It is that all columns name end with "Date" suffix. For instance, createDate, editDate, visitedDate, etc...
So that, I can understand that it can be date and I parse it like you can see at the dataSource parse function
I have trouble when I update the cell. It does not reflect its own value to Model. The date column proto function returns "Invalid Date" error. I do not understand what it happen
var dataSource = new kendo.data.DataSource({
"data": [
{
"hidden_gridColumns": "",
"id": "21632",
"projectId": "146",
"customerTypeId": "4",
"district": "0",
"fieldSize": "12",
"fieldType": "0",
"floorCoveringType": "12",
"lastChangeDate": null,
"estimatedModificationDate": null,
"latestCompany": ""
}
],
"schema": {
"model": {
"id": "id",
"fields": {
"gridColumns": {
"type": "string"
},
"id": {
"type": "string"
},
"projectId": {
"type": "string"
},
"customerTypeId": {
"type": "string"
},
"district": {
"type": "string"
},
"fieldSize": {
"type": "string"
},
"fieldType": {
"type": "string"
},
"floorCoveringType": {
"type": "string"
},
"lastChangeDate": {
"type": "date"
},
"estimatedModificationDate": {
"type": "string"
},
"latestCompany": {
"type": "string"
}
}
},
parse: function(data){
$.each(data,
function(rowNo,
row){
$.each(row,
function(colName,
column){
if(colName.indexOf("Date")>=0){
console.log(colName + " taranıyor");
row[colName] = kendo.parseDate(row[colName], "dd-MM-yyyy");
}
});
});
return data;
}
},
"batch": true
})
And this is my columns structure:
var columns = [
{
"title": "gridColumns",
"field": "gridColumns",
"hidden": true
},
{
"title": "id",
"field": "id",
"hidden": true
},
{
"title": "projectId",
"field": "projectId",
"hidden": true
},
{
"title": "Müşteri Tipi",
"field": "customerTypeId",
"hidden": false,
"width": "91",
"values": [
{
"value": "1",
"text": "Yurtiçi "
},
{
"value": "2",
"text": "Yurtdışı"
},
{
"value": "3",
"text": "Spor Kulübü"
},
{
"value": "4",
"text": "Diğer"
},
{
"value": "5",
"text": "Üniversite"
},
{
"value": "6",
"text": ""
}
]
},
{
"title": "district",
"field": "district",
"hidden": true,
"width": "132"
},
{
"title": "Saha Ölçüsü",
"field": "fieldSize",
"hidden": false,
"width": "85"
},
{
"title": "Saha Türü",
"field": "fieldType",
"hidden": false,
"values": [
{
"value": "1",
"text": "Açık"
},
{
"value": "0",
"text": "Kapalı"
}
]
},
{
"title": "Halı Cinsi",
"field": "floorCoveringType",
"hidden": false,
"width": "76"
},
{
"title": "Son Halı değişim Tarih",
"field": "lastChangeDate",
"hidden": false,
"format": "{0:dd-MM-yyyy}"
},
{
"title": "Tahmini Yenileme Tarihih",
"field": "estimatedModificationDate",
"hidden": false
},
{
"title": "Son Çalıştığı Halı Firması",
"field": "latestCompany",
"hidden": false
}
]
I solved this problem by the code below:
parse: function(response) {
var tmpData=[];
for (var i = 0; i < response.length; i++) {
var tmpRow = response[i];
$.each(tmpRow, function(colNo, colValue){
if(colNo.indexOf("Date")>-1){
tmpRow[colNo]=kendo.parseDate(new Date(tmpRow[colNo]));
}
});
tmpData.push(tmpRow);
}
return tmpData;
}

Google visualization - table data not rendered

I am struggling with google visualization api. I have defined following Spring controller that returns json representation of com.google.visualization.datasource.datatable.DataTable.
#RequestMapping(value = "/magento", method = RequestMethod.GET, headers = { "Accept=application/json" }, params = { "table" }, produces = "application/json; charset=utf-8")
public #ResponseBody
DataTable getMagentoCustomersTable() {
DataTable data = new DataTable();
ArrayList<ColumnDescription> cd = new ArrayList<ColumnDescription>();
cd.add(new ColumnDescription("customerId", ValueType.TEXT,
"Customer Id"));
cd.add(new ColumnDescription("email", ValueType.TEXT, "Email"));
cd.add(new ColumnDescription("firstName", ValueType.TEXT, "First Name"));
cd.add(new ColumnDescription("lastName", ValueType.TEXT, "Last Name"));
data.addColumns(cd);
// Fill the data table.
try {
for (CustomerInterface customer : magentoService.getCustomers()
.getCustomers()) {
data.addRowFromValues(customer.getCustomerId(),
customer.getEmail(), customer.getFirstName(),
customer.getLastName());
}
} catch (TypeMismatchException e) {
System.out.println("Invalid type!");
}
return data;
}
Then I am using following ajax call to produce Table output
$.ajax({
url : "${pageContext.request.contextPath}/customer/magento.json",
data : {
table : null
},
dataType : 'json'
}).success(
function(response) {
// Create the data table.
var data = new google.visualization.DataTable(response);
// Set chart options
var options = {
'title' : 'Magento Customers',
'width' : 400,
'height' : 300
};
// Instantiate and draw our table, passing in some options.
var table = new google.visualization.Table(document
.getElementById('chart_div'));
table.draw(data, options);
});
Ajax call return valid json object with data. Table is created with expected number of rows, there is no error in processing js but all table rows are empty as well as column headers.
So my question is am I missing something? What could went wrong?
==EDIT==
Below you can see sample json returned from ajax call to client. When this json is passed to DataTable constructor it is created but I noticed that no columns are created in DataTable object whereas rows are.
{
"warnings": [],
"rows": [{
"customProperties": {},
"cells": [{
"value": {
"value": "1",
"type": "TEXT",
"null": false,
"objectToFormat": "1"
},
"type": "TEXT",
"null": false,
"customProperties": {},
"formattedValue": null
}, {
"value": {
"value": "lname1#gmail.com",
"type": "TEXT",
"null": false,
"objectToFormat": "lname1#gmail.com"
},
"type": "TEXT",
"null": false,
"customProperties": {},
"formattedValue": null
}, {
"value": {
"value": "fname1",
"type": "TEXT",
"null": false,
"objectToFormat": "fname1"
},
"type": "TEXT",
"null": false,
"customProperties": {},
"formattedValue": null
}, {
"value": {
"value": "lname1",
"type": "TEXT",
"null": false,
"objectToFormat": "lname1"
},
"type": "TEXT",
"null": false,
"customProperties": {},
"formattedValue": null
}]
}, {
"customProperties": {},
"cells": [{
"value": {
"value": "2",
"type": "TEXT",
"null": false,
"objectToFormat": "2"
},
"type": "TEXT",
"null": false,
"customProperties": {},
"formattedValue": null
}, {
"value": {
"value": "lname2#gmail.com",
"type": "TEXT",
"null": false,
"objectToFormat": "lname2#gmail.com"
},
"type": "TEXT",
"null": false,
"customProperties": {},
"formattedValue": null
}, {
"value": {
"value": "fname1",
"type": "TEXT",
"null": false,
"objectToFormat": "fname1"
},
"type": "TEXT",
"null": false,
"customProperties": {},
"formattedValue": null
}, {
"value": {
"value": "lname2",
"type": "TEXT",
"null": false,
"objectToFormat": "lname2"
},
"type": "TEXT",
"null": false,
"customProperties": {},
"formattedValue": null
}]
}],
"numberOfRows": 2,
"numberOfColumns": 4,
"columnDescriptions": [{
"id": "customerId",
"type": "TEXT",
"pattern": "",
"customProperties": {},
"label": "Customer Id"
}, {
"id": "email",
"type": "TEXT",
"pattern": "",
"customProperties": {},
"label": "Email"
}, {
"id": "firstName",
"type": "TEXT",
"pattern": "",
"customProperties": {},
"label": "First Name"
}, {
"id": "lastName",
"type": "TEXT",
"pattern": "",
"customProperties": {},
"label": "Last Name"
}],
"customProperties": {},
"localeForUserMessages": null
}

Resources