jqgrid add / delete / modify button call a html page - html

i work with jqgrid for listings only also i don't use jqgrid forms
i need to call external forms (example: update.cgi?id=123) to make modifications on the database.
how can i make that ?
thanks a lot

Look at the documentation for the 'editurl' parameter.
e.g. editurl: "/GridDemo/GridSave",
Mark your columns as editable, add the appropriate options to the page control too, e.g.
jQuery("#list2").jqGrid('navGrid', '#pager2',
{
edit: { height: 280, reloadAfterSubmit: false },
add: { height: 280, reloadAfterSubmit: false },
del: { reloadAfterSubmit: false }, search: false
});

Related

How to hide the action button in Vega

I use vega-react and I would like to know the easiest way not to display the "Actions" button on the chart.
if I declare all actions to be false it will not display any actions but the button will still be present.
<Vega spec={spec as VisualizationSpec} data={barData} actions={{
export: false,
source: false,
compiled: false,
editor: false,
}} />
As mentioned in the vega-embed documentation, the actions setting can either be an object or a Boolean, and relevant to your question:
If the value is true, all action links will be shown and none if the value is false
So I believe what you want is actions=false
Yes, set actions: false, however what I didnt realise is that this has to be in the third parameter of the vegaEmbed function
vegaEmbed(
'#vegaChart_traders',
yourVlSpec,
{renderer: "svg", actions: false}
);
rather than in the yourVlSpec object
hope that helps someone :)

Setting ticks of Chart.js in html.erb file

I'm using chartkick with chart.js in Ruby on Rails. I saw the documentation and some issues, but I can't find anything to solve my problem.
I'm setting my chart in html.erb file, like this:
<%=
line_chart $hash_chart,
options: {
max: $value.max+5,
min: $value.min-5,
allowDecimals: false,
colors: color_line,
xtitle: "Title of x axis",
ytitle: "Title of y axis",
discrete: true,
points: false,
width: "500px",
height: "500px",
scales: {
yAxes: [{
distribution: 'linear'
}],
xAxes: [{
distribution: 'linear',
type: 'category', (part of a configuration attempt)
categories: $time, (part of a configuration attempt)
ticks: {
stepSize: 10
}
}]
}
}
%>
The settings until height param works, but scales settings doesn't. The answer of this issue is exactly what I make (according documentation of Chart.js), but didn't work: Force display of ticks on xAxes using chartkick gem and chart.js. I tried to put this setting inside library brace too.
Basically, I want to set the ticks in x Axis and show just some labels of my array of datas. Is it possible to format this (using this type of file)?
You are using the wrong old v2 syntax of chart.js, the scales in v3 for example have to be configured like this
scales: {
x:{
ticks: {}
},
y: {
// Y config
}
}
EDIT:
Since you are on V2 your syntax of declaring axis is correct, make sure you dont run the latest version of chartKick since it uses v3.
distribution does not do anything unless your scale type is time. The stepSize only works for linear and time scales so you will need to change type: 'category' to type: 'linear' or if you are using time data to type: 'time' if you are using time data the stepsize has to be configured in the time sub part so you will need to change ticks to time

How to display timestamped data with PrimeFaces and ChartJs?

Since the public 7.0 release of PrimeFaces includes ChartJs, I thought I'd give it a try.
It works fine, however so far I have not been able to properly display data with values changing over time in a line chart.
chart.js has cartesian time axes for this purpose, however in PrimeFaces , only CartesianLinearAxes is available.
Feeding date objects (instead of String labels) to ChartData simply results in no x-axis being drawn.
Am I missing something or did they just skip this functionality when including chart.js in Primefaces?
OK great questions.
First, PF knows they did not implement time yet but there is an open ticket: https://github.com/primefaces/primefaces/issues/4564
Second, have no fear you can use the Extender feature to make it work. Here is an example we used.
In your Java model for your chart set the Extender feature on.
chartModel.setExtender("chartExtender");
In your XHTML add this JavaScript code function to match when you set in #1 Java bean.
function chartExtender() {
//copy the config options into a variable
var options = $.extend(true, {}, this.cfg.config);
options = {
//remove the legend
legend: {
display: false
},
scales: {
xAxes: [{
display: true,
type: "time",
time: {
parser: 'h:mm:ss a',
tooltipFormat: 'h:mm:ss a',
unit: 'hour',
displayFormats: {
'hour': 'h:mm:ss a'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Your Y Axis',
fontSize: 13,
}
}]
}
};
//merge all options into the main chart options
$.extend(true, this.cfg.config, options);
};
You can see the different time formats available from ChartsJS using MomentJS.
Just a complement to do the extender works, use this.cfg.config.options = {...
for exemple:
function extName() {
this.cfg.config.options = {
legend: {
display: false
}
};
};

Kendoui grid overlaps

I am using kendoui grid , which is shown when I click in a bubbletree(its like tree structure). The data in the grid comes dynamically on clicking bubbletree . The kendoui grid loads fine on first click but the grid overlaps on second click and so on gets overlapping .
I am using following code.
function showKendouiGrid(nodeCoordinate) {
var kendouiConstants = {
BASE_URL: 'http://',
DATA_URL: '/eventbot/public/bubbletreedata/list-category?category=' + nodeCoordinate.label,
PAGE_SIZE: 20,
GRID_HEIGHT: 100
}
jQuery("#grid").kendoGrid({
columns: [{
field: 'label',
title: "Activitiy",
}],
dataSource: {
serverPaging: true,
pageSize: kendouiConstants.PAGE_SIZE,
transport: {
read: {
url: kendouiConstants.BASE_URL + window.location.host + kendouiConstants.DATA_URL,
dataType: "json",
type: "GET"
}
},
schema: {
data: "data",
total: "total"
},
serverFiltering: true,
},
height: kendouiConstants.GRID_HEIGHT,
pageable: {
refresh: true,
pageSizes: true
},
selectable: "row",
scrollable: true,
filterable: true,
sortable: true,
});
}
There is another issue also that , the footer of kendoui grid shows "no items to display" , while it has items on it .
Thanks in advance.
Every time you click on the bubble tree, the grid is regenerated on the previous version of the grid. So, the first time you do it, all is fine and you end up with newly generated kendogrid markup which has its own wrapper elements in HTML. Next time you create the grid, it is recreated on the older and the wrappers are 'rewrapped' inside the previous ones.
What you should do is either .destroy() the grid or just change the grid datasource when the tree is clicked.

extjs Tab content won't display

In the code below, if I set the activeTab to 0, the contents of /viewer/welcome show up as expected. If I set activeTab to 1 (like below), the second tab is activated on load, but when I click on the first tab, the content never displays. I can see it loading the content for the tab BEFORE I click on the tab (if I set autoLoad: false, it doesn't load it at all), but even though it loaded, it doesn't display.
{
xtype: 'tabpanel',
activeTab: 1,
items: [
{
xtype: 'panel',
loader: {
url: '/viewer/welcome/',
renderer: 'html',
autoLoad: true
},
layout: {
type: 'fit'
},
title: 'Welcome'
},
...
}
Why doesn't the content of the tab actually render when the tab is activated? Why does it work if that tab is the active tab on load, but not when it is activated otherwise?
If I make these changes, the text displays all the time as expected, but I get an extra page load from the spurious activate call.
{
xtype: 'tabpanel',
activeTab: 1,
items: [
{
xtype: 'panel',
loader: {
url: '/viewer/welcome/',
renderer: 'html',
autoLoad: false
},
layout: {
type: 'fit'
},
title: 'Welcome',
listeners: {
activate: function(me, opts) {
me.getLoader().load();
}
}
},
...
}
I'm just not understanding why the tabs are not managing this content as part of being a tab.....
I think the problem here is what you have indicated - the tabs are not managing content. The reason why they are not managing it properly is the HTML content that gets returned from loader is just that - some HTML, it is not an ExtJS Component. It is arguable that ExtJS "should" manage content that it has loaded but the docs allude to the contrary: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component-cfg-html It might be worth while filing a bug on this.
Also, I noticed you had a fit layout specified on the welcome panel. Since you have no other items contained in that panel, you probably don't need that setting - incidentally it may (or may not) improve how the loaded html fragment gets handled.
Good luck.
I found out that in ExtJS 5.1 using the reference name didn't work. Had to put in an itemId