my below code not worked on IE 8.
Its a JQGrid (treegrid) to display treegrid format from json server. it worked at firefox.
$(function () {
"use strict";
$("#tree").jqGrid({
url: "http://myJSON-URL/",
datatype: "json",
colNames: ['id', 'Prestations'],
colModel: [
{ name: 'id', width: 100, key: true, hidden: true },
{ name: 'name', width: 785, sortable: false }
],
sortname: 'id',
sortorder: "asc",
hiddengrid: true,
gridview: true,
treeGrid: true,
treeGridModel: "adjacency",
ExpandColumn: 'name',
ExpandColClick: true,
jsonReader: { repeatitems: false, root: function (obj) { return obj; } },
height: "auto"
});
});
I think its AJAX cors problem.
Any idea? thanx.
The json server side responsed these:
json = [
{
"id": "1",
"name": "ECHANGEUR",
"level": "0",
"parent": "null",
"isLeaf": false,
"expanded": false,
"loaded": true
},
{
"id": "1_1",
"name": "Intervention Aller sur Site",
"level": "1",
"parent": "1",
"isLeaf": false,
"expanded": false,
"loaded": true
},
{
"id": "1_1_1",
"name": "Date et heure d'arrivée sur le site",
"level": "2",
"parent": "1_1",
"isLeaf": true,
"expanded": true,
"loaded": true
},
{
"id": "1_1_2",
"name": "Consignation de l'échangeur",
"level": "2",
"parent": "1_1",
"isLeaf": true,
"expanded": true,
"loaded": true
}
];
You have just the problem with the bug specific for jqGrid 4.7.x. You can try tree demos which uses different versions of jqGrid and the same code and JSON which you posted:
demo46, demo47, demo48, demo-free-jqGrid-GitHub.
(The last one uses free jqGrid 4.8 which I published recently, see here and here).
You can verify that the demo which uses jqGrid 4.7 only have the problem in IE8 and both other demos have no problem. You can read more about the bug here or here.
Related
My datatable columns header is not aligned with their content:
Here is how it looks like:
Here is a datatable code:
$("#myTable").dataTable(
{
"sDom": 't<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"i>',
//sDom:
//'l' - Length changing
//'f' - Filtering input
//'t' - The table!
//'i' - Information
//'p' - Pagination
//'r' - pRocessing
"bAutoWidth": false,
"aoColumns": [
{ "sSortDataType": "dom-checkbox" }, //checkbox
{ "sType": "string", "bSortable": true }, //CreatedDate
{ "sType": "string", "bSortable": true }, //CreatedBy
{ "sType": "string", "bSortable": true }, //Category
{ "sType": "string", "bSortable": false }, //Note
{ "sType": "string", "bSortable": true}, //Application
{ "sType": "string", "bSortable": false } //Update Button
],
"sScrollY": "180px",
"bPaginate": false,
"bFilter": false,
"aaSorting": [],
"bAutoWidth": false,
"bInfo": true,
"bJQueryUI": true
});
What am I missing?
I have found a solution for my case.
I've been searching online but couldn't find a solution that would help in my case, so I played with a css and found what fixed my problem
My table has an id #myTable.
So, I just needed to set the particular columns' left padding:
#myTable td:nth-child(6){
padding-left:50px;
}
#myTable td:nth-child(7){
padding-left:50px;
}
And it fixed the problem:
How can i set fixed right column(action) in laravel datatables like this simple example - not work in laravel). Thanks
tableWatches = $('.datatable-watches').DataTable({
orderCellsTop: true,
fixedHeader: false,
dom: "Bfrtip",
"pageLength": 50,
"processing": true,
"serverSide": true,
scrollY: true,
scrollX: true,
scrollCollapse: true,
paging:false,
fixedColumns: {
leftColumns: 1,
rightColumns: 1
},
"ajax": {
url: "/admin/watches/all-watches",
data: {
condition: condition,
}
},
"searchCols": [
.................
],
columns: [
..................
],
});
Method, which created table content
And this part (
fixedColumns: {
leftColumns: 1,
rightColumns: 1
},
not worked, without errors and warnings, columns still arent fixed.
Need more explanation!
Totally there is no difference between plain js datatable and yajra/laravel-datatables-oracle.
If you wanna use it locally, just need a 100% with table:
<table id="users" class="table responsive" width="100%"></table>
And a js script to feed datatable by jso data:
$('#users').DataTable({
responsive: true,
"data": [
{
"first_name": "the first name1",
"last_name": "the last name1"
},
{
"first_name": "the first name2",
"last_name": "the last name2"
},
]
"columns": [
{
data: "first_name", title: 'first_name',
width: '10%', // You can define each column width in the table
sortable: true,
searchable: false
},
{
data: "last_name", title: 'last_name',
width: '10%',
sortable: true,
searchable: false
}
]
});
Also for server side feeding datatables, Just use ajax:
$('#users').DataTable({
responsive: true,
"columns": [
{
data: "first_name", title: 'first_name',
width: '10%', // You can define each column width in the table
sortable: true,
searchable: false
},
{
data: "last_name", title: 'last_name',
width: '10%',
sortable: true,
searchable: false
}
]
ajax: {
url: your_post_url_returning_datatable_object_json,
type: 'POST'
},
});
As i mentioned, you can define each column of table or make horizontally scrollable:
scrollX: '100%',
If i search "Hossain" datatable is not getting sorted. Though this data is available in datatable. How can i solve this problem?
var table = $('#list_table').DataTable( {
"processing": true,
"serverSide": true,
"destroy": true,
"searching": true,
"ordering": true,
"bInfo": true,
"paging": true,
"ajax": {
"url": "{{URL::to('/')}}/current_employeelist",
"type": "POST",
"headers":{'X-CSRF-TOKEN': '{{ csrf_token() }}'},
"data": {location: $("#location").val()}
},
"columns": [
{
"render": function (data, type, JsonResultRow, meta) {
return '<img src="{{asset('employee_image')}}/'+JsonResultRow.Images+'" style="height:30px; width:30px; border-radius: 30px;"/>';
}
},
{ "data": "Link",
"mRender": function (data, type, full) {
return '<a target="_blank" href="{{URL::to('/')}}/employeeinfo/'+full.id+'">'+full.employee_name+'</a>';
}
},
{ "data": "location_name" },
{ "data": "depertment_name" },
{ "data": "designation_name" },
{ "data": "contact_number" },
{ "data": "joining_date" },
#permission('EditEmployeeInfo')
{ "data": "Link", name: 'action', orderable: false, searchable: false},
#endpermission
],[enter image description here][1]
"order": [[0, 'asc']]
});
I want to get searching actual data from datatable.
Image is here
My jqGrid is coming empty with JSON call. Though it is working with datatype='jsonstring' but not with json type. here is my JSON
{
"d": {
"total": 6,
"page": 1,
"records": 6,
"rows": [
{
"id": 1,
"Name": "James",
"EMPID": "0000000056",
"EMPDATE": "",
"JOBTYPE": "REQ",
"DEPTID": "FIN",
"STATUS": "P1"
},
{
"id": 2,
"Name": "James",
"EMPID": "R2",
"EMPDATE": "",
"JOBTYPE": "REQ",
"DEPTID": "FIN",
"STATUS": "P1"
},
{
"id": 3,
"Name": "James",
"EMPID": "V2",
"EMPDATE": "",
"JOBTYPE": "VOU",
"DEPTID": "FIN",
"STATUS": ""
},
{
"id": 4,
"Name": "James",
"EMPID": "V1",
"EMPDATE": "",
"JOBTYPE": "VOU",
"DEPTID": "FIN",
"STATUS": ""
},
{
"id": 5,
"Name": "James",
"EMPID": "009017",
"EMPDATE": "",
"JOBTYPE": "PY",
"DEPTID": "",
"STATUS": "V2"
},
{
"id": 6,
"Name": "James",
"EMPID": "009018",
"EMPDATE": "",
"JOBTYPE": "PY",
"DEPTID": "",
"STATUS": "V1"
}
]
}
}
and my jqGrid call from javascript is
function getgrid()
{
$("#list").jqGrid({
url:'http://10.240.26.41/GetGridFields',
datatype: 'json',
mtype: 'GET',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
//serializeGridData: function (postData) {
// return JSON.stringify(postData);
// },
jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
colModel: [
{ name: 'id', key: true, width: 60, align: "center", hidden: false },
{ name: 'Name', width: 80, sortable: false, hidden: false },
{ name: 'EMPID', width: 180, sortable: false, hidden: false },
{ name: 'EMPDATE', width: 180, sortable: false, hidden: false },
{ name: 'JOBTYPE', width: 180, sortable: false, hidden: false },
{ name: 'DEPTID', width: 180, sortable: false, hidden: false },
{ name: 'STATUS', width: 180, sortable: false, hidden: false }
],
rowNum: 10,
rowList: [10, 20, 300],
pager: "#pager",
viewrecords: true,
gridview: true,
rownumbers: true,
height: 230,
caption: 'Emp Detail'
})
}
Please let me know where i am wrong here. It is working fine with jsonstring.
How you can see on the demo your jqGrid can read your JSON data. I made in the demo only minimal optimization changes which don't important for your main problem.
So I suppose, that you have either the problem with the usage of full URL (you should use '/GetGridFields' instead of 'http://10.240.26.41/GetGridFields') because you can't get Ajax call to another IP host because of the same origin policy. One other possible reason is that you have wrong 'Content-Type' or some other HTTP header. You can examine the HTTP headers with respect of Fiddler, Firebug or just with Developer Tools of IE or Chrome (see "Network" tab).
In any way I would recommend you to include loadError handler to jqGrid. See the answer for details.
I suggest you validate your json result using jslint since using jsonstring is working could be a format type problem
I'm using the method addJsonRows to add local data to a jQgrid. As this method disables the sorting I need another solution. One restriction: I can't set the url and fetch the data from the server because the data was passed through another component.
Underneath snippet enlightens the case. The commented line shows the restriction, I replaced it by defining a local variable to have a test case.
<script type="text/javascript" language="javascript">
function loadPackageGrid() {
// Get package grid data from hidden input.
// var data = eval("("+$("#qsmId").find(".qsm-data-packages").first().val()+")");
var data = {
"page": "1",
"records": "2",
"rows": [
{ "id": "83123a", "PackageCode": "83123a" },
{ "id": "83566a", "PackageCode": "83566a" }
]
};
$("#packages")[0].addJSONData(data);
};
$(document).ready(function() {
$("#packages").jqGrid({
colModel: [
{ name: 'PackageCode', index: 'PackageCode', width: "110" },
{ name: 'Name', index: 'Name', width: "300" }
],
pager: $('#packagePager'),
datatype: "local",
rowNum: 10000,
viewrecords: true,
caption: "Packages",
height: 150,
pgbuttons: false,
loadonce: true
});
});
</script>
I wonder how I could do this in an other (better) way to keep the sorting feature.
I tried something with the data option, without result.
I suppose that the same question is interesting for other persons. So +1 from me for the question.
You can solve the problem in at least two ways. The first one you can use datatype: "jsonstring" and datastr: data. In the case you need to add additional parameter jsonReader: { repeatitems: false }.
The second way is to use datatype: "local" and data: data.rows. In the case the localReader will be used to read the data from the data.rows array. The default localReader can read the data.
The corresponding demos are here and here.
I modified a little your data: filled "Name" column and included the third item in the input data.
Now you can use local paging, sorting and filtering/searching of the data. I included a little more code to demonstrate the features. Below you find the code of one from the demos:
$(document).ready(function () {
'use strict';
var data = {
"page": "1",
"records": "3",
"rows": [
{ "id": "83123a", Name: "Name 1", "PackageCode": "83123a" },
{ "id": "83432a", Name: "Name 3", "PackageCode": "83432a" },
{ "id": "83566a", Name: "Name 2", "PackageCode": "83566a" }
]
},
grid = $("#packages");
grid.jqGrid({
colModel: [
{ name: 'PackageCode', index: 'PackageCode', width: "110" },
{ name: 'Name', index: 'Name', width: "300" }
],
pager: '#packagePager',
datatype: "jsonstring",
datastr: data,
jsonReader: { repeatitems: false },
rowNum: 2,
viewrecords: true,
caption: "Packages",
height: "auto",
ignoreCase: true
});
grid.jqGrid('navGrid', '#packagePager',
{ add: false, edit: false, del: false }, {}, {}, {},
{ multipleSearch: true, multipleGroup: true });
grid.jqGrid('filterToolbar', { defaultSearch: 'cn', stringResult: true });
});
UPDATED: I decided to add more details about the differences between datatype: "jsonstring" and datatype: "local" scenarios because the old answer be read and voted by many readers.
I suggest to modify the above code a little to show better the differences. The fist code uses datatype: "jsonstring"
$(function () {
"use strict";
var data = [
{ id: "10", Name: "Name 1", PackageCode: "83123a", other: "x", subobject: { x: "a", y: "b", z: [1, 2, 3]} },
{ id: "20", Name: "Name 3", PackageCode: "83432a", other: "y", subobject: { x: "c", y: "d", z: [4, 5, 6]} },
{ id: "30", Name: "Name 2", PackageCode: "83566a", other: "z", subobject: { x: "e", y: "f", z: [7, 8, 9]} }
],
$grid = $("#packages");
$grid.jqGrid({
data: data,
datatype: "local",
colModel: [
{ name: "PackageCode", width: 110 },
{ name: "Name", width: 300 }
],
pager: "#packagePager",
rowNum: 2,
rowList: [1, 2, 10],
viewrecords: true,
rownumbers: true,
caption: "Packages",
height: "auto",
sortname: "Name",
autoencode: true,
gridview: true,
ignoreCase: true,
onSelectRow: function (rowid) {
var rowData = $(this).jqGrid("getLocalRow", rowid), str = "", p;
for (p in rowData) {
if (rowData.hasOwnProperty(p)) {
str += "propery \"" + p + "\" + have the value \"" + rowData[p] + "\n";
}
}
alert("all properties of selected row having id=\"" + rowid + "\":\n\n" + str);
}
});
$grid.jqGrid("navGrid", "#packagePager",
{ add: false, edit: false, del: false }, {}, {}, {},
{ multipleSearch: true, multipleGroup: true });
$grid.jqGrid("filterToolbar", { defaultSearch: "cn", stringResult: true });
});
It displays (see the demo)
One can see unsorted items in the same order like input data. The items of input data will be saved in internal parameters data and _index. getLocalRow method used in onSelectRow shows that items of internal data contains only properties of input items which names corresponds to name property of some jqGrid columns. Additionally unneeded _id_ property will be added.
On the other side the next demo which uses datatype: "local" displays sorted data and all properties inclusive complex objects will be still saved in the internal data:
The code used in the last demo is included below:
$(function () {
"use strict";
var data = [
{ id: "10", Name: "Name 1", PackageCode: "83123a", other: "x", subobject: { x: "a", y: "b", z: [1, 2, 3]} },
{ id: "20", Name: "Name 3", PackageCode: "83432a", other: "y", subobject: { x: "c", y: "d", z: [4, 5, 6]} },
{ id: "30", Name: "Name 2", PackageCode: "83566a", other: "z", subobject: { x: "e", y: "f", z: [7, 8, 9]} }
],
$grid = $("#packages");
$grid.jqGrid({
data: data,
datatype: "local",
colModel: [
{ name: "PackageCode", width: 110 },
{ name: "Name", width: 300 }
],
pager: "#packagePager",
rowNum: 2,
rowList: [1, 2, 10],
viewrecords: true,
rownumbers: true,
caption: "Packages",
height: "auto",
sortname: "Name",
autoencode: true,
gridview: true,
ignoreCase: true,
onSelectRow: function (rowid) {
var rowData = $(this).jqGrid("getLocalRow", rowid), str = "", p;
for (p in rowData) {
if (rowData.hasOwnProperty(p)) {
str += "propery \"" + p + "\" + have the value \"" + rowData[p] + "\"\n";
}
}
alert("all properties of selected row having id=\"" + rowid + "\":\n\n" + str);
}
});
$grid.jqGrid("navGrid", "#packagePager",
{ add: false, edit: false, del: false }, {}, {}, {},
{ multipleSearch: true, multipleGroup: true });
$grid.jqGrid("filterToolbar", { defaultSearch: "cn", stringResult: true });
});
So I would recommend to use datatype: "local" instead of datatype: "jsonstring". datatype: "jsonstring" could have some advantages only in some very specific scenarios.
Great advice, Oleg.
In my web app, I pre-loaded some JSON data which looked like this:
{
WorkflowRuns:
[
{
WorkflowRunID: 1000,
WorkflowRunName: "First record",
},
{
WorkflowRunID: 1001,
WorkflowRunName: "Second record",
}
],
UserInformation:
{
Forename: "Mike",
Surname: "Gledhill"
}
}
And here's the code I needed to create the jqGrid, just based on the WorkflowRuns part of this JSON:
var JSONstring = '{ WorkflowRuns: [ { WorkflowRunID: 1000, .. etc .. } ]';
$("#tblWorkflowRuns").jqGrid({
datatype: "local",
data: JSONstring.WorkflowRuns,
localReader: {
id: "WorkflowRunID",
repeatitems: false
},
...
});
This was a bit of trial and error though.
For example, jqGrid seemed to ignore datastr: JSONstring for me.
And notice how, with local data, I needed to use localReader, rather than jsonReader, otherwise it wouldn't set the row IDs properly.
Hope this helps.