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
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.
How to replace jqgrid alert messages(successfully added,deleted) to bootstrap alerts?I am using JQGRID 5.2.1. As we use following code in jqgrid for alerts
if (response.responseText) {
alert(response.responseText);
}
First of all I want to remind, that alert will be used by free jqGrid extremely seldom and only in critical situations, for example, if the grid can't be created at all.
On the other side, one could have the requirement don't use alert as common policy of a company and as common requirement to every JavaScript modules. It will corresponds to the polity of some web browsers (see the article for example).
One more example of requirement to replace alert usage will be creating unit tests, which reproduces some errors explicitly. It would be helpful to test the existence of an error only without displaying blocking alert.
In any way free jqGrid allows to define $.jgrid.defaults.fatalError method, which will be used by jqGrid instead of alert. For example, one can use the code like below
$.jgrid.defaults = $.jgrid.defaults || {};
$.jgrid.defaults.fatalError = function (errorText) {
$("body").prepend('<div class="alert alert-danger alert-dismissable">' +
'×' +
'<h4 class="alert-heading">Error</h4>' +
'<p>' + errorText + '</p>' +
'</div>').alert()
.on('closed.bs.alert', function () {
$(this).remove();
})
};
before creating of any grid.
https://jsfiddle.net/OlegKi/c70pfv6r/ is a simple grid, which uses Bootstrap CSS. I included $.jgrid.defaults.fatalError in the code, but it will be not really used. I modified the demo to include colNames parameter, which length don't corresponds the length of colModel parameter: https://jsfiddle.net/OlegKi/c70pfv6r/1/. jqGrid can't create the grid and it uses alert in such cases. One the other side one will see the following div instead:
I think there is a much easer way to do this. In case of Guriddo jqGrid as declared in the question it is possible to use the build in common function $.jgrid.info_dialog like this
if (response.responseText) {
$.jgrid.info_dialog('My Title', response.responseText, 'Close', { styleUI : 'Bootstrap'});
More on the common Guriddo jqGrid functions you can look here
I have a lot of different charts that i'm rendering using Highcharts. Trying to find a good dynamic way of doing this. This is a proof of concept that I thought would be good. The thing is that the charts have different configurations (and data). So my initial thought is, in combination with mustasche.js, something like this:
HTML:
<div class="highchart"
data-some-other-variable=""
data-date-from=""
data-date-to=""
data-template="path/to/graph/graph.mustache"
>
Then a simple proof of concept in Javascript
var chart = $('.highchart');
$.get(chart.data('template'), function(options) {
// Do stuff
highcharts(options);
});
The thing is, the response I get is in pure text. And it can't be parsed into a javascript variable since it's not valid json. (the configuration object has a formater: function() {} inside it). Hence I cannot init highcharts with it. Eval isn't an option for this. Any ideas?
Give that code a try
var chart = $('.highchart');
$.ajax({
url: chart.data('template'),
type: "GET"
}, function(data) {
// Do stuff
var options = $.parseJSON(data);
highcharts(options);
});
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.
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