I am using free-jqgrid 4.13.1. In my grid, I have subgrids under each row so I have a nested rows sort of scenario. However, the filters for the top of the grid only apply to the main grid and ignore the subgrids. How can I make the filter at the top of the grid apply also to all subgrids? I assume I need to do something regarding the postData, but I am still new to jqGrid.
I know I could add the filter toolbar to the subgrids, but that is not an acceptable solution from a UX perspective. The user should be able to search all fields for the main grid and all subgrids from the single (main) filter toolbar.
The colModel property of the main grid and the subgrids are the same and is displayed below.
var mainGridPrefix = "s_";
colModel: [
{ name: 'active', index: 'active' }
, { name: 'lastContact', index: 'lastContact', sorttype: 'date', formatter: 'date', formatoptions: { newformat: "m/d/Y" } }
, { name: 'nextContact', index: 'nextContact', sorttype: 'date', formatter: 'date', formatoptions: { newformat: "m/d/Y" } }
]
, idPrefix: mainGridPrefix
, subGrid: true
, subGridRowExpanded: function (subgridDivId, rowId) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
colModel = $(this).jqGrid("getGridParam", "colModel");
$subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
$subgrid.jqGrid({
datatype: "local"
, data: $(this).jqGrid("getLocalRow", pureRowId).subgridData
, colModel: [
{ name: 'active', index: 'active' }
, { name: 'lastContact', index: 'lastContact', sorttype: 'date', formatter: 'date', formatoptions: { newformat: "m/d/Y" } }
, { name: 'nextContact', index: 'nextContact', sorttype: 'date', formatter: 'date', formatoptions: { newformat: "m/d/Y" } }
]
, height: "100%"
, rowNum: 10000
, autoencode: true
, gridview: true
, idPrefix: rowId + "_"
, width: $("#tableId").width() - 25
});
$subgrid.closest("div.ui-jqgrid-view").children("div.ui-jqgrid-hdiv").hide();
}
Related
I have a requirement to load data using the graphQL response into the lightening data table.I am able to fetch the response from the grapghQL query into the js . I just need to map the corresponding fields to the data column and populate the table.The below is the dummy code. I have the response from grapgql in an object format just have to assign the value and populate the column headers and value. Could someone help me achieve this .Any pointers would help.
LigteningDataTable.html
<lightning-datatable
key-field="id"
data={data}
hide-checkbox-column="true"
columns={columns}>
</lightning-datatable>
LigteningDataTable.js
```
import { LightningElement, api, wire } from 'lwc';
import { CapabilityMixin } from 'laf/pageCapability';
import { gql, unstable_graphql } from 'lightning/uiGraphQLApi';
export default class ServiceDocumentListComponent extends CapabilityMixin(LightningElement) {
get data(){
return [...Array(100)].map((_, index) => {
return {
name: ` (${index})`,
website: 'www.salesforce.com1ß',
amount: Math.floor(Math.random() * 100),
phone: `${Math.floor(Math.random() * 9000000000) + 1000000000}`,
closeAt: new Date(
Date.now() + 86400000 * Math.ceil(Math.random() * 20)
),
};
});
}
get fields() {
[
{ label: 'Label', fieldName: 'name' , wrapText: true },
{ label: 'Website', fieldName: 'website', type: 'url' , wrapText: true },
{ label: 'Phone', fieldName: 'phone', type: 'phone' , wrapText: true },
{ label: 'Balance', fieldName: 'amount', type: 'currency', wrapText: true },
{ label: 'CloseAt', fieldName: 'closeAt', type: 'date', wrapText: true },
];
}
```
Can someone check my chart options and suggest a way to make the time xaxis behave correctly? I've tried with timestamps, dates, timestamps / 1000 and nothing looks right
let sales = [
0,84,5,3,2,1,0,0,3,6
]
let listings = [
1,297,23,5,8,6,9,3,6,19
]
let ps = [
1663084060653,
1663089644329,
1663095228005,
1663100811680,
1663106395356,
1663111979032,
1663117562708,
1663123146384,
1663128730059,
1663134313735
]
let color = "red"
option = {
textStyle: {
color
},
legend: {
textStyle: {
color
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'time',
data: ps,
// axisLabel: {
// formatter: ts => new Date(ts).toTimeString().replace(/ .*/, '')
// }
}
],
yAxis: [
{
// type: 'value'
}
],
series: [
{
name: 'Sales',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: sales
},
{
name: "Listings",
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: listings
}
]
}
Your series (listings & sales here) have to have a [date, value] format. Also, you'll have to remove data from xAxis as it will automatically follow the dates that are given in the series.
So, in your example :
//convert listings & sales to a list of [date, value]
listings = listings.map((value, index) => {
return [ps[index], value]
})
sales = sales.map((value, index) => {
return [ps[index], value]
})
xAxis: [
{
type: 'time',
//data: ps, <--- remove this line
}
],
In this example with universalTransition turned on, after the pie chart of colorBy:'data' is sorted, it is inconsistent with the corresponding relationship between labels and colors in the bar chart, how to make their colors consistent.
Makepie will be out of service on February 15, you can run follow code on ECharts examples editor.
const dataset = {
dimensions: ['name', 'score'],
source: [
['Hannah Krause', 314],
['Zhao Qian', 351],
]
};
const pieOption = {
// dataset: [dataset],
// 顺序排序数据
dataset: [dataset].concat({
transform: {
type: 'sort',
config: { dimension: 'score', order: 'desc' },
},
}),
series: [
{
type: 'pie',
// 通过 id 关联需要过渡动画的系列
id: 'Score',
radius: [0, '50%'],
universalTransition: true,
animationDurationUpdate: 1000,
// 取排序后的数据
datasetIndex: 1,
}
]
};
const barOption = {
dataset: [dataset],
xAxis: {
type: 'category'
},
yAxis: {},
series: [
{
type: 'bar',
// 通过 id 关联需要过渡动画的系列
id: 'Score',
// 每个数据都是用不同的颜色
colorBy: 'data',
encode: { x: 'name', y: 'score' },
universalTransition: true,
animationDurationUpdate: 1000
}
]
};
option = barOption;
setInterval(() => {
option = option === pieOption ? barOption : pieOption;
// 使用 notMerge 的形式可以移除坐标轴
myChart.setOption(option, true);
}, 2000);
Your dataset order by 'desc' on pie chart.
but it's not used on bar chart.
Maybe your two charts should be sorted in the same order
dataset: [dataset].concat({
transform: {
type: 'sort',
config: { dimension: 'score', order: 'desc' },
},
}),
I used an example from the demo on highcharts website, and the only modifications are:
changed map to world.js
Commented "allAreas" property
$(function () {
// Instanciate the map
$('#container').highcharts('Map', {
chart: {
spacingBottom: 20
},
title : {
text : 'Europe time zones'
},
legend: {
enabled: true
},
plotOptions: {
map: {
//allAreas: false,
joinBy: ['iso-a2', 'code'],
dataLabels: {
enabled: true,
color: 'white',
formatter: function () {
if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
return this.point.properties['iso-a2'];
}
},
format: null,
style: {
fontWeight: 'bold'
}
},
mapData: Highcharts.maps['custom/world'],
tooltip: {
headerFormat: '',
pointFormat: '{point.name}: <b>{series.name}</b>'
}
}
},
series : [{
name: 'UTC',
id: 'UTC',
data: $.map(['IE', 'IS', 'GB', 'PT'], function (code) {
return { code: code };
})
}, {
name: 'UTC + 1',
data: $.map(['NO', 'SE', 'DK', 'DE', 'NL', 'BE', 'LU', 'ES', 'FR', 'PL', 'CZ', 'AT', 'CH', 'LI', 'SK', 'HU',
'SI', 'IT', 'SM', 'HR', 'BA', 'YF', 'ME', 'AL', 'MK'], function (code) {
return { code: code };
})
}, {
name: 'UTC + 2',
data: $.map(['FI', 'EE', 'LV', 'LT', 'BY', 'UA', 'MD', 'RO', 'BG', 'GR', 'TR', 'CY'], function (code) {
return { code: code };
})
}, {
name: 'UTC + 3',
data: $.map(['RU'], function (code) {
return { code: code };
})
}]
});
});
Code in JSFiddle
Why only single series is visible?
The line causing the issue is this: //allAreas: false.
This is the explanation and how to fix it (extract from the Highcharts support forum)
According to the API, setting allAreas to true will render all of
the areas so also the one without value (as null value). Another
option is the nullColor which by default is a shade of grey and sets
the color to be used by null values.
Therefore if you set allAreas to true, then each series will draw
all the areas and those with null values will be filled as grey (the
nullColor). Because the later series have a higher z-index these are
on top of the other series, resulting in a grey shape covering the
shapes beneath it.
If you want to set allAreas to true but still see through the
different series, you have to set the nullColor to transparent:
rgba(0,0,0,0)
Working JSFiddle here
I have a KendoGrid like below and when I run the application, I'm not getting the expected format for date column.
$("#empGrid").kendoGrid({
dataSource: {
data: empModel.Value,
pageSize: 10
},
columns: [
{
field: "Name",
width: 90,
title: "Name"
},
{
field: "DOJ",
width: 90,
title: "DOJ",
type: "date",
format:"{0:MM-dd-yyyy}"
}
]
});
When I run this, I'm getting "2013-07-02T00:00:00Z" in DOJ column. Why it is not formatting? Any idea?
I found this piece of information and got it to work correctly. The data given to me was in string format so I needed to parse the string using kendo.parseDate before formatting it with kendo.toString.
columns: [
{
field: "FirstName",
title: "FIRST NAME"
},
{
field: "LastName",
title: "LAST NAME"
},
{
field: "DateOfBirth",
title: "DATE OF BIRTH",
template: "#= kendo.toString(kendo.parseDate(DateOfBirth, 'yyyy-MM-dd'), 'MM/dd/yyyy') #"
},
...
References:
format-date-in-grid
jsfiddle
kendo ui date formatting
just need putting the datatype of the column in the datasource
dataSource: {
data: empModel.Value,
pageSize: 10,
schema: {
model: {
fields: {
DOJ: { type: "date" }
}
}
}
}
and then your statement column:
columns: [
{
field: "Name",
width: 90,
title: "Name"
},
{
field: "DOJ",
width: 90,
title: "DOJ",
type: "date",
format:"{0:MM-dd-yyyy}"
}
]
This is how you do it using ASP.NET:
add .Format("{0:dd/MM/yyyy HH:mm:ss}");
#(Html.Kendo().Grid<AlphaStatic.Domain.ViewModels.AttributeHistoryViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.AttributeName);
columns.Bound(c => c.UpdatedDate).Format("{0:dd/MM/yyyy HH:mm:ss}");
})
.HtmlAttributes(new { #class = ".big-grid" })
.Resizable(x => x.Columns(true))
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model =>
{
model.Id(c => c.Id);
})
.Read(read => read.Action("Read_AttributeHistory", "Attribute", new { attributeId = attributeId })))
)
Try formatting the date in the kendo grid as:
columns.Bound(x => x.LastUpdateDate).ClientTemplate("#= kendo.toString(LastUpdateDate, \"MM/dd/yyyy hh:mm tt\") #");
The option I use is as follows:
columns.Bound(p => p.OrderDate).Format("{0:d}").ClientTemplate("#=formatDate(OrderDate)#");
function formatDate(OrderDate) {
var formatedOrderDate = kendo.format("{0:d}", OrderDate);
return formatedOrderDate;
}
As far as I'm aware in order to format a date value you have to handle it in parameterMap,
$('#listDiv').kendoGrid({
dataSource: {
type: 'json',
serverPaging: true,
pageSize: 10,
transport: {
read: {
url: '#Url.Action("_ListMy", "Placement")',
data: refreshGridParams,
type: 'POST'
},
parameterMap: function (options, operation) {
if (operation != "read") {
var d = new Date(options.StartDate);
options.StartDate = kendo.toString(new Date(d), "dd/MM/yyyy");
return options;
}
else { return options; }
}
},
schema: {
model: {
id: 'Id',
fields: {
Id: { type: 'number' },
StartDate: { type: 'date', format: 'dd/MM/yyyy' },
Area: { type: 'string' },
Length: { type: 'string' },
Display: { type: 'string' },
Status: { type: 'string' },
Edit: { type: 'string' }
}
},
data: "Data",
total: "Count"
}
},
scrollable: false,
columns:
[
{
field: 'StartDate',
title: 'Start Date',
format: '{0:dd/MM/yyyy}',
width: 100
},
If you follow the above example and just renames objects like 'StartDate' then it should work (ignore 'data: refreshGridParams,')
For further details check out below link or just search for kendo grid parameterMap ans see what others have done.
http://docs.kendoui.com/api/framework/datasource#configuration-transport.parameterMap
This might be helpful:
columns.Bound(date=> date.START_DATE).Title("Start Date").Format("{0:MM dd, yyyy}");