How to merge rows with same value - javascript

function drawTable(url){
$('#reportList').jqGrid({
url: url,
mtype: 'GET',
datatype: 'json',
shrinkToFit:false,
width:null,
colNames:['num', 'in_charge', 'section1','section2','product','product_description','status','rate','start_date','end_date','proceed_detail'],
colModel:[
{name:'num', index:'num', hidden:true},
{name:'in_charge', index:'in_charge', hidden:true},
{name:'section1', index:'section1', width:70},
{name:'section2', index:'section2', width:140},
{name:'product', index:'product', width:80},
{name:'product_description', index:'product_description', width:300},
{name:'status', index:'status', width:45},
{name:'rate', index:'rate', width:50},
{name:'start_date', width:80, index:'start_date'},
{name:'completion_date', width:80, index:'completion_date'},
{name:'proceed_detail', index:'proceed_detail', width:400}
],
pager: '#pager',
multiselect: true,
rownumbers: true,
shrinkToFit:false,
loadonce: true,
});
}
I retrieve data from server and display it in jqGrid.
First and Second components in colModel are hidden components. So, 'section1' is the first column components to be displayed in jqGrid.
Multiple rows may have same section1 and section2.
So, What I want to do is to merge rows that have same section1 and section2. Basic tag provides rowspan to merge rows.
However, jqGrid never provides that function by default. I've searched stackoverflow for a long time to find the solution, but was unable to do so.

Fetch data from server with 'extraProperty' like columnattr, which will contain information to merge rowspan or not. So you have to update your server code according to your requirement(just add column).
In colmodel add attribute 'cellattr' for particular column and assign your function which will decide to have rowspan from server data 's extraProperty. This function allow you to customize cell in grid. so here you can merge row.
Ref: Jqgrid - grouping row level data
Cheerssssss.

Related

Disable server-side processing for sort

I'm using of DataTables for show information in a table and I've enabled server-side load (I need that just for load data and pagination) and I don't need to search or sort by server side and I need default search and sorting (jQuery) for my table.
How can I do that ?
var table2 = $('#datatable-buttons2').DataTable({
"serverSide": true,
"processing": true,
"asSorting": ['desc', 'asc'],
"ajax": {
'type': 'POST',
'url': 'test.php?nowsearch=1',
'data': {
inputaz: $("#inputaz").val(),
inputta: $("#inputta").val(),
inputkey: $("#inputkey").val()
}
},
"columns": [{
"data": "group_name"
}, {
"data": "sender"
}, {
"data": "date"
}],
});
Maybe you can do this, customizing data retrieved in Javascript, but this is not useful.
If you sort your items in clientside with serverSide: true, it will be sorted the current retrieved data only, not based in all dataset in your database (if you actually limit results, if you don't, then use directly serverSide: false witch will retrieve all records).
For example, if you have 1000 records, you only get the data of first 10 of then only, not all (10/25/50/100). If you sort locally by age, it will sorted the retrieved 10. Then, if you go to the next page, you will notice the 2nd page is not sequential from the 1st page.
That's why you must to code your sorting/search in your back-end language when you use serverSide: true: in there you will sort first and then you return 10 records sorted.
That's the idea for this option.
Anyway... You can have pagination for client-side (serverSide: false) too by using paging option. But you need to be aware about performance.
In short, if you will handle many records, you should keep using server-side and code the sorting/search/pagination/etc from your back-end an return corresponding data. Is not so hard. You can play with parameters sent to achieve this.

How do i add server side paging for jqGrid if data comes from a separate ajax call?[Trirand JQgrid 4.6]

I need to generate a jqGrid structure that similar to Grouped Header Row Config example in trirand JqGrid 4.6 demo website.
In this i have a separate ajax call to get data and the ajax calls a ASP MVC action method.
$.ajax({
url:'Controller/Action/ClientId?='+ id,
method:'get',
success:function(data){
var gridData = data;
jQuery("#list483").jqGrid({
datatype: "local",
height: 'auto',
rowNum: 30,
rowList: [10,20,30],
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
{name:'name',index:'name', width:100, editable:true},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number", editable:true},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable:true},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
gridComplete:function(){
var dataArray = $('#list483').jqGrid('getGridParam', 'data');
//do some processing here
},
pager: "#plist483",
viewrecords: true,
sortname: 'name',
grouping:true,
groupingView : {
groupField : ['name'],
groupColumnShow : [false],
groupText : ['<b>{0} - {1} Item(s)</b>']
},
caption: "Configure group header row"
});
//load data to grid here
for(var n=0;n<gridData .length;n++){
jQuery("#list483").jqGrid('addRowData', n + 1, gridData [n]);
}
}
})
assume the data that comes from ajax is same as the array in demo website as paste down here:
[
{id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
{id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
]
Assume the above data array has 1000 objects. so i need server side paging. But how do i add server side paging to this external ajax call?
Once add server side paging the following must work:
Client side sorting must work
RowList must work
thanks
The main problem: you posted some dummy code, which probably has no relation to your real code. It’s better to t the code, which more close to your real code and just to replace the data to any dummy data in the same format.
The most problem: you use datatype: "local", but write about the requirement to implement server side paging. It’s not consequent. Moreover, you fill the grid using addRowData called in the loop. It’s the worst and the slowest way, which I know. If you use datatype: "local", then you should use data: gridData to fill the data. In the way you create the grid with the data. jqGrid will sort the input data first by groupingView.groupField, then by sortname and to display the first page of the resulting data in the grid.
I'd recommend you additionally to use gridview: true and autoencode: true in all your grids to have better performance and to display the data correctly if you load pure data, which contains no HTML fragments. You recommend to remove unneeded index properties from colModel.
I recommend you to post demos in JSFiddle, which will simplify analyzing of your problems and preparing the fix of there. You can use Echo service of JSFiddle additionally(see here). I created the demo https://jsfiddle.net/OlegKi/mkgtuuzy/ for you, which uses almost your code and the following options additionally
sortname: 'id',
gridview: true,
autoencode: true,
I would recommend you additionally, don't use retro version 4.6. Instead of that you can use free jqGrid 4.13.4. It's the fork, which I develop since the end of 2014, after renaming the main jqGrid fork to Guriddo jqGrid JS (see the post), changing the license agreement and making it commercial (see the prices here). Free jqGrid 4.13.4 is full compatible with the old 4.6, but it contains a lot of fixes, performance improvements and many new features described in README to every published version and the wiki. I recommend you to read the article and the wiki articles this one and this one too, which described some small, but important improvements, which you can use in free jqGrid additionally.
The demo https://jsfiddle.net/OlegKi/mkgtuuzy/1/ uses the same code as the previous page, but includes CSS of Font Awesome 4.7, free jqGrid 4.13.4 and the option iconSet: "fontAwesome".
About the requirement of server side paging you should good understand that 1000 rows of data is a small dataset for jqGrid if you fill the data correctly. The demo demonstrates the performance of free jqGrid with 5000 rows, 13 columns and 25 rows per page. You can see the performance of local paging, sorting and filtering the data. If you would load compressed (gziped) JSON data loading from the server and add loadonce: true (and forceClientSorting: true in free jqGrid) then you can easy load all the data using datatype: "json" directly from the url. You should have very good total performance.

Refresh button to call javascript function

In a page, I have a form and a JQGrid. The form is used to enter specific filters. So the Javascript for that page contains a function which reloads the data in order to populate the JQGrid. The JQGrid has loadonce: true, so the refresh button doesn't do anything. I would need to make it call my existing function. Is it possible ?
If I understand you correctly then your problem exist because loadonce: true option changes the original datatype ("json" or "xml") to "local". It allows to use local paging, sorting and filtering of data. During the paging, filtering and sorting the grid will be reloaded, so local reloading do have sense.
If you need to reload the grid from the server you should first restore the original value of datatype and then do reloading.
So if you can use beforeRefresh callback of navGrid to reset datatype:
$("#grid").jqGrid("navGrid", "#pager", {
beforeRefresh: function () {
$(this).jqGrid("setGridParam", {datatype: "json"});
}
});
If you use free jqGrid then you can use new fromServer: true option of reloadGrid and you can use new style of options and new reloadGridOptions option of navGrid. The code will be like
$("#grid").jqGrid({
// standard jqGrid options
navOptions: {
// default options of navGrid
reloadGridOptions: {fromServer: true}
}
}).jqGrid("navGrid");
It will work with datatype:"json" or datatype:"xml".
A simple enough fix:
loadonce: false
really, setting this to true will serve no other purpose that you have specified.

jqGrid using same dataField for multiple columns

I have a jqGrid which gets its data in JSON format by setting the url parameter.
Is it possible to create multiple columns and let them display the same property of the JSON response?
For example in one column i want to display the data formatted in one way, in another column i want to display the data in another way.
Yes, it's possible. The exact implementation depends from the format which you use in the server response. If you use jsonReader: { repeatitems: false } then one can use jsonmap property in colModel. jqGrid uses jsonmap instead of name during reading of response from the server. So the solution of your problem could be about the following
colModel: [
...
{ name: "mainColumn" },
...
{ name: "duplicate1OfMainColumn", jsonmap: "mainColumn" },
...
{ name: "duplicate2OfMainColumn", jsonmap: "mainColumn" },
...
]
Of case you can define different formatter for every from the columns.
If one have to use datatype: "xml" instead of datatype: "json" then one can use xmlmap instead of jsonmap.

Make jqgrid fill column with data derived from the one passed as 'data'

I am making a jqgrid using datatype local - a json array returned from the server.
jQuery("#my_table").jqGrid(
{ datatype: "local",
colNames: ['ID', 'Name','Status', 'Date'],
colModel:[ {name:'id',index:'id', width:50, sorttype:"int"},
{name:'name',index:'name', sorttype:"string"},
{name:'status',index:'status', width:50, sorttype:"string"},
{name:'date',index:'date', width:120, align:"left",sorttype:"date"} ],
data: result,
...});
However, one of the columns - status - is represented as numbers.
I would like to display this data as the respective strings. For example 'Active' for status = 1 and 'Inactive' for status = 0.
Is it possible to do this directly in jqgrid, for example as additional colModel parameter or jqgrid method?
I have read through the documentation of jqgrid and failed to notice way of addressing this problem.
I don't want to change the data returned from the server, as I don't see any point in passing redundant information.
I would also prefer if I don't have to manipulate the result array in javascript directly as I don't see point in traversing the array 2 times (once to change the status and the second for jqgrid loading).
You can use formatter: "select":
{name:'status',index:'status', width:50,
formatter:'select', editoptions: {value:'0:Inactive;1:Active'}}
Somewhere in js code:
var status_lines = ['Inactive', 'Active'];
function status_formatter(cellvalue, options, rowObject) {
return status_lines[cellvalue];
}
Then in colModel:
{name:'status',index:'status', width:50, sorttype:"string", formatter:status_formatter}
And of course, you can just do this in formatter:function(c,o,r){...} style if you prefer that.

Categories