how to print the serial number of jqgrid in reverse order - indexing

In a jqgrid we will have the index values(sl numbers) on the very first row these values are assigned internally by jqgrid. How to print in reverse order?

$("#predefinedProcessGrid").jqGrid({
data: processTasks,
datatype: "local",
colNames: ["Assigned By", "Assigned To","Step Name","Created On","Expected Start Date", "Actual Start Date", "Actual End Date","Status","Priority"," IP Address","Past Due (ms)"],
colModel: [{
name: "assignedByUserName",
index: "assignedByUserName",
editable: false,
align: "left",
width: 130,
sorttype:'int',
}, {
name: "assignedToUserOrOrgText",
index: "assignedToUserOrOrgText",
editable: false,
align: "left",
width: 130,
},{
name: "processStepName",
index: "processStepName",
editable: false,
align: "left",
width: 220,
},{
name: "formattedCreatedDateTime",
index: "formattedCreatedDateTime",
editable: false,
align: "left",
width: 150,
} ,{
name: "formattedExpectedStartDate",
index: "formattedExpectedStartDate",
editable: false,
align: "left",
width: 150,
}, {
name: "formattedActualStartDate",
index: "formattedActualStartDate",
editable: false,
align: "left",
width: 150,
sorttype:'int',
}, {
name: "formattedActualEndDate",
index: "formattedActualEndDate",
editable: false,
align: "left",
width: 150,
},
{
name: "formattedUserTaskStatus",
index: "formattedUserTaskStatus",
editable: false,
align: "left",
width: 130,
sorttype:'int',
}, {
name: "formattedTaskPriority",
index: "formattedTaskPriority",
editable: false,
align: "left",
width: 100,
sorttype:'int',
}, {
name: "userTaskFromIPAddress",
index: "userTaskFromIPAddress",
editable: false,
align: "center",
width: 120,
sorttype:'int'
}, {
name: "millisPastDue",
index: "millisPastDue",
editable: false,
align: "center",
width: 100,
sorttype:'int',
}
],
// cmTemplate:{resizable:true},
rowNum: 1e5,
pager: "#predefinedProcessPager",
ignoreCase:true,
gridview: true,
rownumbers: true,
sortable:true,
"resizable": true,
viewrecords: true,
reverse:true,
// sortname: 'Expected Start Date',
// sortorder: "desc",
editurl: "clientArray",
sortorder: "desc",
autowidth: true,
shrinkToFit: false,
height: 470,
keys: true,
hidegrid: false,
loadComplete: function () {
var e = this;
setTimeout(function () {
updatePagerIcons(e);
enableTooltips(e)
}, 0)
},
}

Related

Draw vertical thresholds with chartjs-plugin-annotation and vue-chartjs

I try to position 2 vertical lines which are my thresholds for list of results for some tests.
My problem is that when I try to take value which is not part of the results, The lines are not shown.
With the following code I see the lines.
<script>
import BarChart from "#/components/TestsStatictics/BarChart.vue";
export default {
components: {
BarChart,
},
data() {
return {
chartData: {
labels: [24.35, 24, 24.2, 24.28],
datasets: [
{
label: "Bar Chart",
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(75, 192, 192, 0.2)",
],
borderColor: [
"rgba(255,99,132,1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(75, 192, 192, 0.2)",
],
pointBorderColor: "#2554FF",
data: [24.35, 24, 24.2, 24.28],
},
],
},
options: {
annotation: {
annotations: [
{
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
value: 24.35,
borderColor: "green",
borderWidth: 1,
label: {
enabled: true,
position: "center",
content: "22.70",
},
},
{
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
value: 24.28,
borderColor: "green",
borderWidth: 1,
label: {
enabled: true,
position: "center",
content: "25.70",
},
},
],
},
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
gridLines: {
display: true,
},
},
],
xAxes: [
{
gridLines: {
display: false,
},
barThickness: 30,
},
],
},
legend: {
display: true,
},
responsive: true,
maintainAspectRatio: false,
},
};
},
};
</script>
but if I change the part of the annotation to this (the value of the annotation is not within the data and labels values), It doesn`t work:
annotations: [
{
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
value: 22,
borderColor: "green",
borderWidth: 1,
label: {
enabled: true,
position: "center",
content: "22",
},
},
{
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
value: 26,
borderColor: "green",
borderWidth: 1,
label: {
enabled: true,
position: "center",
content: "26",
},
},
],
Try setting max an min values for the axes:
suggestedMax, suggestedMin
scales: {
xAxes: [
{
gridLines: {
display: false,
},
ticks: {
suggestedMax: 35,
suggestedMin: 20
},
barThickness: 30,
},
],

Setting default to 0 in vuechart.js HorizontalBar

I'm making a vuechart.js Horizontal Barchart, and I want the minimum/default to be set to 0. I am a noob, however. So I do not know if I am coding the "options" right. I tried a few things but nothing seems to have effect on the axys.
My latest try:
export default ({
extends: HorizontalBar,
props: ['agentTickets', 'options'],
mounted() {
this.renderChart({
labels: ['Ferry', 'Carlo', 'Menno', 'Scott'],
datasets: [{
label: 'Yeet', backgroundColor: 'black', data: [10, 20, 30, 40]
}]
},
{
responsive: true, maintainAspectRatio: false
},
{
scales: {
xAxes: [{
ticks: {
beginAtZero: true,
},
stacked: true
}],
yAxes: [{
ticks: {
beginAtZero: true,
},
stacked: true
}]
},
})
}
})
Another of my attempts:
export default {
extends: HorizontalBar,
props: ['agentTickets', 'options'],
mounted() {
this.renderChart({
labels: ['Ferry', 'Carlo', 'Menno', 'Scott'],
scales: {
xAxes: [{
ticks: {
beginAtZero: true,
},
stacked: true
}],
yAxes: [{
ticks: {
beginAtZero: true,
},
stacked: true
}]
},
datasets: [
{label: 'Yeet', backColor: 'black', data: [10, 20, 30, 40]}
]
}, {responsive: true, maintainAspectRatio: false})
}
}
And one more just because!
export default {
extends: HorizontalBar,
props: ['agentTickets', 'options'],
mounted() {
this.renderChart({
labels: ['Ferry', 'Carlo', 'Menno', 'Scott'],
options: {
scale: {
xAxes: [{
ticks: {
min: 0,
},
stacked: true
}],
yAxes: [{
ticks: {
min: 0,
},
stacked: true
}]
}
},
datasets: [
{label: 'Yeet', backdropColor: 'black', data: [10, 20, 30, 40]}
]
}, {responsive: true, maintainAspectRatio: false})
}
}
(I've tried the latest example with beginAtZero too)
Above are the current results, what I want is a graph that starts at 0, instead of 10.
Fixed. Appearantly the options was already created (where responsive and maintainAspectRatio were defined). Just copied the scales between those curly bracers and it works!

Display a pdf in a form in ExtJS 3.4

I would like to create a form with fields at top and a pdf in the middle with ExtJS 3.4.
Displaying a pdf is no problem, a form with fields is no problem but putting both together did not work yet.
Displaying a pdf works with a panel, a form with fields is a Ext.form.FormPanel.
How can I embed the pdf in the form?
Here is what I tried:
var pdfForm = new Ext.form.FormPanel({
id: 'pdfForm',
width: 700,
cloasable: false,
waitMsgTarget: true,
items: [{
region: 'north',
autoHeight: true,
layout: 'column',
border: false,
defaults: {
bodyStyle: 'padding:10px'
},
items: [{
columnWidth: 0.5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'Z',
id: 'Z',
name: 'Z',
readOnly: true,
anchor: '95%'
}, {
xtype: 'textfield',
fieldLabel: 'X',
name: 'X',
readOnly: true,
anchor: '95%'
}]
}, {
columnWidth: 0.5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'Y',
name: 'y',
readOnly: true,
anchor: '95%'
}, {
xtype: 'textfield',
fieldLabel: 'M',
name: 'M',
readOnly: true,
anchor: '95%'
}]
}]
}, {
region: 'center',
xtype: 'tabpanel',
id: 'tabs',
plain: true,
activeTab: 4,
activeItem: 4,
layoutOnTabChange: true,
defaults: {
bodyStyle: 'padding:0px'
},
deferredRender: false
}, {
region: 'south',
xtype: 'tabpanel',
items: [{
xtype: 'box',
autoEl: {
tag: 'iframe',
id: 'samplePDF',
name: 'samplePDF',
style: 'height: 100%; width: 100%',
src: 'http://' + serverIP + '/documents/18/bc1bca0a-d437-4505-aee4-9cbe63553a6d'
}
}]
}]
});
The decisive code is in the last few lines. "autoel" does not match with the Ext.form.FormPanel.
Are there any alternatives?
I found the solution.
The main step is to use an Ext.Panel instead of a form.
var formPanel = new Ext.Panel({
frame: true,
renderTo: 'formPanel',
scrollable: 'true',
title: '',
id: 'mainPanel',
autoHeight: true,
autoWidth: true,
layout: 'form',
items: [{
region: 'north',
autoHeight: true,
layout: 'column',
border: false,
defaults: {
bodyStyle: 'padding:10px'
},
items: [{
columnWidth: 0.5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: '1',
id: '1',
name: '1',
readOnly: true,
anchor: '95%'
}]
}, {
columnWidth: 0.5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: '2',
name: '2',
readOnly: true,
anchor: '95%'
}]
}]
}, {
region: 'center',
xtype: 'tabpanel',
id: 'tabs',
plain: true,
activeTab: 4,
activeItem: 4,
layoutOnTabChange: true,
defaults: {
bodyStyle: 'padding:0px'
},
deferredRender: false
}, {
region: 'south',
xtype: 'box',
autoEl: {
tag: 'embed',
id: '3',
name: '3',
style: 'height: 100%; width: 100%',
type: 'application/pdf',
src: 'http://<ip>/<path>.pdf'
}
}]
});
var pdfDlg = new Ext.Window({
id: 'pdfDialog',
title: 'PDF',
layout: 'fit',
width: 1000,
height: 700,
minWidth: 1000,
minHeight: 500,
closeAction: 'hide',
closable: true,
resizable: false,
plain: true,
modal: true,
items: 'mainPanel',
constrainHeader: true
});

Sencha Touch: avoiding blank line while combining Carousel and Toolbar

I'm having an issue while scrolling between items in the vertical carousel:
The blank division has the same height as the toolbar. Is there any way to avoid the blank line? This is my current code:
Ext.define('eltirabuzon.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video',
'Ext.carousel.Carousel'
],
config: {
cls: 'cards',
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
}
}
});
Ext.create('Ext.Carousel',{
fullscreen: true,
height: '100%',
direction: 'vertical',
directionLock: true,
indicator: false,
defaults: {
directionLock: true,
styleHtmlContent: true,
margin: 0,
padding: 0
},
items: [
{
xtype: 'toolbar',
dock: 'top',
ui: 'dark',
title: 'El Tirabuzon',
items: [{
xtype: 'button',
text: '',
docked: 'left',
ui: 'action',
cls: 'button-options'
}]
},
{
html: 'rtutorial',
style: {
'color': '#FFF',
'background-color': '#BBB',
'background-image': 'url(http://gastonbercun.com/wp-content/uploads/2011/08/steve-jobsNews.jpg)',
'background-size': 'cover'
}
},
{
html: 'noticia',
style: {
'color': '#FFF',
'background-color': '#BBB',
'background-image': 'url(http://blog.ciencianueva.com/wp-content/uploads/2011/10/steve-jobs-renuncia-a-apple.jpeg)',
'background-size': 'cover'
}
},
{
html: 'lista',
style: {
'color': '#FFF',
'background-color': '#BBB',
'background-image': 'url(http://www.biography.com/imported/images/Biography/Images/Galleries/Steve%20Jobs/steve-jobs-photo-NeXT-intro-07-sized.jpg)',
'background-size': 'cover'
}
},
{
html: 'resena',
style: {
'color': '#FFF',
'background-color': '#CCC',
'background-image': 'url(http://3.bp.blogspot.com/-HRJITwGr_Vk/TlYaxYFxoKI/AAAAAAAAAPI/3ofib-Z1VgI/s1600/ipadjobsjpg-1426c786c4434809.jpg)',
'background-size': 'cover'
}
}
]
});

jqGrid not displaying data... JSON string is true JSON... Do I need a jsonReader

This is just a section of my JSON Data string as it is quite extensive...
{
"total": 2,
"page": 1,
"records": 15,
"rows": [
{
"id": 2148,
"cell": {
"MRN": "840134833",
"Hospital_Fin": "987141516",
"First_Name": "YELLOW",
"Last_Name": "CRAYON",
"Date_of_birth": "/Date(1253160000000)/"}
}
]}
And this would be how I set up my jqGrid...
$(document).ready(function () {
jQuery("#frTable").jqGrid ({
cmTemplate: { sortable: false },
caption: '#TempData["POPNAME"]' + ' Population',
datatype: 'json',
mtype: 'GET',
url: '#Url.Action("GetAjaxPagedGridData", "Encounters", new { popId = TempData["POPULATIONID"] })',//'/Encounters/GetAjaxPagedGridData/'+ '',
pager: '#pager',
loadonce: true,
height: 450,
gridview: true,
viewrecords: true,
rowNum: 15,
shrinkToFit: false,
autowidth: true,
colNames: [
'MRN',
'Hospital Fin',
'First Name',
'Last Name',
'Date of birth'
colModel: [
{ name: 'MRN', width: 125, align: 'left' },
{ name: 'Hospital_Fin', width: 145, align: 'left' },
{ name: 'First_Name', width: 115, align: 'left' },
{ name: 'Last_Name', width: 115, align: 'left' },
{ name: 'Date_of_birth', width: 145, align: 'left', formatter:'date', formatoptions: {newformat: 'm/d/Y'}}]
Now...
I look through JSfiddle and I do get the Json string back in the right format. In fact, That is how I was able to copy and paste to this fine website. So what am I missing? It looks like everything should be about right?
UPDATE
Do my col models and the names of my columns in my cell have to match up 100 percent? Maybe that would be someplace to take a look?
You use wrong format of JSON data. Compare your data with the data expected by jqGrid described in the documentation. To fix JSON data you can change it to for example the following
{
"total": 2,
"page": 1,
"records": 15,
"rows": [
{
"id": 2148,
"MRN": "840134833",
"Hospital_Fin": "987141516",
"First_Name": "YELLOW",
"Last_Name": "CRAYON",
"Date_of_birth": "/Date(1253160000000)/"
}
]
}
You need include additionally jsonReader: {repeatitems: false} in the list of jqGrid options.