Is it possible to load from server via ajax JQGrid structure(columns) together with data ?
If possible, could you please show an example ?
There's no reason why not, you just ned to do things (asynchronously) in the correct order, something like this (forgive the psuedo code)
var jqGridOptions = {
/* various options here */
}
$.ajax({
url: jqGridStructureUrl
}).success(function(jqGridColumns){
// Add the col model to the other options
jqGridOptions.colModel = jqGridColumns.colModel
jqGridOptions.colNames = jqGridColumns.colNames
// set up the jqGrid
$j("#gridId").jqGrid(jqGridOptions)
})
This will get you part of the way there. I guess you'll also be wanting to load Data via Ajax in which case you can set the "Data" option on the jqGrid settings to a callback function (this is not very well documented) - OR you could fire off TWO ajax calls, one for data and one for structure and then when they're BOTH back munge the two together and instantiate your grid object
You can create jqGrid with all hidden columns. You need create grid with large enough number of columns. The names of the columns (in colModel) can have some generic values like "c1", "c2", "c3" ... The response from the server can contains colModel information together with the data. Inside of beforeProcessing callback you can change colModel and set new column headers. The answer demonstrates setting of column headers dynamically. The code column be simplified by usage setLabel method. Another answer demonstrates how to use setColProp to set the most settings of colModel full dynamically. If you would combine the solution with the usage of setColWidth method which I posted in the answer (see here too) then you could create perfect solution.
Related
In jqgrid I use this part of code to get all data from my jqgrid table:
var allRowsInGrid = $('#table_outgoing_calls_report').jqGrid('getGridParam','data');
When I console.log allRowsInGrid it shows all data and shows actual length of table data count. But then I try to use this array (allRowsInGrid) it show only data that I see on the screen. Furthermore, if I try to console.log allRowsInGrid.length it shows length of data that I see.
I use json datatype and loadonce: true. Tried everything but nothing works.
This piece of code:
var allRowsInGrid = $('#table_outgoing_calls_report').jqGrid('getGridParam','data');
console.log(allRowsInGrid);
console.log(allRowsInGrid.length);
shows this:
Does anyone know how it can be possible?
The problem is not what you do, but when and where you use 'getGridParam','data'. You can use data after the data are loaded first from the server. You can use there for example inside of loadComplete or inside of beforeProcessing callback. I'd recommend you to read the old answer additionally, which describes the differences between loadComplete and gridComplete. In the most cases gridComplete isn't the good choice.
Moreover, loadComplete will be called not only after the first loading from the server. It will be called later on every local sorting, paging and filtering/searching. If one needs to make some actions once after loading the data from the server then beforeProcessing callback is good. It contains full data returned from the server before the data will be processed by jqGrid. One can for example modify or extend the data inside of beforeProcessing callback and jqGrid will see the modified data as if it was returned so from the server.
One more option - to place some code in loadComplete inside of if ($(this).jqGrid("getGridParam", "datatype") !== "local") { ... }. It allows to do some action after the data loaded from the server have processed and the first page was displayed.
I'm using DataTables 1.10.10. I would like to modify the main plugin Javascript to override the iDisplayLength value to -1. That way ALL my datatables show "All" by default, and the user can filter down if they wish.
Where in the file would this be set? I'm having trouble finding it. I've searched for iDisplayLength and tried overriding the value with -1, but it's not taking so I'm guessing it's being set somewhere that I'm not looking.
I think, changing the source files has main drawbacks. For example, in case you want to update the library, all changes are lost. Why not creating a personal plugin for the DataTables library. Like:
$.fn.myDataTable = function() {
$(this).dataTable( {
"iDisplayLength": -1
});
};
// call
$( ".allTables" ).myDataTable();
Found it. On line 6262 (in my jquery.dataTable.js file at least), before the following code
// Map the initialisation options to the settings object
_fnMap( oSettings.oFeatures, oInit, [ .....
I added the following line
oInit.iDisplayLength = -1;
DataTable now loads with show "All" always, even if the report has the iDisplayLength specified on it.
I am trying to create a programmatic filter. I have a dijit.tree and a dojo gridx using the same source on a jsp. When user clicks the tree node, I want to use the node as a filter and show all rows matching it in the gridx
This is my code I have now for the onClick event of the dijit tree node.
var global=this;
treeWidget.onClick = function(item){
global.grid.filter.setFilter(global.grid.filter.grid.filter.moduleClass.or("test"));
Earlier I asked for a sample expression. I went and tried the code above and seems to
refresh the grid but comes back as No items to display. I do have data that match test and if I do a manual filter I see data returning. What am I missing here.
At https://github.com/oria/gridx/wiki/How-to-filter-Gridx-with-any-condition%3F ( see Filter Expressions)
I was able to accomplish the task using the following code in the diji.tree onClick event.
global.grid.filterBar.applyFilter({
conditions: [{
condition: 'contain',
value: 'test'
}]
});
This is a comment rather than an answer, but I can't post comments yet.
Can you post a working snippet of code? That's not complete, as I don't see your store that you're specifying, etc.
I usually do a myinstancename.grid.body.refresh(); to accomplish a proper refresh.
I'd like to add a EventSource detail page to Adam Shaw's Fullcalendar. A use case for this page is that the user wants to change the URL of the source or change the color of the events belonging to this source. For now I am blocked by the fact that I don't know exactly how to retrieve the source object. Part of the problem is that as far as I know, sources do not have an ID.
Which is the proper function in which I should inject the EventSourceID into the source object?
Should this function be something similar to the addEventSource from $ROOT/src/common/Views.js?
UPDATE: I changed the text in question the source to EventSource, to make it clear. Also now I have one solution in my mind, let me know if it's intrusive:
make sure each source object has an ID property set. This could be done by adding a source normalizer function to fc.sourceNormalizers array.
create retrieveEventSource which takes an EventSourceID as an argument and returns the source. The implementation this would be similar to _addEventSource.
UPDATE: Already found a problem, function retrieveEventSource is private and I don't know how to expose it to the world outside FullCalendar. Also, I have no idea yet on how to implement the update function that should redraw /AND/OR/ refetch the events, after the source details have changed.
Well since you're the one that populates the calendar event data in the first place just use that data on the new page.
events: function (start, end, callback) {
$.ajax({
url: url,
data: "json-events.php",
success: function (data) {
callback([event0,event1,event2,.....])
},
dataType: /* xml, json, script, or html */
});
...
Just get the data on the other page outside the calendars api
I"m trying to create an additional function for jqGrid to simplify adding JSON data to a grid that uses local data. The following attempt works except for one line, which causes it to fail.
$.fn.myrows = function(data) {
$(this).clearGridData();
$(this).jqGrid("setGridParam", {datatype: "json", loadonce: true});
$("#" + (this).selector)[0].addJSONData(data); // PROBLEMATIC LINE
$(this).jqGrid("setGridParam", {datatype: "local", loadonce: true});
};
This function is then called as $("#myGrid").myrows(jsonDataObject);.
Note that these lines work when they are not inside this function.
Any ideas? Thanks!
In the answer on your previous question I tried to explain how to extend jqGrid to support new method. To tell the truth, I don't see what real advantage you will have from the jqGrid extending. Why not just define your function as
var myrows = function(grid,data) {
// function body
};
and use it in the way:
myrows($("#myGrid"),jsonDataObject);
Much more important thing in my opinion is the implementation of what you need. Your current code have many disadvantages. If the grid has datatype: "local" then the local data paging can be used. The method addJSONData add all the data in the grid, so the page size can be broken.
If you have datatype: "local" and want to fill it with the data then the most effective way will be to set data parameter of the grid with respect of setGridParam and then just call $("#myGrid").trigger('reloadGrid',[{page:1}]) (see here).
Alternative you can use many other existing methods like addRowData which allows to add many rows of data at one method call.
If you get the JSON data from the server and thy to fill the grid with addJSONData method it will be really bad way. The versions of jqGrid starting with the version 3.5 has rich ways to customize the ajax request used. So it is strictly recommended that you don't use addJSONData in the case. See here for details.
You have a typo, do this on the line:
$("#" + $(this).selector)[0].addJSONData(data); // PROBLEMATIC LINE
The $ was missing before this