I´m used JqxGrid and I have a button "Buscar dados" => "Search" when I click on this button my group hide, and show the data but without group.
`var urlDefault = '[{ "STATUS": "--", "CODIGO_DOC": "--", "COMPETENCIA": "--", "FORNECEDOR": "--", "NUMERO_DOC": "--", "SERIE": "--", "VENCIMENTO": "--", "EMISSAO": "--", "VALOR_DOC": "--", "DESCONTO": "--", "EMPRESA": "--", "NOME_CONTA_FINANCEIRA": "--", "NOME_PLANO_CONTA": "--", "CENTRO_CUSTO": "--", "TIPO_DOC": "--", "SERVICO": "--", "FORMA_PGTO": "--", "PRIORIDADE": "--", "HISTORICO": "--", "INCIDENCIA_PARCELAS": "--", "OP_CAD": "--" }]';
var source =
{
datatype: "json",
datafields: [
{ name: 'STATUS' },
{ name: 'CODIGO_DOC' },
{ name: 'COMPETENCIA' },
{ name: 'FORNECEDOR' },
{ name: 'NUMERO_DOC' },
{ name: 'SERIE' },
{ name: 'VENCIMENTO', type: 'date' },
{ name: 'EMISSAO', type: 'date' },
{ name: 'VALOR_DOC', type: 'number' },
{ name: 'DESCONTO', type: 'number' },
{ name: 'EMPRESA' },
{ name: 'NOME_CONTA_FINANCEIRA' },
{ name: 'NOME_PLANO_CONTA' },
{ name: 'CENTRO_CUSTO' },
{ name: 'TIPO_DOC' },
{ name: 'SERVICO' },
{ name: 'FORMA_PGTO' },
{ name: 'PRIORIDADE' },
{ name: 'HISTORICO' },
{ name: 'INCIDENCIA_PARCELAS' },
{ name: 'OP_CAD' },
{ name: 'DT_CAD', type: 'date' },
],
id: 'id',
url: urlDefault,
root: 'data'
};
$('#BtnSave').click(function () {
var TIPO = '2';
var INI = '01/01/2000';
var FIM = '31/12/2022';
var url = "http://test-test";
source.url = url;
$('#jqxgrid').jqxGrid('updatebounddata');
});
$("#jqxgrid").jqxGrid(
{
height: 300,
source: source,
sortable: true,
showfilterrow: true,
filterable: true,
groupable: true,
columns: [
{ text: 'STATUS', datafield: 'STATUS', width: 120, align: 'center', cellsalign: 'center' },
{ text: 'CÓDIGO', datafield: 'CODIGO_DOC', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'VALOR', datafield: 'VALOR_DOC', width: 130, groupable: true, width: 200, align: 'center', cellsalign: 'center', aggregates: ["sum"], cellsformat: 'c2' , initeditor: function (row, cellvalue, editor) { editor.jqxNumberInput({ digits: 6, decimalDigits: 2 }); } },
{ text: 'COMPETENCIA', datafield: 'COMPETENCIA', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'FORNECEDOR', datafield: 'FORNECEDOR', width: 160, align: 'center', cellsalign: 'center' },
{ text: 'Nº DOCUMENTO', datafield: 'NUMERO_DOC', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'SÉRIE', datafield: 'SERIE', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'VENCIMENTO', datafield: 'VENCIMENTO', width: 130, align: 'center', cellsalign: 'center', cellsformat: 'dd/MM/yyyy', groupable: true },
{ text: 'EMISSAO', datafield: 'EMISSAO', width: 130, align: 'center', cellsalign: 'center', cellsformat: 'dd/MM/yyyy', groupable: true },
{ text: 'EMPRESA', datafield: 'EMPRESA', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'CONTA FINANCEIRA', datafield: 'NOME_CONTA_FINANCEIRA', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'PLANO DE CONTA', datafield: 'NOME_PLANO_CONTA', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'CENTRO CUSTO', datafield: 'CENTRO_CUSTO', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'TIPO DE DOCUMENTO', datafield: 'TIPO_DOC', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'SERVICO', datafield: 'SERVICO', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'FORMA DE PAGAMENTO', datafield: 'FORMA_PGTO', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'PRIORIDADE', datafield: 'PRIORIDADE', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'HISTORICO', datafield: 'HISTORICO', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'PARCELAS', datafield: 'INCIDENCIA_PARCELAS', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'OP. CAD', datafield: 'OP_CAD', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'DT. CAD', datafield: 'DT_CAD', width: 100, align: 'center', cellsformat: 'dd/MM/yyyy', groupable: true, cellsalign: 'center' },
],
groups: ['FORNECEDOR']
});
});
</script>
<br><br>
`
I would like that when click on button the data show with group
Related
table header and data rows column not align
jQuery("#tblCriticalList").jqGrid({
datatype: 'local',
colNames: ['Time', '7AM', '8AM', '9AM', '10AM', '11AM', '12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM',
'10PM', '11PM', '12AM', '1AM', '2AM', '3AM', '4AM', '5AM', '6AM'],
colModel: [
{ name: 'DESC', index: 'DESC', width: 200, align: "left", frozen: true, sortable: false },
{ name: '7AM', index: '7AM', width: 35, align: "right", sortable: false },
{ name: '8AM', index: '8AM', width: 35, sortable: false, align: "right" },
{ name: '9AM', index: '9AM', width: 35, align: "right", sortable: false },
{ name: '10AM', index: '10AM', width: 35, align: "right", sortable: false },
{ name: '11AM', index: '11AM', width: 35, align: "right", sortable: false },
{ name: '12PM', index: '12PM', width: 35, align: "right", sortable: false },
{ name: '1PM', index: '1PM', width: 35, align: "right", sortable: false },
{ name: '2PM', index: '2PM', width: 35, align: "right", sortable: false },
{ name: '3PM', index: '3PM', width: 35, align: "right", sortable: false },
{ name: '4PM', index: '4PM', width: 35, align: "right", sortable: false },
{ name: '5PM', index: '5PM', width: 35, align: "right", sortable: false },
{ name: '6PM', index: '6PM', width: 35, align: "right", sortable: false },
{ name: '7PM', index: '7PM', width: 35, align: "right", sortable: false },
{ name: '8PM', index: '8PM', width: 35, align: "right", sortable: false },
{ name: '9PM', index: '9PM', width: 35, align: "right", sortable: false },
{ name: '10PM', index: '10PM', width: 35, align: "right", sortable: false },
{ name: '11PM', index: '11PM', width: 35, align: "right", sortable: false },
{ name: '12AM', index: '12AM', width: 35, align: "right", sortable: false },
{ name: '1AM', index: '1AM', width: 35, align: "right", sortable: false },
{ name: '2AM', index: '2AM', width: 35, align: "right", sortable: false },
{ name: '3AM', index: '3AM', width: 35, align: "right", sortable: false },
{ name: '4AM', index: '4AM', width: 35, align: "right", sortable: false },
{ name: '5AM', index: '5AM', width: 35, align: "right", sortable: false },
{ name: '6AM', index: '6AM', width: 35, align: "right", sortable: false }
],
shrinkToFit: false,
forceFit: false,
cellsubmit: 'clientArray',
loadonce: true,
ignoreCase: true,
rowNum: 1000,
sortorder: 'asc',
gridview: true,
width: 1185,
height: 720,
jsonReader: { cell: "" },
rowattr: function (rd) {
if (rd["DESC"] == "Hygiene and ADL") {
return { "class": "backcolor" };
}
},
loadComplete: {
}
I have two arrays named headersMap and selected_arr as follows
headersMap: [
{
text: "#",
align: "center",
sortable: true,
value: "id",
align: "start",
width: "1%",
},
{
text: "Name",
align: "center",
sortable: true,
value: "name",
align: "start",
},
{
text: "Company",
align: "center",
sortable: true,
value: "company",
align: "start",
}
]
selected_arr: ['id', 'company']
What I have tried was as follows:
let jsonObject = this.headersMap;
let selectedArray = this.selected_arr;
let filteredJsonObject = jsonObject.map(function(entry) {
return selectedArray.reduce(function(res, key) {
res[key] = entry[key];
return res;
}, {});
});
console.log(filteredJsonObject);
output:
[
{
#: undefined
company: undefined
}
]
QUESTION: what I want is to reduce the headersMap by selected_arr, the output should be as follows:
[
{
text: "#",
align: "center",
sortable: true,
value: "id",
align: "start",
width: "1%",
},
{
text: "Company",
align: "center",
sortable: true,
value: "company",
align: "start",
}
]
Use Array#filter:
const
headersMap = [
{ text: "#", align: "center", sortable: true, value: "id", align: "start", width: "1%" },
{ text: "Name", align: "center", sortable: true, value: "name", align: "start" },
{ text: "Company", align: "center", sortable: true, value: "company", align: "start" }
],
selected_arr = ['id', 'company'];
const filtered = headersMap.filter(({ value }) => selected_arr.includes(value));
console.log(filtered);
I want to set the field with name: "Name" as required and I inserted : validate: "required" according to the jsgrid documentation(http://js-grid.com/docs/#grid-fields) but it doesn't work.
When inserting validate: "required" in my below code for jsgrid field: Name jsgrid doesn't take the required limitation and inserting blocks!!
I am almost sure that the fact that I enclose my grid inside a dialog creates the problem since validate is a parameter that can be defined both in dialog and jsgrid.
This is the code with dialog, in which I successfully display my grid inside a dialog but I cannot pass validate:"required". I also uploaded and a screenshotGrid inside dialog :
$( "#DataGrid" ).dialog({minWidth: 1000, minHeight: 500});
$("#DataGrid").jsGrid({
height: "100%",
width: "70%",
filtering: true,
editing: true,
inserting: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
datatype: "json",
deleteConfirm: "Do you really want to delete the client?",
controller: db,
fields: [
{ name: "Id", align: "center", width: 45 },
{ name: "Name", validate:"required," align: "center", type: "text", width: 45 },
{ name: "Displayed Name(locale)", align: "center", type: "text", width: 40 },
{ name: "Data Type", align: "center", type: "select", items: db.dataType, valueField: "Id", textField: "Name", width: 40 },
{ name: "Initial Value", align: "center", type: "text", width: 40 },
{ name: "Initial State", align: "center", type: "select", items: db.initialState, valueField: "Id", textField: "Name", width: 50 },
{ name: "Worklist Order", align: "center", type: "number", width: 20 },
{ name: "DB Datatype", align: "center", type: "text", width: 25 },
{ name: "Allowed Values JSON", align: "center", type: "text", width: 20 },
{ name: "Allowed Values SQL", align: "center", type: "text", width: 20 },
{ type: "control", width: 25 }
]
});
I tried the jsgrid code without dialog and it works but how will it work inside the dialog?
This code without dialog works:
$("#DataGrid").jsGrid({
height: "100%",
width: "70%",
filtering: true,
editing: true,
inserting: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
datatype: "json",
deleteConfirm: "Do you really want to delete the client?",
controller: db,
fields: [
{ name: "Id", align: "center", width: 45 },
{ name: "Name", validate:"required", align: "center", type: "text", width: 45 },
{ name: "Displayed Name(locale)", align: "center", type: "text", width: 40 },
{ name: "Data Type", align: "center", type: "select", items: db.dataType, valueField: "Id", textField: "Name", width: 40 },
{ name: "Initial Value", align: "center", type: "text", width: 40 },
{ name: "Initial State", align: "center", type: "select", items: db.initialState, valueField: "Id", textField: "Name", width: 50 },
{ name: "Worklist Order", align: "center", type: "number", width: 20 },
{ name: "DB Datatype", align: "center", type: "text", width: 25 },
{ name: "Allowed Values JSON", align: "center", type: "text", width: 20 },
{ name: "Allowed Values SQL", align: "center", type: "text", width: 20 },
{ type: "control", width: 25 }
]
});
Any ideas please? It is a complex issue.
Ok thanks to #tabalin's help I solved the problem. I had one less jsgrid archive. Now it works like a charm!
I am having a problem, with the categories of two box plots. From the following fiddle: http://jsfiddle.net/Taylby/wxpqsr9b/4/
$(function () {
$('#container').highcharts({
chart: {
type: 'boxplot',
inverted: true
},
title: {
text: 'Medication Prescription between start date and stop date'
},
legend: {
enabled: true
},
xAxis: {
categories: ["Males","Females"],
title: {
text: 'Cohort'
},
max:1
},
yAxis: {
title: {
text: 'Interval between events'
},
plotLines: [{
value: 2413.8,
color: 'gray',
width: 1,
height: 100,
label: {
text: "Males Average",
align: 'center',
style: {
color: 'gray'
}
}},
{
value: 16149.474524390858,
color: 'gray',
width: 1,
height: 100,
label: {
text: 'males +3SDs',
align: 'center',
style: {
color: 'gray'
}
}},
{
value: -11321.87452439086,
color: 'gray',
width: 1,
height: 100,
label: {
text: 'females -3SDs',
align: 'center',
style: {
color: 'gray'
}
}},
{
value: 1706.6,
color: 'gray',
width: 1,
height: 100,
label: {
text: 'C2 +3SDs',
align: 'center',
style: {
color: 'gray'
}
}}
],
},
series: [{
name: "Males",
data: [
[0,21,69,413,11566]
]
}, {
name: "Females",
data:[
[5,22,70,581,7860]
]
}]
});
});
you can see that there are two groups, Males and Females - however the box plot doesn't line up with the label.
Much appreciated for any thoughts.
You should add x index (first param in your data point).
series: [{
name: "Males",
data: [
[0, 0, 21, 69, 413, 11566]
]
}, {
name: "Females",
data: [
[1, 5, 22, 70, 581, 7860]
]
}]
Example: http://jsfiddle.net/wxpqsr9b/5/
I am trying to show pagination of the jq grid. But it is not working. It is not showing any data in the grid. I am new in jqgrid and i have tried, here is my example.
My action in controller
public ActionResult itemList(string sidx, string sord, int page, int rows)
{
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = db.tbl_Item.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
var v = new
{
total = totalPages,
page,
records = totalRecords,
rows = (
from t in db.tbl_Item
select new
{
i = t.id,
cell = new string[]{
t.batchno,t.brand,t.buyingPrice.ToString(),
t.catg,
t.itemcode,
t.name,
t.qtyLimit.ToString(),
t.Quantity.ToString(),
t.sellingPrice.ToString(),t.supplier,t.unitType,t.vat.ToString()
}
}).ToArray()
};
return Json(v, JsonRequestBehavior.AllowGet);
}
And the javascript code are
jQuery("#list").jqGrid({
cache: false,
async: false,
url: '/Settings/itemList/',
datatype: 'json',
mtype: 'GET',
colNames: ['id','New Item', 'Batch No', 'Supplier', 'Unit', 'B. Price', 'S. Price','Item Code','Vat','Limit'],
colModel: [
{ name: 'id', index: 'id', width: 110, align: 'center',hidden:true },
{ name: 'name', index: 'name', width: 110, align: 'center' },
{ name: 'batchno', index: 'batchno', width: 110, align: 'center' },
{ name: 'supplier', index: 'supplier', width: 110, align: 'center' },
{ name: 'unitType', index: 'unitType', width: 110, align: 'center', editoptions: { readonly: 'readonly' } },
{ name: 'buyingPrice', index: 'buyingPrice', width: 110, align: 'center', editoptions: { readonly: 'readonly' } },
{ name: 'sellingPrice', index: 'sellingPrice', align: 'center' },
{ name: 'itemcode', index: 'itemcode', width: 110, align: 'center'},
{ name: 'vat', index: 'vat', width: 110, align: 'center', editoptions: { readonly: 'readonly' } },
{ name: 'qtyLimit', index: 'qtyLimit', align: 'center' }
],
pager: jQuery('#pager'),
rowNum: 2,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: "desc",
viewrecords: true,
width: 960,
height: 200,
loadOnce: false,
excelexport: true,
imgpath: '/scripts/themes/coffee/images',
caption: 'Stock Information'
});
Please help me.