Develop Reference

how to clear filtering, sorting and paging on a webdatagrid on client side?

I have a webdatagrid which retains data on searching in text box. I have noticed when I filter/page/sort the data and before clearing any of these I make a new search then the new search results retains previous filter/page/sort condition. I am not clearing it before reloading the page. I have search method on client side and I am using following code which does not work:
function btnSearch_click(sender, evntArgs){
var grid = $find('<%= grid1.ClientID %>');
grid.get_behaviors().get_filtering().clearColumnFilters();
grid.get_behaviors.get_sorting().clearColumnSorting();
grid.get_behaviors.get_paging().clearPaging();
}
This code is incorrect.

Since my grid loads on pressing the search button. I used the following on the server side:
if (search == "True")
{
var filtering = grid1.Behaviors.Filtering;
grid1.Behaviors.Sorting.SortedColumns.Clear();
grid1.Behaviors.Paging.PageIndex = 0;
grid1.Behaviors.Filtering.ClearBehaviorColumnInfo();
grid1.Behaviors.Filtering.ColumnFilters.Clear();
filtering.FilterType = Infragistics.Web.UI.GridControls.FilteringType.ExcelStyleFilter;
grid1.Behaviors.Filtering.ApplyFilter();
}
I wanted to implement excel style filter and Infragistics had no way to reproduce excel filter after clearing it I had to apply row type filter first and then change the filter type to excel type.

HOW to update and display JSON file dynamically on click of a button?

I am creating an addon in which, on click of a toolbar button, a panel is displayed which contains checkboxes and a save button. On clicking the save button, the selected checkbox`s data should be saved/updated in a JSON file which should be displayed after clicking save.
Moreover, the data dynamically updated in JSON file should be available even after browser restart.
Also the JSON file should be saved in file system or local storage?
Is this possible.. plz help... And plz ask if u need more info. Below is the addonScript which I used:-
var self = require('sdk/self');
var data = require("sdk/self").data;
var text_entry = require("sdk/panel").Panel({
contentURL: data.url("CheckboxAddon.html"),
//contentScriptFile: data.url("my-script.js")
});
// button creation
require("sdk/ui/button/action").ActionButton({
id: "show-panel",
label: "Show Panel",
icon: {
"16": "./star-icon.png",
},
onClick: handleClick
});
// Show the panel when the user clicks the button.
function handleClick(state) {
text_entry.show();
}
text_entry.on("show", function() {
text_entry.port.emit("show");
});
text_entry.port.on("text-entered", function (text) {
console.log(text);
text_entry.hide();
});

One of the things to keep in mind is that JSON is a subset of javascript, so you just write a javascript object which is also valid JSON. In your case I doubt this is going to be something you'll have to be worrying about. to achieve the effect you're looking for you can simply throw whatever data into dataString = JSON.stringify(data) or dataString = JSON.stringify(data, null, "\t") to give it that json format look. Conversely you would use JSON.parse(dataString) to turn a string into a javascript object.
Definitely use the json.org documentation a guide for writing JSON objects yourself.
the documentation on MDN has good examples, look at the JSON.stringify and JSON.parse in the methods section

Selection across pages in EXT JS 3.x

We are using EXT-JS 3.x. To select records from pages, used the method selectRecords(). Now, I can select records when I navigate the pages. But the problem is, on clicking the submit button all the selected records across pages should be visible. But below line of code grid.getSelectionModel().getSelections()
returns the selected records in the current page.
Whether there are any options available to get all the selected records?

Don't know if It can be great for you, but I can suggest you to use a new column in the store to indicate if the row is selected or not. This column will be a boolean. You can set it value with listeners rowselect and rowdeselect.
On submit you will be able to query the store to get only the records with the correct indicator value.
For example:
var myStore = new Ext.data.JsonStore({
fields: [{name:"col1", type:"string"}, {name:"INDICATOR", type:"'boolean'"}]
});
var myGrid = new Ext.grid.GridPanel({
store: store,
columns: [...//Don't put the INDICATOR here
sm: new Ext.grid.RowSelectionModel({singleSelect: false}),
....
listeners: {
rowselect: (e,index, record){
record.data["INDICATOR"] = true;
},
rowdeselect: (e,index, record){
record.data["INDICATOR"] = false;
},
....
}
});
On submit
var mySelection = myStore.query("INDICATOR", true);
I hope I give you a great example and it's not to complicated.
I haven't test my code so maybe you will have to correct it a little bit.
Good luck!

Calling fnStandingRedraw to retain the current pagination settings in Datatables using javaScriptSupport.addInitializerCall

I am using the CreateEventLink method of the ComponentResources class to create a link to a delete event on my page called UserList using the following:
resources.createEventLink("delete", user.getUserId()).toURI();
The UserList page uses datatables to create a list of user's data and a delete link. When the delete link is clicked, the delete event is called on the same page and everyone is happy.
The problem is the datatable goes back to the first page of records after a user is deleted. For example, if I am on page 5 of my datatable, on the UserList page, and I click delete it will stay on the Userlist page, but my datatable will reset itself to the first page.
After some research I haved discovered that the fnStandingRedraw plugin from datatables will fix this issue: http://datatables.net/plug-ins/api
Going through the documentation I have learned that I should use:
javaScriptSupport.addInitializerCall("fnStandingRedraw", "");
to call the following in js file via an Import notation:
Tapestry.Initializer.fnStandingRedraw = function(oSettings) {
//redraw to account for filtering and sorting
// concept here is that (for client side) there is a row got inserted at the end (for an add)
// or when a record was modified it could be in the middle of the table
// that is probably not supposed to be there - due to filtering / sorting
// so we need to re process filtering and sorting
// BUT - if it is server side - then this should be handled by the server - so skip this step
if(oSettings.oFeatures.bServerSide === false){
var before = oSettings._iDisplayStart;
oSettings.oApi._fnReDraw(oSettings);
//iDisplayStart has been reset to zero - so lets change it back
oSettings._iDisplayStart = before;
oSettings.oApi._fnCalculateEnd(oSettings);
}
//draw the 'current' page
oSettings.oApi._fnDraw(oSettings);
};
However I get the error:
Uncaught TypeError: Cannot read property 'bServerSide' of undefined
Tapestry.Initializer.fnStandingRedrawhelpdesk.js:16
$.extend.inittapestry-jquery.js:32
jQuery.extend.eachjquery-1.6.2.js:655
$.extend.inittapestry-jquery.js:26
jQuery.extend.eachjquery-1.6.2.js:649
$.extend.inittapestry-jquery.js:18
(anonymous function)list:70
jQuery.extend._Deferred.deferred.resolveWithjquery-1.6.2.js:1008
jQuery.extend.readyjquery-1.6.2.js:436
DOMContentLoadedjquery-1.6.2.js:915
Any guidance would be most appreciated...Thanks in advance!!

The best practice is to save DataTables plugin to separate js file, so you can use it not only through tapestry initializer but also from other js.:
(function($) {
$.fn.dataTableExt.oApi.fnStandingRedraw = function(oSettings) {
if(oSettings.oFeatures.bServerSide === false){
var before = oSettings._iDisplayStart;
oSettings.oApi._fnReDraw(oSettings);
// iDisplayStart has been reset to zero - so lets change it back
oSettings._iDisplayStart = before;
oSettings.oApi._fnCalculateEnd(oSettings);
}
// draw the 'current' page
oSettings.oApi._fnDraw(oSettings);
};
})(window.jQuery);
So you can use it from other places as:
var oTable = $('.dataTable').dataTable();
oTable.fnStandingRedraw();
To call fnStandingRedraw() from tapestry:
jsSupport.addScript("$(%s).dataTable().fnStandingRedraw()", "#myTable");
or you can add tapestry initializer and call it:
Tapestry.Initializer.standingRedraw = function(spec) {
$(spec.tableId).dataTable().fnStandingRedraw();
};
in java:
jsSupport.addInitializerCall("standingRedraw",
new JSONObject("tableId", "#myTable"));
But this will work for you only if your DataTable is client-side(pagination, sorting, filtering) and you do ajax request to delete row and delete this row from DataTable manually from js.

You have no oSettings object.
You can call it from the dataTable object (which has oSettings):
var dt = $("#table").dataTable();
dt.fnStandingRedraw();

How can I preserve the search filters in jqGrid on page reload?

I found many discussions that were close to what I need, and this question is the
closest - How can I set postData._search to true in the request in jqGrid?.
As I'm struggling with almost the same problem, and just can't get it working - I want to setup "search" and "filters" during the initial loading of the jqGrid - say, on the page reload, and I have my filters stored in the session - and I tried everything I found in Oleg's examples - it just doesn't work!
That's what I'm trying to do -
loadBeforeSend: function (xhr) {
var grid = jQuery('#' + block_id);
var postData = grid.jqGrid('getGridParam','postData');
jQuery.extend(postData,{filters:MyFilters});
grid.jqGrid('setGridParam', {search: true, postData: postData});
console.log(grid.jqGrid('getGridParam','postData'));
}
The console printout shows that the filters are in place, but the _search is still false, and the actual Post gets sent even with no filters:
_search false
block_id report_block_1table
nd 1297451574526
page 1
rows 25
sidx id
sord desc
However, if I put exactly the same code - with the addition of
grid.trigger("reloadGrid");
line - into some button's onClickButton function, and later click the button - everything works; but I need to make it work on "page reload"!
Any ideas? It's driving me crazy...

It seems to me that you are not the first person who ask the same question. Recently I asked on the close question (read many comments to the answer). Another old answer including the demo could probably answer on some your opened questions.
Your code using beforeRequest don't work just because the function beforeRequest will be caled immediately before the ajax call and the changing of the search parameter is too late. Moreover overwiting of filters everytime is probably not the best idea. In the case the user will not able to set any other grid filter.
So I can repeat, that the imlementation of the solution which you need is very simple. You should just set filters property of the postData parameter of jqGrid to the filter which you need and set another jqGrid parameter search:true additionally. It's all! Later the user will be able to open advance searching dialog and overwrite the filters. The user can also click on "Reset" button of the advance searching dialog and set filters to empty string and search:false.
For better understanding I have to clear how search parameter or some other jqGrid will be used in the URL. There are parameter prmNames of jqGrid which defines the names of parameters send as a part of URL or as a part of data POSTed to the server. The default value of prmNames contain search:"_search" and the code of internal populate function used by jqGrid has the following simplified code fragment:
var prm = {}, pN=ts.p.prmNames;
if(pN.search !== null) {prm[pN.search] = ts.p.search;}
if(pN.nd !== null) {prm[pN.nd] = new Date().getTime();}
if(pN.rows !== null) {prm[pN.rows]= ts.p.rowNum;}
if(pN.page !== null) {prm[pN.page]= ts.p.page;}
if(pN.sort !== null) {prm[pN.sort]= ts.p.sortname;}
if(pN.order !== null) {prm[pN.order]= ts.p.sortorder;}
...
$.extend(ts.p.postData,prm);
where
prmNames: {page:"page",rows:"rows", sort: "sidx",order: "sord", search:"_search",
nd:"nd", id:"id",oper:"oper",editoper:"edit",addoper:"add",
deloper:"del", subgridid:"id", npage: null, totalrows:"totalrows"}
So to set _search parameter of URL one should set search parameter of jqGrid.
Look at the following demo. You can easy to verify using Fiddler of Firebug that the jqGrid from the page send HTTP GET with the following url:
http://www.ok-soft-gmbh.com/jqGrid/MultisearchFilterAtStart1.json?filters=%7B%22groupOp%22%3A%22AND%22%2C%22rules%22%3A%5B%7B%22field%22%3A%22invdate%22%2C%22op%22%3A%22gt%22%2C%22data%22%3A%222007-09-06%22%7D%2C%7B%22field%22%3A%22invdate%22%2C%22op%22%3A%22lt%22%2C%22data%22%3A%222007-10-04%22%7D%2C%7B%22field%22%3A%22name%22%2C%22op%22%3A%22bw%22%2C%22data%22%3A%22test%22%7D%5D%7D&_search=true&nd=1297508504770&rows=10&page=1&sidx=id&sord=asc
So it do exactly what you need. The code of the demo contain the following code fragment:
$("#list").jqGrid({
url: 'MultisearchFilterAtStart1.json',
datatype: "json",
postData: {
filters:'{"groupOp":"AND","rules":['+
'{"field":"invdate","op":"gt","data":"2007-09-06"}'+
',{"field":"invdate","op":"lt","data":"2007-10-04"}'+
',{"field":"name","op":"bw","data":"test"}]}'
},
search:true,
// ...
});

#Oleg Oleg's answer works like a charm but just for the first time.
For me when I reload the grid, filters and search flag are not set up.
With the following code each time I reload the grid it also sends the filters and search flag.
I use server side sort and pagination.
I'm using:
jQuery("#myGrid").navGrid("#myPager", {search: true, refresh: true, edit: false,
add:false, del:false}, {}, {}, {}, {});
On the grid definition:
beforeRequest: function() {
// filter to be added on each request
var filterObj1 = {"field":"myField","op":"eq","data":"myValue"};
var grid = jQuery("#myGrid");
var postdata = grid.jqGrid('getGridParam', 'postData');
if(postdata != undefined && postdata.filters != undefined ) {
postdata.filters = jQuery.jgrid.parse(postdata.filters);
//Remove if current field exists
postdata.filters.rules = jQuery.grep(postdata.filters.rules, function(value) {
if(value.field != 'myField')
return value;
});
// Add new filters
postdata.filters.rules.push(filterObj1);
} else {
jQuery.extend(postdata, {
filters: {
"groupOp":"AND",
"rules":[filterObj1]
}
});
// more filters in the way: postdata.filters.rules.push(filterObj1);
}
postdata.filters = JSON.stringify(postdata.filters);
postdata._search = true;
return [true,''];
}