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!
Related
I'm using ExtJS 6.2. I have a xtype: 'treepanel' that allows an admin user type to check several companies. If user_type = company, then the treepanel is preloaded with that company's node checked value as true, and also I set 'beforecheckchange' listener to return false, so that user cannot select any other company.
What I would like to achieve now is to focus the store on to that preloaded value. In other words, I don't want the user to scroll to find its company's node checked, I would like to preset that position to show the checked node right away.
Any orientation on how to achieve this would be appretiated.
Achieved using treepanel's selectPath method, in afterlayout event:
afterlayout: function(me){
var type = localStorage.getItem("Usertype");
var id = localStorage.getItem("Id");
var tree = Ext.getCmp('your_treepanel_id')
if(type==desiredUserFilter) {
var child = me.getRootNode().findChild('id',id,true)
tree.selectPath(child)
}
},
I am creating a grid using kendo-telrik. In this suppose I am having 100 data. From this in json I have only 10 data(suppose first page contains 10 data in pagination). And I am showing all pages(10 pages for 100 data) all the time.
When I click on another page then get next 10 data and show it in ui. For this I am using page change function of kendo grid and get next 10 data.Now I want to list that data in grid with page which I selected.
For this I create sample which is as - http://jsfiddle.net/pporwal26/y6KdK/76/
var jsonData = JSON.parse("{\"Report\":\"type1\",\"FileList\":[{\"owner\":\"machine-174\\\\admin\",\"path\":\"C:\\\\workarea\\\\WinTest1lakhfileinKB\\\\WinTest\\\\nGYh\\\\SMv\\\\U1P8FLx\\\\vMbhdo\\\\TgFSW\\\\42Ioulj0w.txt\"},{\"owner\":\"machine-174admin\",\"path\":\"C:\\\\workarea\\\\bada_data\\\\Employee Database - Copy (7) - Copy.mdb\"}],\"Count\":100,\"total\":100,\"page\":1}");
function nextData(page){
jsonData = JSON.parse("{\"Report\":\"type1\",\"FileList\":[{\"owner\":\"machine-170\\\\admin\",\"path\":\"C:\\\\workarea\\\\WinTest1lakhfileinKB\\\\WinTest\\\\nGYh\\\\SMv\\\\U1P8FLx\"},{\"owner\":\"machine-170admin\",\"path\":\"C:\\\\workarea\"}],\"Count\":100,\"total\":100,\"page\":"+page+"}");
createGrid(jsonData);
}
createGrid(jsonData);
function createGrid(jsonData){
$("#grid").kendoGrid({
pageable: true,
scrollable: true,
page: jsonData.page,
pageable: {
pageSize: 2,
refresh: true,
change:function(e){
nextData(e.index);
}
},
dataSource: {
serverPaging: true,
schema: {
data: "FileList",
total: "total"
},
data: jsonData
}
});
}
In this sample when I click on change event than it always show 1 page not the page which I selected. and also want that on each click grid is always create new not add in it. What can I do for that?
Well I know that calling createGrid(jsonData); inside of the nextData function, you're going to create a table for every time you increment, that alone will cause bugs. Have you tried commenting that out?
I've personally never used kendoGrid, so if my answer's no good, I do apologies, but from having had a look online, this seems to work?
Worst case, you do need that change, in which case, can't you target the data inside the table and just over ride it in some other function? A pretty morbid way of doing it would be to delete/destroy the current one in order to make a new one. But it would work I guess?
I have a pretty standard jqGrid using free-jqGrid 4.13 with loadonce: true;
What I want to do is something I came across a couple of times:
I want to save the state of the grid (without the data);
that means the settings (number of current page for example), filters the user applied and also the text in the filter-toolbar.
and then load and apply this data to the grid later.
jqGrid is such a powerful tool, but stuff like this seems such a pain to accomplish.
after hours and hours of work i came up with a complicated solution; it is working, but it's not a nice solution imho:
1) saving jqGrid filter-data (locally):
// in this example i am using the "window unload" event,
// because i want the filters to be saved once you leave the page:
$(window).on("unload", function(){
// i have to access the colModel in order to get the names of my columns
// which i need to get the values of the filter-toolbar textboxes later:
var col_arr = $("#list").jqGrid("getGridParam", "colModel");
// my own array to save the toolbar data:
var toolbar_search_array = [];
for(var i = 0, max = col_arr.length; i < max; i++)
{
// only saving the data when colModel's "search" is set to true
// and value of the filterToolbar textbox got a length
// the ID of the filterToolbar text-input is "gs_" + colModel.name
if(col_arr[i].search && $("#gs_" + col_arr[i].name).val().length)
{
toolbar_search_array.push({ name: col_arr[i].name, value: $("#gs_" + col_arr[i].name).val() });
}
}
// putting everything into one object
var pref = {
// 1. toolbar filter data - used to fill out the text-inputs accordingly
toolbar : toolbar_search_array,
// 2. postData - contains data for the actual filtering
post : $("#list").jqGrid("getGridParam", "postData"),
// 3. settings - this data is also included in postData - but doesn't get applied
// when using 'setGridParam'
sortname: $('#list').jqGrid('getGridParam', 'sortname'),
sortorder: $('#list').jqGrid('getGridParam', 'sortorder'),
page: $('#list').jqGrid('getGridParam', 'page'),
rowNum: $('#list').jqGrid('getGridParam', 'rowNum')
};
//saving in localStorage
localStorage.setItem("list", JSON.stringify( pref ));
});
2) loading and applying jqGrid filter-data:
for use in a document-ready closure, for example
var localsave = JSON.parse(localStorage.getItem("list"));
// these settings are also saved in postData,
// but they don't get applied to the grid when setting the postData:
$('#list').jqGrid('setGridParam', {
sortname: localsave.sortname,
sortorder: localsave.sortorder,
page: localsave.page,
rowNum: localsave.rowNum
});
// this applies the filtering itself and reloads the grid.
// it's important that you don't forget the "search : true" part:
$("#list").jqGrid("setGridParam", {
search : true,
postData : localsave.post
}).trigger("reloadGrid");
// this is loading the text into the filterToolbar
// from the array of objects i created:
console.log(localsave.toolbar);
for(i = 0, max = localsave.toolbar.length; i < max; i++)
{
$("#gs_" + localsave.toolbar[i].name).val( localsave.toolbar[i].value );
}
it seems strange to me that postData contains all the data necessary but it's impossible to apply this data; at least as far as i know.
my question(s):
is it really this inconvenient to apply all the filter- and paging-data or am i missing something?
why can't this be as simple as:
// saving:
var my_save = $("#list").jqGrid("getGridParam", "postData");
// loading:
$("#list").jqGrid("setGridParam", {
search : true,
postData : my_save
}).trigger("reloadGrid");
?
thank you for any help and/or suggestions!
The answer with the demo provides an example of the implementation. The method refreshSerchingToolbar is relatively long. On the other side the code is still not full. It's not restore the state of operands, if the option searchOperators: true is used. I wanted to rewrite many parts of the filterToolbar method to make easier the saving/restoring of the the state of the filter toolbar or refreshing based on the changed postData. It's just the problem of the time and nothing more. What you describe is close to the feature forceClientSorting: true, which was difficult to implement in original code of jqGrid 4.7, but it was easy to implement after I rewrote large part of processing of the server response. The same problem is with the code of filterToolbar. The changes of filterToolbar is still in my TODO list and I'll made the corresponding changes soon.
So I have a date picker and a select-list. Then a jqgrid, working fine, filtering and all. This is what I am doing.
$("#sessSearch").unbind('click').on('click', function(){
var mydate = $("#sessSelector").val();
var mytype = $("#sess_type :selected").val();
if(mydate && mytype){
$("#listSESS").jqGrid('setGridParam',{postData:{sess_date:mydate, sess_type:mytype}}).trigger("reloadGrid");
}else{
alert("The search form is incomplete");
}
$("#sessSelector").val('');
$("#sess_type").val('');
});
What is happening there is I am sending along the values of my selectlist and datepicker along in the postData for the jqgrid. Only when the search button is clicked. So far so good. I can get the values on the serverside. The problem is when I click the refresh button on the grid pager, the previously sent paramiters remain in the postData. See below, firebug showing all post parameters.
The first is a normal default load, works fine.
The second happens after using my search form and adding to the postData and then I clicked on the refresh button the grid pager.
How do I reset the postData for the grid native reload mechanism to exclude my custom parameters?
My custom paramiters must only go in when I tell it to go in.
Please advise.
You can use getGridParam to get reference on internal object postData. The object have properties sess_date and sess_type with the values from the last setGridParam call. One can use delete to remove property from an object. So the following code should work
var postData = $("#listSESS").jqGrid("getGridParam", "postData");
delete postData.sess_date;
delete postData.sess_type;
Thank you so much Oleg, I basically disabled the default refresh action and did this with the pager. So my custom search sends the parameters only when my search mutton is clicked.
jQuery("#listSESS").jqGrid('navGrid','#pagerSESS',{edit:false,add:false,del:false,search:false, refresh:false},
{}, // edit options
{}, // add options
{}, // del options
{} // search options
);
$("#listSESS").jqGrid('navButtonAdd', "#pagerSESS", {
caption: "", title: "Reload Grid", buttonicon: "ui-icon-refresh",
onClickButton: function () {
var mypostData = $("#listSESS").jqGrid("getGridParam", "postData");
delete mypostData.sess_date;
delete mypostData.sess_type;
$("#listSESS").jqGrid('setGridParam',{postData:mypostData}).trigger("reloadGrid");
}
});
works like a charm.
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,''];
}