i try to change the navbar properties on a jqgrid in a callback function without succes.
The grid is display afeter user is chosing a period. Depend on either the period is open or close user can or cannot edit, add, delete rows. So the navbar need to change properties dynamically.
My code look like that:
$('#mygrid').jqGrid({
// some properties of my grid that works fine
pager : '#gridpager'
});
$("#mygrid").bind("jqGridLoadComplete",function(){
$.ajax({
url: 'checkifperiodopen.php',
data: {
$("#period").val()
},
success: function(data){
if(period==='open'){
jQuery("#mygrid").jqGrid('navGrid','#gridpager',{add:false,edit:false,del:true,search:true,refresh:true});
}
if(period==='close'){
jQuery("#mygrid").jqGrid('navGrid','#gridpager',{add:true,edit:true,del:true,search:true,refresh:true});
}
}
});
});
$('#validChossenPeriod').click(function () {
ajax call to get data on choosen period
success:function(data){
$("#mygrid").jqGrid('clearGridData');
$("#mygrid").jqGrid('setGridParam', { datatype: 'local'});
$("#mygrid").jqGrid('setGridParam', { data: data});
$("#mygrid").trigger('reloadGrid');
}
});
I finally found the answer by show or hide the div that include the navgrid button:
grid = $("#mygrid");
gid = $.jgrid.jqID(grid[0].id);
var $tdadd = $('#add_' + gid);
var $tdedit = $('#edit_' + gid);
var $tddel = $('#del_' + gid);
$("#mygrid").jqGrid('navGrid','#gridpager',{add:true,edit:true,del:true,search:true,refresh:true});
condition if false =
$tdadd.hide();
$tdedit.hide();
$tddel.hide();
if true =
$tdadd.show();
$tdedit.show();
$tddel.show();
Why so complex? There is a other clear way to do this
var view_buttons = true;
if(condition_to_hide) {
view_buttons = false;
}
$("#mygrid").jqGrid('navGrid','#gridpager', { add:view_buttons, edit:view_buttons, del:view_buttons, search:true, refresh:true});
Related
Hi this question is related with my own answer here the thing is that the widget run only once, when the first database record object is show on the form view, but when I change to another record, the view its not updated with the actual record. I think that is because I run all the code in the ´start´ but I dont know how and where put he code to do this.
the code again:
(function (instance) {
var _t = instance.web._t,
_lt = instance.web._lt;
var QWeb = instance.web.qweb;
openerp.chess_base = function (instance, local) {
local.ShowBoard = instance.web.form.FormWidget.extend({
start: function () {
this.$el.append('<div id="board" style="width: 300px">BOARD GOES HERE</div>');
this.show_board();
},
show_board: function () {
var Game = new instance.web.Model("chess.game"),
record_id = this.field_manager.datarecord.id,
record_name = this.field_manager.datarecord.name,
self = this;
self.el_board = self.$('#board');
Game.query(['pgn']).filter([['id', '=', record_id], ['name', '=', record_name]]).all().then(function (data) {
console.log(data);
self.cfg = {
position: data[0].pgn,
orientation: 'white',
pieceTheme: '/chess_base/static/img/chesspieces/wikipedia/{piece}.png'
};
ChessBoard(self.el_board, self.cfg);
});
}
});
instance.web.form.custom_widgets.add('board', 'instance.chess_base.ShowBoard');
}
})(openerp);
In your start function:
this._ic_field_manager.on('view_content_has_changed', this, function() {
'put your code here'
})
EDIT:
Actually there's another event you could listen, 'load_record'.
Because 'view_content_has_changed' is triggered every time a single field in the view is modified, and you maybe don't want this behavior.
I am trying to populate the dojox/form/checkedMultiSelect with a top option named: 'select all'.
One way to do this is to use declare function to change the '_addOptionItem' function.
The problem is that this '_addOptionItem' function is using a declared object named: 'formCheckedMultiSelectMenuItem' inside the 'CheckedMultiSelect' widget, AND gives an error with: 'formCheckedMultiSelectMenuItem is not defined'.
How to fix this?
My JS code:
declare_CheckedMultiSelect: function(formCheckedMultiSelectItem){
return declare(CheckedMultiSelect, {
startup: function() {
this.inherited(arguments);
setTimeout(lang.hitch(this, function() {
this.dropDownButton.set("label", this.label);
}));
},
_addOptionItem: function(item){
var item;
if(this.dropDown){
item = new formCheckedMultiSelectMenuItem({
option: option,
parent: this.dropDownMenu
});
c(item)
this.dropDownMenu.addChild(item);
}else{
item = new formCheckedMultiSelectItem({
option: option,
parent: this
});
this.wrapperDiv.appendChild(item.domNode);
}
this.onAfterAddOptionItem(item, option);
}
});
}
Here is working prototype of what you are trying to achieve http://jsfiddle.net/894af/750/ please feel free to ask any follow up question. it is done in different way, but what I simply did is:
1) when create the mutliselect get each check box after creating using
onAfterAddOptionItem
2) listen to the select all checkbox and then override the onclick fucntion and then change the selection of all the checkboxs, based on the selection of the checkbox.
if(option.value == "SA"){
on(item, "click", function(evt){
var optionsToSelect = checkedMultiSelect.getOptions();
for(var i = 0 ; i < optionsToSelect.length;i++){
if(optionsToSelect[i].value == "SA"){
if(optionsToSelect[i].selected){
checkedMultiSelect.set("value",optionsToSelect);
}else{
checkedMultiSelect.set("value",[]);
}
}
}
});
}
Hi I have a problem and the error stated:- "Error: Target must be an event emitter."
If there is a change in fire variable and selectHandler is resumed, shouldn't the methods be triggered - toggleDropDown and focus?
Here's my code below:-
var fire = false;
var toggle1, toggle2 = true;
var select = new Select
({
store:storeA
}, 'node_Select');
select.startup();
fire = true;
var switchStore = new button
({
onClick: function()
{if (toggle1)
{
select.setStore(storeB);
toggle1 = false;
}
else
{
select.setStore(storeA);
toggle1 = true;
}
fire = true;
}
}, 'node_switchStore');
switchStore.startup();
var selectHandler = on.pausable(fire, 'change' function()
{
if(fire)
{
select.toggleDropDown();
select.focus();
fire=false;
}
})
var switchPause = new button
({
onClick: function()
{if (toggle2)
{
selectHandler.resume();
toggle2 = false;
}
else
{
selectHandler.pause();
toggle2 = true;
}
}
}, 'node_switchPause');
switchPause.startup();
What is event emitter? Only input change, button and DOM elements' events?
It seems that the fire variable is not event emitter, isn't it?
Please advise
Clement
It has to do with this line:
var selectHandler = on.pausable(fire, 'change' function()
You're trying to listen to one of javascripts primitive types, Boolean. In order for "dojo/on" to work, it has to listen to something that can fire off events. From what I'm seeing in your code sample, what you probably need is a function that handles the changing of the "fire" variable. How about something like this:
var openFire = function() {
select.toggleDropDown();
select.focus();
fire = false;
}
now instead of setting
fire=true;
you can just call
openFire();
In Sencha Touch 2 I have a controller which calls a custom 'prepopulate' method on button tap:
Ext.Ajax.request
({
method: 'GET',
url: myurl, //defined outside
withCredentials: true,
headers:{Authorization : auth},
success: function(response){
var data;
if(response.responseText.length > 0)
data = Ext.JSON.decode(response.responseText.trim());
console.log(data);
var fv = me.getFiscal();
console.log(fv);
fv.prepopulate(data);
Ext.Viewport.animateActiveItem('fiscal', me.getSlideLeftTransition());
},
failure: function(response){
Ext.Msg.alert('Server Error', 'Server down :( please try again later');
}
}
);
View code:
prepopulate : function (data) {
var me = this;
var companyTextField = me.down('#fiscalForm').down('#companyTextField');
var vatField = me.down('#fiscalForm').down('#vatField');
var fiscalCodeTextField = me.down('#fiscalForm').down('#fiscalCodeTextField');
var addressTextField = me.down('#fiscalForm').down('#addressTextField');
var cityTextField = me.down('#fiscalForm').down('#cityTextField');
var zipTextField = me.down('#fiscalForm').down('#zipTextField');
var countryTextField = me.down('#fiscalForm').down('#countryTextField');
console.log(vatField);
console.log((data.vat));
if(data){
if(data.company_name)
companyTextField.setValue(data.company_name);
if(data.vat)
vatField.setValue(data.vat);
if(data.fiscal_code)
fiscalCodeTextField.setValue(data.fiscal_code);
if(data.address)
addressTextField.setValue(data.address);
if(data.city)
cityTextField.setValue(data.city);
if(data.zip)
zipTextField.setValue(data.zip);
if(data.country)
countryTextField.setValue(data.country);
}
console.log(vatField);
}
The AJAX call works fine and it calls on success the prepopulate method passing the data retrieved from the server.
I try to initialize the TextFields using setValue() but the form looks 'brand new' when I open it using the browser
console.log() tells me that the _value private field is correctly set though... I'm groping in the dark right now ... any insight?
Thank You in advance.
M.
As you suggest the data i correctly retrieved and display in the console with the console.log, nonetheless the browser don't find any visible fields to modify the value when the setValue() is called.
The solution so far is to modify the ajax request as follows:
Ext.Ajax.request
({
....
....
success: function(response){
....
Ext.Viewport.animateActiveItem('fiscal', me.getSlideLeftTransition());
//view must be in the viewport before modifying data:
var task = Ext.create('Ext.util.DelayedTask', function () {
var fv = me.getFiscal();
fv.prepopulate(data);
});
task.delay(1000);
.....
....
...
..
.
i am using ExtJS with Rails...I am trying to delete records selected in grid through "Checkbox column"...i dnt have any idea as to how can i handle "Array" of selected records of grid through rails controller...plzz guide me...
the code on delete button is as follows :
var sm = prodgrid.getSelectionModel();
delbtn.on("click", function () {
var sel = sm.getSelections();
Ext.Ajax.request({
url: 'products/delete',
// method:'DELETE',
params: {
'prodid': sel
}
});
});
How can i iterate through "sel" array in my Rails controller?? plzz help
use Ext.each to iterate an array :
var sm = prodgrid.getSelectionModel();
delbtn.on("click", function () {
var sel = sm.getSelections();
Ext.each(sel,function(data){
/// your stuff
Ext.Ajax.request({
url: 'products/delete',
// method:'DELETE',
params: {
'prodid': data.id // the parameter
}
});
///// end
},this);
});
You cannot pass arrays into Rails controller directly. This article should help you in understanding parameter passing into rails controllers.
That said, you need to convert the array into a string. You can use a function similar to this for converting the array to string:
function array_params(arry) {
var paramvar = "";
arry.each(function(s){
paramvar = paramvar.concat("arr[]=",s,"&");});
paramvar = paramvar.replace(/&$/,"");
return paramvar;
}
and finally call:
Ext.Ajax.request({
url: 'products/delete',
// method:'DELETE',
params: {
'prodid': array_params(sel)
}
});