Related
I am working with Fluent react UI. I want to edit rows in the table. Is there any option?
https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist
I recommend FluentUI Editable DetailsList. The following example/library has excellent customization to edit on grid/table. It also have other features like column-based filter, bulk edit, bulk delete, and so on.
GitHub Repo: https://github.com/microsoft/FluentUIEditableDetailsList
Working Example: https://editabledetailslist.azurewebsites.net/
The examples are right forward and easy to use. I am currently using it in my SPFx Webpart project with react. You can install using the npm and use the example on the repository to play around.
Install Package on your project
npm i fluentui-editable-grid
Usage
import { DetailsListLayoutMode, mergeStyles, mergeStyleSets, SelectionMode, TextField } from '#fluentui/react';
import { EditableGrid, EditControlType, IColumnConfig, EventEmitter, EventType, NumberAndDateOperators } from 'fluentui-editable-grid';
import { Fabric } from 'office-ui-fabric-react';
import * as React from 'react';
import { useState } from 'react';
const Consumer = () => {
const classNames = mergeStyleSets({
controlWrapper: {
display: 'flex',
flexWrap: 'wrap',
}
});
const [items, setItems] = useState<any[]>([]);
const columns: IColumnConfig[] = [
{
key: 'id',
name: 'ID',
text: 'ID',
editable: false,
dataType: 'number',
minWidth: 100,
maxWidth: 100,
isResizable: true,
includeColumnInExport: true,
includeColumnInSearch: true,
applyColumnFilter: true,
disableSort: true
},
{
key: 'customerhovercol',
name: 'Custom Hover Column',
text: 'Custom Hover Column',
editable: true,
dataType: 'string',
minWidth: 100,
maxWidth: 100,
isResizable: true,
includeColumnInExport: false,
includeColumnInSearch: false,
applyColumnFilter: false,
disableSort: true,
hoverComponentOptions: { enable:true, hoverChildComponent: <CellHover customProps={{ someProp: '' }} /> }
},
{
key: 'name',
name: 'Name',
text: 'Name',
editable: true,
dataType: 'string',
minWidth: 100,
maxWidth: 100,
isResizable: true,
includeColumnInExport: true,
includeColumnInSearch: true,
applyColumnFilter: true
},
{
key: 'age',
name: 'Age',
text: 'Age',
editable: true,
dataType: 'number',
minWidth: 100,
maxWidth: 100,
isResizable: true,
includeColumnInExport: true,
includeColumnInSearch: true,
applyColumnFilter: true
},
{
key: 'designation',
name: 'Designation',
text: 'Designation',
editable: true,
dataType: 'string',
minWidth: 100,
maxWidth: 100,
isResizable: true,
includeColumnInExport: true,
includeColumnInSearch: true,
inputType: EditControlType.MultilineTextField,
applyColumnFilter: true
},
{
key: 'salary',
name: 'Salary',
text: 'Salary',
editable: true,
dataType: 'number',
minWidth: 100,
maxWidth: 100,
isResizable: true,
includeColumnInExport: false,
includeColumnInSearch: true,
maxLength:5,
applyColumnFilter: true,
cellStyleRule: {
enable: true,
rule: {
operator : NumberAndDateOperators.LESSTHAN,
value: 50000
},
whenTrue: { textColor: '#EF5350', fontWeight: 'bold' },
whenFalse: { textColor: '#9CCC65' }
}
},
{
key: 'dateofjoining',
name: 'Date of Joining',
text: 'Date of Joining',
editable: true,
dataType: 'date',
minWidth: 150,
maxWidth: 150,
isResizable: true,
includeColumnInExport: true,
includeColumnInSearch: true,
inputType: EditControlType.Date
},
{
key: 'payrolltype',
name: 'Payroll Type',
text: 'Payroll Type',
editable: true,
dataType: 'string',
minWidth: 150,
maxWidth: 150,
isResizable: true,
includeColumnInExport: true,
includeColumnInSearch: true,
inputType: EditControlType.DropDown,
dropdownValues: [
{ key: 'weekly', text: 'Weekly' },
{ key: 'biweekly', text: 'Bi-Weekly' },
{ key: 'monthly', text: 'Monthly' }
]
},
{
key: 'employmenttype',
name: 'Employment Type',
text: 'Employment Type',
editable: true,
dataType: 'string',
minWidth: 200,
maxWidth: 200,
isResizable: true,
includeColumnInExport: true,
includeColumnInSearch: true,
inputType: EditControlType.Picker,
pickerOptions: {
pickerTags: ['Employment Type1', 'Employment Type2', 'Employment Type3', 'Employment Type4', 'Employment Type5', 'Employment Type6', 'Employment Type7', 'Employment Type8', 'Employment Type9', 'Employment Type10', 'Employment Type11', 'Employment Type12'],
minCharLimitForSuggestions: 2,
tagsLimit: 1,
pickerDescriptionOptions: {
enabled: true,
values: [
{ key: 'Employment Type1', description: 'Employment Type1 Description'},
{ key: 'Employment Type2', description: 'Employment Type2 Description'},
{ key: 'Employment Type3', description: 'Employment Type3 Description'},
{ key: 'Employment Type4', description: 'Employment Type4 Description'},
{ key: 'Employment Type5', description: 'Employment Type5 Description'},
{ key: 'Employment Type6', description: 'Employment Type6 Description'},
{ key: 'Employment Type7', description: 'Employment Type7 Description'},
{ key: 'Employment Type8', description: 'Employment Type8 Description'},
{ key: 'Employment Type9', description: 'Employment Type9 Description'},
{ key: 'Employment Type10', description: 'Employment Type10 Description'},
{ key: 'Employment Type11', description: 'Employment Type11 Description'},
{ key: 'Employment Type12', description: 'Employment Type12 Description'},
] },
suggestionsRule: StringOperators.STARTSWITH
}
}
];
const SetDummyData = () : void => {
const dummyData = [
{
id: "1",
customerhovercol: 'Hover Me',
name: "Name1",
age:32,
designation:'Designation1',
salary:57000,
dateofjoining:'2010-04-01T14:57:10',
payrolltype: 'Weekly',
employmenttype: 'Employment Type11'
},
{
id: "2",
customerhovercol: 'Hover Me',
name: "Name2",
age:27,
designation:'Designation2',
salary:42000,
dateofjoining:'2014-06-09T14:57:10',
payrolltype: 'Monthly',
employmenttype: 'Employment Type4'
},
{
id: "3",
customerhovercol: 'Hover Me',
name: "Name3",
age:35,
designation:'Designation3',
salary:75000,
dateofjoining:'2005-07-02T14:57:10',
payrolltype: 'Weekly',
employmenttype: 'Employment Type7'
},
{
id: "4",
customerhovercol: 'Hover Me',
name: "Name4",
age:30,
designation:'Designation4',
salary:49000,
dateofjoining:'2019-04-01T14:57:10',
payrolltype: 'Bi-Weekly',
employmenttype: 'Employment Type2'
}
];
setItems(dummyData);
}
React.useEffect(() => {
SetDummyData();
}, []);
return (
<Fabric>
<div className={classNames.controlWrapper}>
<TextField placeholder='Search Grid' className={mergeStyles({ width: '60vh', paddingBottom:'10px' })} onChange={(event) => EventEmitter.dispatch(EventType.onSearch, event)}/>
</div>
<EditableGrid
id={1}
columns={columns}
items={items}
enableCellEdit={true}
enableExport={true}
enableTextFieldEditMode={true}
enableTextFieldEditModeCancel={true}
enableGridRowsDelete={true}
enableGridRowsAdd={true}
height={'70vh'}
width={'140vh'}
position={'relative'}
enableUnsavedEditIndicator={true}
//onGridSave={onGridSave}
enableGridReset={true}
enableColumnFilters={true}
enableColumnFilterRules={true}
enableRowAddWithValues={{enable : true, enableRowsCounterInPanel : true}}
layoutMode={DetailsListLayoutMode.justified}
selectionMode={SelectionMode.multiple}
enableRowEdit={true}
enableRowEditCancel={true}
enableBulkEdit={true}
enableColumnEdit={true}
enableSave={true}
/>
</Fabric>
);
};
export default Consumer;
}
I'm using ant design table to list out my datas but the columns are aligned to the right and by default the titles for all the columns should be aligned to the left. Here's the link to the image: Ant design table alignment issue.
Some of the titles are caused by small width but those are adjustable. The problem is that the titles are aligned to the right, except column 1 which is Round.
Here's my code:
const tableColumns = [
{
title: 'Round',
dataIndex: 'round',
width: 80,
},
{
title: 'Date',
dataIndex: 'date',
width: 100,
},
{
title: 'Price',
dataIndex: 'price',
width: 70,
},
{
title: 'Raise Size',
dataIndex: 'raiseSize',
width: 100,
},
{
title: 'Amount',
dataIndex: 'amount',
width: 100,
},
{
title: 'Market Cap',
dataIndex: 'marketCap',
width: 50,
},
{
title: 'Max Allocation',
dataIndex: 'maxAllocation',
width: 50,
},
{
title: 'Filled',
dataIndex: 'filled',
width: 100,
},
{
title: 'Status',
dataIndex: 'status',
width: 100,
},
{
title: 'Yield',
dataIndex: 'yieldPer',
width: 100,
},
];
const tableData = [
{
round: "Round 1",
date: "10-10-2021",
price: '0.05 USDC',
raiseSize: "1000000 SHI",
amount: "25M",
marketCap:"10M",
maxAllocation: "10M",
filled: "1379%",
status: "Filled",
yieldPer:"+223%"
},
{
round: "Round 2",
date: "17-10-2021",
price: '0.10 USDC',
raiseSize: "1000000 SHI",
amount: "25M",
marketCap:"20M",
maxAllocation: "10M",
filled: "1579%",
status: "Filled",
yieldPer:"+203%"
},
{
round: "Round 3",
date: "28-10-2021",
price: '0.15 USDC',
raiseSize: "1000000 SHI",
amount: "25M",
marketCap:"30M",
maxAllocation: "10M",
filled: "1379%",
status: "Upcoming",
yieldPer:""
},
];
And here is where i use the table:
<Table style={{marginTop:'20px'}} columns={tableColumns} dataSource={tableData} align='center' size="middle" />
Looks like align property for Column is something you are looking for:
const tableColumns = [
{
title: 'Round',
dataIndex: 'round',
width: 80,
},
{
title: 'Date',
align: 'right', // <--- this way
dataIndex: 'date',
width: 100,
},
...
Opening http://mycloud/dashboard
I got
http://mycloud/dashboard/auth/login/?next=/dashboard/
After auth succed, I got
http://mycloud/dashboard/project/
Try to click on 'API Access', I'm thrown back to login page
http://mycloud/dashboard/auth/login/?next=/dashboard/project/api_access/
Basically, anywhere I click I always back to login page.
Below is my openstack_dashboard/local/local_settings.py
import os
from django.utils.translation import ugettext_lazy as _
from horizon.utils import secret_key
from openstack_dashboard.settings import HORIZON_CONFIG
DEBUG = True
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql_psycopg2',
'NAME': 'horizon',
'USER': 'packstack',
'PASSWORD': 'L3tM31n',
'HOST': '192.168.5.80',
'PORT': '5432',
}
}
COMPRESS_OFFLINE = True
SESSION_TIMEOUT = 1800
WEBROOT = '/dashboard/'
LOGIN_URL = WEBROOT + 'auth/login/'
LOGOUT_URL = WEBROOT + 'auth/logout/'
LOGIN_REDIRECT_URL = WEBROOT
ALLOWED_HOSTS = ['*']
OPENSTACK_KEYSTONE_MULTIDOMAIN_SUPPORT = True
LOCAL_PATH = os.path.dirname(os.path.abspath(__file__))
SECRET_KEY = secret_key.generate_or_read_from_file(
os.path.join(LOCAL_PATH, '.secret_key_store'))
SESSION_ENGINE = "django.contrib.sessions.backends.cache"
CACHES = {
'default':{
'BACKEND': 'django.core.cache.backends.locmem.LocMemCache',
'LOCATION': '127.0.0.1:11211',
},
}
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
OPENSTACK_HOST = "127.0.0.1"
OPENSTACK_KEYSTONE_URL = "http://%s:7001/v3" % OPENSTACK_HOST
OPENSTACK_KEYSTONE_DEFAULT_ROLE = "_member_"
OPENSTACK_KEYSTONE_BACKEND = {
'name': 'native',
'can_edit_user': True,
'can_edit_group': True,
'can_edit_project': True,
'can_edit_domain': True,
'can_edit_role': True,
}
OPENSTACK_HYPERVISOR_FEATURES = {
'can_set_mount_point': False,
'can_set_password': False,
'requires_keypair': False,
'enable_quotas': True
}
OPENSTACK_CINDER_FEATURES = {
'enable_backup': False,
}
OPENSTACK_NEUTRON_NETWORK = {
'enable_router': True,
'enable_quotas': True,
'enable_ipv6': True,
'enable_distributed_router': False,
'enable_ha_router': False,
'enable_fip_topology_check': True,
'supported_vnic_types': ['*'],
'physical_networks': [],
}
OPENSTACK_HEAT_STACK = {
'enable_user_pass': True,
}
IMAGE_CUSTOM_PROPERTY_TITLES = {
"architecture": _("Architecture"),
"kernel_id": _("Kernel ID"),
"ramdisk_id": _("Ramdisk ID"),
"image_state": _("Euca2ools state"),
"project_id": _("Project ID"),
"image_type": _("Image Type"),
}
IMAGE_RESERVED_CUSTOM_PROPERTIES = []
API_RESULT_LIMIT = 1000
API_RESULT_PAGE_SIZE = 20
SWIFT_FILE_TRANSFER_CHUNK_SIZE = 512 * 1024
INSTANCE_LOG_LENGTH = 35
DROPDOWN_MAX_ITEMS = 30
TIME_ZONE = "UTC"
LOGGING = {
'version': 1,
'disable_existing_loggers': False,
'formatters': {
'console': {
'format': '%(levelname)s %(name)s %(message)s'
},
'operation': {
'format': '%(message)s'
},
},
'handlers': {
'null': {
'level': 'DEBUG',
'class': 'logging.NullHandler',
},
'console': {
'level': 'DEBUG',
'class': 'logging.StreamHandler',
'formatter': 'console',
},
'operation': {
'level': 'INFO',
'class': 'logging.StreamHandler',
'formatter': 'operation',
},
},
'loggers': {
'horizon': {
'handlers': ['console'],
'level': 'DEBUG',
'propagate': False,
},
'horizon.operation_log': {
'handlers': ['operation'],
'level': 'INFO',
'propagate': False,
},
'openstack_dashboard': {
'handlers': ['console'],
'level': 'DEBUG',
'propagate': False,
},
'novaclient': {
'handlers': ['console'],
'level': 'DEBUG',
'propagate': False,
},
'cinderclient': {
'handlers': ['console'],
'level': 'DEBUG',
'propagate': False,
},
'keystoneauth': {
'handlers': ['console'],
'level': 'DEBUG',
'propagate': False,
},
'keystoneclient': {
'handlers': ['console'],
'level': 'DEBUG',
'propagate': False,
},
'glanceclient': {
'handlers': ['console'],
'level': 'DEBUG',
'propagate': False,
},
'neutronclient': {
'handlers': ['console'],
'level': 'DEBUG',
'propagate': False,
},
'swiftclient': {
'handlers': ['console'],
'level': 'DEBUG',
'propagate': False,
},
'oslo_policy': {
'handlers': ['console'],
'level': 'DEBUG',
'propagate': False,
},
'openstack_auth': {
'handlers': ['console'],
'level': 'DEBUG',
'propagate': False,
},
'django': {
'handlers': ['console'],
'level': 'DEBUG',
'propagate': False,
},
'django.db.backends': {
'handlers': ['null'],
'propagate': False,
},
'requests': {
'handlers': ['null'],
'propagate': False,
},
'urllib3': {
'handlers': ['null'],
'propagate': False,
},
'chardet.charsetprober': {
'handlers': ['null'],
'propagate': False,
},
'iso8601': {
'handlers': ['null'],
'propagate': False,
},
'scss': {
'handlers': ['null'],
'propagate': False,
},
},
}
SECURITY_GROUP_RULES = {
'all_tcp': {
'name': _('All TCP'),
'ip_protocol': 'tcp',
'from_port': '1',
'to_port': '65535',
},
'all_udp': {
'name': _('All UDP'),
'ip_protocol': 'udp',
'from_port': '1',
'to_port': '65535',
},
'all_icmp': {
'name': _('All ICMP'),
'ip_protocol': 'icmp',
'from_port': '-1',
'to_port': '-1',
},
'ssh': {
'name': 'SSH',
'ip_protocol': 'tcp',
'from_port': '22',
'to_port': '22',
},
'smtp': {
'name': 'SMTP',
'ip_protocol': 'tcp',
'from_port': '25',
'to_port': '25',
},
'dns': {
'name': 'DNS',
'ip_protocol': 'tcp',
'from_port': '53',
'to_port': '53',
},
'http': {
'name': 'HTTP',
'ip_protocol': 'tcp',
'from_port': '80',
'to_port': '80',
},
'pop3': {
'name': 'POP3',
'ip_protocol': 'tcp',
'from_port': '110',
'to_port': '110',
},
'imap': {
'name': 'IMAP',
'ip_protocol': 'tcp',
'from_port': '143',
'to_port': '143',
},
'ldap': {
'name': 'LDAP',
'ip_protocol': 'tcp',
'from_port': '389',
'to_port': '389',
},
'https': {
'name': 'HTTPS',
'ip_protocol': 'tcp',
'from_port': '443',
'to_port': '443',
},
'smtps': {
'name': 'SMTPS',
'ip_protocol': 'tcp',
'from_port': '465',
'to_port': '465',
},
'imaps': {
'name': 'IMAPS',
'ip_protocol': 'tcp',
'from_port': '993',
'to_port': '993',
},
'pop3s': {
'name': 'POP3S',
'ip_protocol': 'tcp',
'from_port': '995',
'to_port': '995',
},
'ms_sql': {
'name': 'MS SQL',
'ip_protocol': 'tcp',
'from_port': '1433',
'to_port': '1433',
},
'mysql': {
'name': 'MYSQL',
'ip_protocol': 'tcp',
'from_port': '3306',
'to_port': '3306',
},
'rdp': {
'name': 'RDP',
'ip_protocol': 'tcp',
'from_port': '3389',
'to_port': '3389',
},
}
REST_API_REQUIRED_SETTINGS = ['OPENSTACK_HYPERVISOR_FEATURES',
'LAUNCH_INSTANCE_DEFAULTS',
'OPENSTACK_IMAGE_FORMATS',
'OPENSTACK_KEYSTONE_BACKEND',
'OPENSTACK_KEYSTONE_DEFAULT_DOMAIN',
'CREATE_IMAGE_DEFAULTS',
'ENFORCE_PASSWORD_CHECK']
ALLOWED_PRIVATE_SUBNET_CIDR = {'ipv4': [], 'ipv6': []}
LOGIN_REDIRECT_URL = WEBROOT
MEDIA_URL = WEBROOT + '/media/'
STATIC_URL = WEBROOT + '/static/'
I need guide make my chart as shown in the attached screenshot.
I have been using HighCharts for this purpose, but couldn't find appropriate options or configurations to do so. Following is the screen shot of my required design:
I am also attaching the fiddle link to my current implementation that I used to achieve these design requirements.
My Fiddle
HTML:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
JavaScript:
Highcharts.stockChart('container', {
chart: {
spacingLeft: 200,
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
title : {
text : 'Activity'
},
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Daily',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}, {
type: 'year',
count: 1,
text: 'Weekly',
dataGrouping: {
forced: true,
units: [['week', [1]]]
}
}, {
type: 'all',
text: 'Monthly',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}],
buttonTheme: {
width: 60
},
selected: 2
},
legend: {
enable: true,
align: 'left',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 100
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
}
},
series: [{
name: 'Label 1',
color: "#00aade",
data: [[1501545600000, 5], [1504224000000,4], [1506816000000, 6],[1509494400000,5]]
},
{
name: 'Label 2',
color: "#8cc63e",
data: [[1501545600000, 1], [1504224000000,0], [1506816000000, 2],[1509494400000,0]]
}]
});
Kindly if some one can guide me in doing proper configurations or styling to achieve this.
Thanks.
This is the closest I could get
http://jsfiddle.net/0yax1bav/5/
Add spacing on the left:
chart: {
spacingLeft: 300,
},
Move legend to the left:
legend: {
enabled: true,
align: 'left',
verticalAlign: 'top',
layout: 'vertical',
x: -250,
y: 150
},
Move title to the left:
title : {
align: 'left',
x: -280,
text : 'Activity',
floating: true
},
Move range to the left:
rangeSelector: {
floating: true,
x: 0,
verticalAlign: 'middle',
buttonPosition: {
align: 'left',
y: 20,
x: -140
},
inputPosition: {
align: 'left',
y: 15,
x: -280
},
...
Disable exporting buttons:
exporting:{
buttons:{
contextButton: {
enabled: false
}
}
}
Highcharts.stockChart('container', {
chart: {
spacingLeft: 300,
},
legend: {
enabled: true,
align: 'left',
verticalAlign: 'top',
layout: 'vertical',
x: -250,
y: 150
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
exporting:{
buttons:{
contextButton: {
enabled: false
}
}
},
title : {
align: 'left',
x: -280,
text : 'Activity',
floating: true
},
rangeSelector: {
floating: true,
x: 0,
verticalAlign: 'middle',
buttonPosition: {
align: 'left',
y: 20,
x: -140
},
inputPosition: {
align: 'left',
y: 15,
x: -280
},
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Daily',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}, {
type: 'year',
count: 1,
text: 'Weekly',
dataGrouping: {
forced: true,
units: [['week', [1]]]
}
}, {
type: 'all',
text: 'Monthly',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}],
buttonTheme: {
width: 60
},
selected: 2
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
}
},
series: [{
name: 'Label 1',
color: "#00aade",
data: [[1501545600000, 5], [1504224000000,4], [1506816000000, 6],[1509494400000,5]]
},
{
name: 'Label 2',
color: "#8cc63e",
data: [[1501545600000, 1], [1504224000000,0], [1506816000000, 2],[1509494400000,0]]
}]
});
I was able to get this far. Highcharts x,y coordinates are a bit challenging to use, but you needed to do a bit more styling on buttonPosition,inputPosition, and Title (see screenshot) to move them to the right side:
HTML:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js">
</script>
<div id="container" style="height: 400px; min-width: 310px"></div>
JavaScript:
Highcharts.stockChart('container', {
chart: {
marginLeft: 300,
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
title : {
text : 'Activity',
x: -280
},
rangeSelector: {
x: 0,
verticalAlign: 'middle',
buttonPosition: {
align: 'left',
y: 20,
x: -140
},
inputPosition: {
align: 'left',
y: 15,
x: -280
},
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Daily',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}, {
type: 'year',
count: 1,
text: 'Weekly',
dataGrouping: {
forced: true,
units: [['week', [1]]]
}
}, {
type: 'all',
text: 'Monthly',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}],
buttonTheme: {
width: 60
},
selected: 2
},
legend: {
width: 100,
align: 'left',
x: 0, // = marginLeft - default spacingLeft
y: -100,
itemWidth: 100,
borderWidth: 1
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
}
},
series: [{
name: 'Label 1',
color: "#00aade",
data: [[1501545600000, 5], [1504224000000,4], [1506816000000, 6],[1509494400000,5]]
},
{
name: 'Label 2',
color: "#8cc63e",
data: [[1501545600000, 1], [1504224000000,0], [1506816000000, 2],[1509494400000,0]]
}]
});
The legend doesn't appear to be rendering - check to make sure that your data is in the proper format and also try playing around with x and y.
I used the addRowData function to load some data from an array. but when ever I want to select a row, just the last one is, no other one can be selected.
I'm using the same code from my other page which works fine except I'm loading my data routed from my controller.
Below is the code: `
<script>
var myJqGridData = #Html.Raw(Json.Encode(Model));
var listOfColumnModels = [];
var listOfColumnNames = [];
for (var prop in myJqGridData[0]) {
if (myJqGridData[0].hasOwnProperty(prop)) {
listOfColumnNames= ["Code du Demandeur", "Nom", "Prenoms", "Adresse", "Ville", "Code Postal",
"Province", "Téléphone 1", "Téléphone 2", "Téléphone 3", "Courriel 1", "Courriel 2",
"Courriel 3", "Date de Naissance", "Handicape?", "Référence", "Remarques", "Date d'Ouverture Dossier",
"Situation Matrimoniale", "Sexe", "Tranche de Revenu", "Occupation", "Scolarité", "Statut Légal",
"Communauté", "Source d'Information", "Source de Revenu", "Nom du Conseiller", "Prenoms du Conseiller", "Langue Maternelle"
];
listOfColumnModels = [
{ key: false, name: 'Code_Demandeur', width: 125, sortable: true, sorttype: "text", index: "Code_Demandeur" },
{ key: false, name: 'Nom_Demandeur', width: 150, sortable: true, sorttype: "text", index: "Nom_Demandeur" },
{ key: false, name: 'Prenoms_Demandeur', width: 150, sortable: true, sorttype: "text", index: "Prenoms_Demandeur" },
{ key: false, name: 'Adresse_Demandeur', width: 200, sortable: false, index: "Adresse_Demandeur" },
{ key: false, name: 'Nom_Ville', width: 100, sortable: true, sorttype: "text", index: "Nom_Ville" },
{ key: false, name: 'CodePostal_Demandeur', width: 75, sortable: true, sorttype: "text", index: "CodePostal_Demandeur" },
{ key: false, name: 'Nom_Province', width: 100, sortable: false, index: "Nom_Province" },
{ key: false, name: 'Tel1_Demandeur', width: 100, sortable: false, index: "Tel1_Demandeur" },
{ key: false, name: 'Tel2_Demandeur', width: 100, sortable: false, index: "Tel2_Demandeur" },
{ key: false, name: 'Tel3_Demandeur', width: 100, sortable: false, index: "Tel3_Demandeur" },
{ key: false, name: 'Courriel1_Demandeur', width: 150, sortable: false, index: "Courriel1_Demandeur" },
{ key: false, name: 'Courriel2_Demandeur', width: 150, sortable: false, index: "Courriel2_Demandeur" },
{ key: false, name: 'Courriel3_Demandeur', width: 150, sortable: false, index: "Courriel3_Demandeur" },
{ key: false, name: 'Date_Naissance_Demandeur', width: 100, sortable: true, sorttype: "date", align: 'right', index: "Date_Naissance_Demandeur" },
{ key: false, name: 'Handicape', width: 75, sortable: true, sorttype: "text", index: "Handicape" },
{ key: false, name: 'Reference', width: 100, sortable: true, sorttype: "text", index: "Reference" },
{ key: false, name: 'Remarques_Demandeur', width: 150, sortable: false, index: "Remarques_Demandeur" },
{ key: false, name: 'Date_Ouverture_Dossier', width: 100, sortable: true, sorttype: "date", align: 'right', index: "Date_Ouverture_Dossier" },
{ key: false, name: 'Nom_SituationMatrimoniale', width: 150, sortable: true, sorttype: "text", index: "Nom_SituationMatrimoniale" },
{ key: false, name: 'Nom_Sexe', width: 75, sortable: true, sorttype: "text", index: "Nom_Sexe" },
{ key: false, name: 'Nom_TrancheRevenu', width: 100, sortable: true, sorttype: "text", align: 'right', index: "Nom_TrancheRevenu" },
{ key: false, name: 'Nom_Occupation', width: 150, sortable: true, sorttype: "text", index: "Nom_Occupation" },
{ key: false, name: 'Nom_Scolarite', width: 150, sortable: true, sorttype: "text", index: "Nom_Scolarite" },
{ key: false, name: 'Nom_StatutLegal', width: 150, sortable: true, sorttype: "text", index: "Nom_StatutLegal" },
{ key: false, name: 'Nom_Communaute', width: 150, sortable: true, sorttype: "text", index: "Nom_Communaute" },
{ key: false, name: 'Nom_SourceInformation', width: 150, sortable: true, sorttype: "text", index: "Nom_SourceInformation" },
{ key: false, name: 'Nom_SourceRevenu', width: 150, sortable: true, sorttype: "text", index: "Nom_SourceRevenu" },
{ key: false, name: 'Nom_Conseiller', width: 100, sortable: true, sorttype: "text", index: "Nom_Conseiller" },
{ key: false, name: 'Prenoms_Conseiller', width: 100, sortable: true, sorttype: "text", index: "Prenoms_Conseiller" },
{ key: false, name: 'Nom_Langue', width: 100, sortable: true, sorttype: "text", index: "Nom_Langue" },
];
}
}
$(function () {
CreateJQGrid(myJqGridData, listOfColumnNames, listOfColumnModels, '#(ViewBag.titreRapport)');
});
function CreateJQGrid(myArraydata, colNoms, colModeles, titre) {
jQuery("#grid_ListeNomee").jqGrid({
datatype: 'clientSide',
colNames: colNoms,
colModel: colModeles,
rowNum: 100000,
gridview: true,
loadonce: true,
autowidth: true,
pager: $('#pager_ListeNomee'),
rowList: [5, 10, 20, 50, 100000],
rownumbers: true,
height: '100%',
width: 1000,
emptyrecords: "Pas d'enregistrement à afficher",
shrinkToFit: false,
multiselect: false,
sortname: 'Code_du_Demandeur',
sortorder: "asc",
loadComplete: function () {
$("option[value=100000]").text('Tout');
},
viewrecords: true,
caption: 'Liste des personnes qui tirent leur revenu principal de: ' + titre
});
for (var i = 0; i < myArraydata.length; i++){
var x = formatJsonDate(myArraydata[i].Date_Naissance_Demandeur);
myArraydata[i].Date_Naissance_Demandeur = (Number(x.slice(-4))>1900)? x : "" ;
x =formatJsonDate(myArraydata[i].Date_Ouverture_Dossier);
myArraydata[i].Date_Ouverture_Dossier = (Number(x.slice(-4))>1900)? x : "" ;
myArraydata[i].Handicape = (myArraydata[i].Handicape == true)? "OUI" : "" ;
jQuery("#grid_ListeNomee").addRowData("1", myArraydata[i]);
};
};
function formatJsonDate(jsonDate) {
var nais = new Date(parseInt(jsonDate.substr(6)));
var nais1 = new Date('1900-01-01');
if (nais.getTime() < nais1.getTime())
return '';
return nais.toLocaleDateString();
};
</script>
<style type="text/css">
.ui-jqgrid-btable .ui-state-highlight {
background: #003366;
}
.ui-jqgrid table.ui-jqgrid-htable th.ui-th-column input,
.ui-jqgrid table.ui-jqgrid-htable th.ui-th-column select {
background-color: lightcyan;
}
.ui-jqgrid-bdiv {
max-height: 500px;
}
</style>
#model IEnumerable<FEC.Models.VentilationDemandeurs>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="../Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="../Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<script src="../Scripts/i18n/grid.locale-en.js"></script>
<script src="../Scripts/jquery.jqgrid.min.js"></script>
<body>
<table id="grid_ListeNomee"></table>
<div id="pager_ListeNomee"></div>
</body>
I think I have my response to my own answer and I experienced it this week-end.
In fact I have an "OnSelect" event that is not shown in the snapshots above, and it tries to catch the value of the key from the selected row. But in my JqGrid, there is no key, all my columns have "key: false" thus it confuses the event.
My week-end experience was else where but it had the same behavior. This time I was populating data from a table from my Database that had 2 combined columns as primary key. Once populated, JqGrid could not deal with it whenever I don't mirror the same keys from my DB.
Short answer; Make sure you only have a single column with 'key' attribute equals to true.