Spec: JqGrid 1.11.2
Browser : Firefox 36.0.4
I have successfully be able to load json data on to a jQGrid via Ajax technique on click of a button.
Problem : I need some extra data "userdata" to be fetched along with the json-data to be loaded on to the page other then the jQGrid.
Grid Data:-
{
"total":"1",
"page":"1",
"records":"10",
"userdata":{"selZd":"23","selYd":"22","selXd":"21"},
"rows":[
{"id":"1","cell":["PDF","J2EEHandbook.pdf","/PDF Handbook.pdf"]}
]
}
Ajax-function : -
$(document).ready(function() {
$('#buttSerch').click(function() {
var newurl = 'Data.jsp?srchword='+
$('#srchTxt').val() +'&srchType='+gdsrctp;
$('#'+ gdivid).jqGrid().setGridParam(
{url : newurl }).trigger("reloadGrid");
//?? fetch userdata
});
});
Question : I need to fetch the data "userdata" in the Ajax function
How can this be achieved.
with regards
Karthik
The userdata can be accessed by usage getGridParam method with parameter "userData" (!! the case is important it should be userdata in the JSON data and "userData" in getGridParam method):
var userdata = $('#'+ gdivid).jqGrid("getGridParam", "userData");
Code for the Grid
colNames:['CATEGORY','PAGENO','CONTENTFILENAME','DATEOFCRTE','DATEOFINDEX','SIZEOF','UCODEDTLS','CONTENTEXTN','PATHOFCONTENT','CONTENT','DOCNUM','DOCWIGHT'],
colModel:[
{name:'CATEGORY',index:'true',width:'5',sortable:'true',align:'left',editable: true,formatter:iconColumnFormat },
{name:'PAGENO',index:'true',width:'3',sortable:'true',align:'left',editable: true, },
{name:'CONTENTFILENAME',index:'true',width:'25',sortable:'true',align:'left',editable: true, },
{name:'DATEOFCRTE',index:'true',width:'10',sortable:'true',align:'left',editable: true, },
{name:'DATEOFINDEX',index:'true',width:'10',sortable:'true',align:'left',editable: true, },
{name:'SIZEOF',index:'true',width:'8',sortable:'true',align:'left',editable: true, },
{name:'UCODEDTLS',index:'true',width:'8',sortable:'true',align:'left',editable: true, },
{name:'CONTENTEXTN',index:'true',width:'5',sortable:'true',align:'left',editable: true, },
{name:'PATHOFCONTENT',index:'true',width:'40',sortable:'true',align:'left',editable: true, },
{name:'CONTENT',index:'true',width:'15',sortable:'true',align:'left',editable: true,formatter:linkdialogColumnFormat },
{name:'DOCNUM',index:'true',width:'5',sortable:'true',align:'left',editable: true, },
{name:'DOCWIGHT',index:'true',width:'8',sortable:'true',align:'left',editable: true, }
],
url:'dummyData.jsp',
datatype:"json",
jsonReader:{root:'rows',page:'page',total:'total',records:'records', userdata:'userdata',cell:'cell',id:'id'},
loadComplete:'urlxdatafetch',
mtype:'GET',
hidegrid:false,
loadonce:true,
caption:"'Grid from Database -jsonstring'",
width:1200,
height:200,
rowNum:"10",
rowList:[10,50,100],
sortable:true,
sortorder:"desc",
shrinkToFit:true,
autowidth:true,
rownumbers:true,
footerrow:false,
viewsortcols:true,
viewrecords:true,
gridview:true,
autoencode:"true",
multiselect:true,
loadtext:"Data-Organized",
pager : "#pgerId",
Related
I have below code
With this I see data gets loaded first time and scroll is displayed. But when i hit scroll bar ajax call does not go to server ?
Also once ajax call goes, how to display the json data retuned from server ? I did not get any good example on google related to scrolling with
server side processing ?
function(){
oTable= $('#customerTable').dataTable({
"bJQueryUI": true,
"iDisplayStart":0,
"iDisplayLength": 10,
"bRetrieve": true,
"bServerSide": true,
"bFilter": false,
"bInfo": false,
"bAutoWidth": false,
"aaSorting": [[1,'desc']],
"sScrollY": "600px",
"iScrollLoadGap": 50,
"sAjaxSource": "custom_url",
"ajax" : {
"url" : "custom_url"
"type" : "GET",
"data" : function(d) {
}
},
"aoColumns": [
{"aTargets": [0],"sName":"customer.fullName", "mData": function(response){
return response.customer.fullName;
}, "bSortable": false},
{"aTargets": [1],"sName":"updatedDate", "mData": function(response){
var updateDate = response.updatedDt;
return updateDate;
}, "bSortable": true},
]
"fnDrawCallback": function(oSettings) {
}
});
}
I have a grid that has a datepicker with a button and a checkbox to reload the grid when the date changes. The datepicker is initialized to today's. This works fine. However I can't figure how to override the default url in the grid. Whenever the grid which is a tree is loaded it reads the default from the url configuration. Only when I click the button then it reloads the treee with the selected date. Even worst when I click in the icons in the tree to expand the child elements it overrides the date and all the loaded data with the value of the default URL. Can somebody tell me how to set the url properly? Also I don't understand why clicking in the elements reloads the tree since I have property loadonce=true.
thanks
$(document).ready(function(){
$("#list").jqGrid({
url : "/reconcile?unMatchedOnly=true",
datatype : "json",
mtype : 'GET',
colModel : [
{name : "data.key.busnDate", label : "Business Date", hidden:false, sorttype:"date", width : 100 },
{name : "data.product", label : "Product", sorttype:"string", width : 50, editable : false},
{name : "data.quantityBought", label : "Quantity Bought", sorttype:"int", width : 100, editable : false},
{name : "matches", label : "match", "edittype":"checkbox","formatter":"checkbox", width : 25, editable : false}
],
cmTemplate: { width: 70 },
treeGrid: true,
pager : '#pager',
treeGridModel: "adjacency",
ExpandColumn: "data.key.busnDate",
rowNum : 25,
height: 'auto',
rowList : [ 25,50,100,200 ],
loadonce:true,
});
jQuery("#list").jqGrid('navGrid', '#pager', {
edit : false,
add : false,
del : false,
view : true,
search : true
});
$('#datePick').datepicker({
onSelect: function (dateText, inst) {
var e = $("#list").data("events");
if (typeof (e) !== "undefined" && typeof (e.reloadGrid) !== "undefined") {
$("#list").trigger("reloadGrid");
}
}
}
);
$("#datePick").datepicker('setDate', new Date());
jQuery("#list").setGridParam({url:'/reconcile?datePick=' + $("#datePick").val() + '&unMatchedOnly=' + $("#unMatchedOnly").val(),page:1});
var url = '/reconcile?datePick=' + $("#datePick").val() + '&unMatchedOnly=' + $("#unMatchedOnly").val();
$("#list").jqGrid('setGridParam', { url: url });
});
$('#showSelected').on('click', function () {
var url = '/reconcile?datePick=' + $("#datePick").val() + '&unMatchedOnly=' + $("#unMatchedOnly").val();
$("#list").jqGrid('setGridParam', { url: url });
$("#list").trigger("reloadGrid");
});
I can't reproduce the problem, which you reports. If you want to load the data of TreeGrid at once then you don't need to use loadonce: true option. Instead of that the items of data should contains the property "loaded":true.
If you need to send some additional parameter to the server then you should use postData parameter with properties defined as functions (see the old answer). You can just use
url: "/reconcile",
postData: {
datePick: function () { return $("#datePick").val(); },
unMatchedOnly: function () { return $("#unMatchedOnly").val(); }
}
As the result the current data from #datePick and #unMatchedOnly will be sent to the server on every loading of the grid. To reload the TreeGrid you will need just use $("#list").trigger("reloadGrid");.
If you do loads the data of the grid on demand then expanding of nodes adds nodeid, n_level and parentid parameters to postData and the value of treeANode parameter will be changed from -1 to the rowid of expanding node. To reset the parameters before reloading you will need to reset treeANode parameter to -1.
I don't know the format of the data, which returns url: "/reconcile", but I suppose that you can use the following code
$(document).ready(function(){
var $grid = $("#list"),
fullReloadOfTreeGrid = function () {
var p = $grid.jqGrid("getGridParam"); // get reference to parameters
p.treeANode = -1; // be sure that we reload full grid
$grid.trigger("reloadGrid");
};
$('#datePick').datepicker({
onSelect: function (dateText, inst) {
fullReloadOfTreeGrid();
}
});
$("#datePick").datepicker('setDate', new Date());
$grid.jqGrid({
url: "/reconcile?unMatchedOnly=true",
datatype: "json",
postData: {
datePick: function () { return $("#datePick").val(); },
unMatchedOnly: function () { return $("#unMatchedOnly").val(); }
},
colModel: [
{name: "data.key.busnDate", label: "Business Date",
sorttype:"date", width : 100 },
{name: "data.product", label: "Product", width: 50},
{name: "data.quantityBought", label: "Quantity Bought",
sorttype:"int", width: 100},
{name: "matches", label: "match",
"template: "booleanCheckbox", width : 25}
],
cmTemplate: { width: 70 },
treeGrid: true,
pager: true,
treeGridModel: "adjacency",
ExpandColumn: "data.key.busnDate"
}).jqGrid('navGrid', {
edit : false,
add : false,
del : false,
view : true
});
$('#showSelected').on('click', function () {
fullReloadOfTreeGrid();
});
});
As I wrote before, resetting of treeANode to -1 will be not required if you really correctly loads all the nodes at once (with loaded:true property in all nodes).
I would like to use the Kendo grid with remote data virtualization. I also need to have a custom method for the transport.read property.
My grid is configured like this:
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
serverPaging: true,
serverSorting: true,
pageSize: 100,
transport: {
read: function (options) {
// Get the template items, which could be products, collections, blogs or articles
getTemplateItems().then(function (data) {
options.success(data);
});
}
}
},
schema: {
total: function(response) {
return 2000;
}
},
height: 543,
scrollable: {
virtual: true
},
sortable: true,
columns: [
{ field: "title", title: "Title" }
]
});
});
function getTemplateItems() {
var deferred = $q.defer();
smartseoEntityMapping.getEntityInfo({ mappedEntityType: mappedEntityType.Product }).$promise.then(function (data) {
deferred.resolve(data);
});
return deferred.promise;
}
The problem is that the read method is only called once when the grid is initialized. It is not called when the scroll reaches the last item in the current visible set.
I suspect that the grid needs the total number of items but I cannot understand how to set the total number of items. Setting a method for the schema.total property does not work because the method is never called.
So I would like to ask you, is this scenario possible at all, to have the virtualization work with a custom transport.read method, which needs to be called every time to get the next page of data?
Why I am using a custom read? Well I cannot just set an url for the transport.read property because my remote call is made via an angularjs resource, involves setting authentication, etc...
schema is a property of a kendo datasource. It looks like you have it outside of the datasource.
Should be:
$("#grid").kendoGrid({
dataSource: {
serverPaging: true,
serverSorting: true,
pageSize: 100,
transport: {
read: function (options) {
// Get the template items, which could be products, collections, blogs or articles
getTemplateItems().then(function (data) {
options.success(data);
});
}
},
schema: {
total: function(response) {
return 2000;
}
}
},
height: 543,
scrollable: {
virtual: true
},
sortable: true,
columns: [
{ field: "title", title: "Title" }
]
});
I cannot get Kendo Grid to populate from server side data.
I have a grid builder function as as follows:
var build = function (carrier, date) {
var urlBase = 'my base url';
var datasource = new kendo.data.DataSource({
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
schema: {
model: {
id: 'Id',
fields: {
StatementDate: { type: "string", editable: false },
CobDate: { type: "string", editable: false },
//lots more fields
Status: { type: "string", editable: false },
Matched: { type: "boolean", editable: true }
}
}
},
transport: {
read: function (options) {
var address = urlBase + '/' + carrier + '/' + date;
$.ajax({
url: address,
type: "POST",
data: JSON.stringify(options.data),
contentType: "application/json",
success: function (result) {
options.success(result);
},
error: function (result) {
options.error(result);
}
});
},
//update function omitted
parameterMap: function (data, operation) {
if (operation == "read") {
return JSON.stringify(data)
}
},
change: function (e) {
var data = this.data();
console.log(data.length); // displays "77"
}
}
});
return datasource;
};
return {
build: build
}
Grid Definition
elem.kendoGrid({
columns: [
{ field: "StatementDate", title: "State Date", width: 125 },
{ field: "CobDate", title: "COB Date", width: 100 },
//lots more fields
{ command: ["edit"], title: " ", width: "85px"}],
resizable: true,
sortable: true,
editable: "inline",
columnMenu: true,
filterable: true,
reorderable: true,
pageable: true,
selectable: "multiple",
change: this.onSelectedRecordChanged,
toolbar: kendo.template($('#' + templateName).html()),
scrollable: {
virtual: true
},
height: 800
});
I trigger the update via a button click. When I look at the response I see the data. Looks good but the grid will not show the data. It has previously worked fine when data was completely client side.
If I break point on the AJAX call back. I see the correct results.
The grid is bound with data bind. The datasource is a property on a viewmodel.
<div id="grid" data-bind="source: dataSource"></div>
At the start of the app. I create view model
var viewModel= kendo.observable(new GridViewModel(...
and bind
kendo.bind($('#grid'), viewModel);
If I look at the datasource attached to the grid, I see data for the page as expected
This has previously worked fine when data was client side.
I have tried using read() on datasource, and refresh() method on grid. Neither seems to work.
Example response content from server
{"Data":[{"Id": //lots more fields, 20 records],"Total":90375,"AggregateResults":null,"Errors":null}
Any help very much appreciated.
I found the cause in datasource schema missing
{ data: 'Data', total: 'Total' }
I am very new to jqGrid. I am trying to load simple jqgrid using asp.net web api.
The api send back the list of emailDto. The emailDto is plain class with 3 public properties
The problem is the jqgrid is not getting populated. Any help is very much appreciated.
function dataBindToGrid() {
var lastsel;
$("#emailgrid").jqGrid({
url: '/api/email/',
datatype: "json",
mytype: 'GET',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
colNames: ['Address ID', 'Type', 'Email'],
colModel: [{ name: 'Address_ID', width: 70, primaryKey: true, editable: false, sortable: false, hidden: false, align: 'left' },
{ name: 'Email_Type', width: 70, editable: true, align: 'left', sortable: false },
{ name: 'Email_Address', width: 200, editable: true, align: 'left', sortable: false }
],
onSelectRow: function (id) {
if (id && id !== lastsel) {
var grid = $("#emailgrid");
grid.restoreRow(lastsel);
grid.editRow(id, true);
lastsel = id;
}
},
//This event fires after all the data is loaded into the grid
gridComplete: function () {
//Get ids for all current rows
var dataIds = $('#emailgrid').jqGrid('getDataIDs');
for (var i = 0; i < dataIds.length; i++) {
//Put row in edit state
$("#emailgrid").jqGrid('editRow', dataIds[i], false);
}
},
rowNum: 3,
viewrecords: true,
caption: "Email Addresses"
});
}
When configured for jsondatatype, jqGrid expects data in the following json format:
{
"total": "xxx",
"page": "yyy",
"records": "zzz",
"rows" : [
{"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
{"id" :"2", "cell":["cell21", "cell22", "cell23"]},
...
]
}
data returned must match this otherwise it will not work. This is the default json structure (you can change this if you want). Depending on what browser you are using, you should be able to see the ajax request and response with what data is being sent and returned when the grid is building itself (Firefox use firebug, IE use the developer toolbar)
as per here
Solved!
Just added to jqGrid below and it works.
jsonReader: {
repeatitems: false,
page: function () { return 1; },
root: function (obj) { return obj; },
records: function (obj) { return obj.length; }
},