We Keep Coding

Is it possible to dynamically close or open a Jqgrid column search?

Is it possible to open and close the search function of certain columns after loading Jgrid?
The underlying code allows you to hide the search part, but does not affect the search function
It works fine to hide but I haven't found what I need to do to show it
this code does not affect the search function
I have to influence the search
$("#gs_name").closest(".ui-search-table").hide();
Sample jsfiddle
UPDATE
The desired combination in the Client Name column
search = hidden -> search = false
search = show -> search = true
$("#columnhide").click(function(){
$("#gs_name").val("")
$("#gs_name").closest(".ui-search-table").toggle();
});

If I correctly understand what you need to implement then http://jsfiddle.net/OlegKi/ejnrtocw/270/ demonstrates what you can do. The code uses
$("#columnhide").click(function(){
var $searchField = $("#gs_name");
$searchField.val(""); // clear the filter
$searchField.closest(".ui-search-table").toggle(); // hide or show the control
$(this).html("<b>" + ($searchField.is(":hidden") ? "Show" : "Hide") +
"</b> Client Name Search");
$("#grid")[0].triggerToolbar(); // force filtering without a filter in "name" field
});
and additionally modifies the code of `` callback to the following
ondblClickRow: function(rowid, iRow, iCol, e) {
var $grid = $(this),
cm = $grid.jqGrid("getGridParam", "colModel"),
cellvalue = $grid.jqGrid("getCell", rowid, iCol),
$searchField = $("#gs_" + cm[iCol].name);
if (!$searchField.is(":hidden")) {
$searchField.val(cellvalue);
this.triggerToolbar();
}
}

The hidden property in double click is a property of colModel. In your case you should use the jquery selector :hidden to do the job.
The code can be changed like this:
ondblClickRow: function(rowid, iRow, iCol, e) {
var cm = $(this).jqGrid("getGridParam", "colModel");
var cmvalues = $(this).jqGrid("getRowData", rowid);
$.each(cm, function(i,n){
if(!n.hidden) {
var elem = $('#gs_'+n.name);
if( elem.is(":hidden") {
// set it to empty to overcome search when trigger
elem.val("");
} else {
elem.val( cmvalues[n.name]);
}
}
});
this.triggerToolbar();
},

This code searches its data if the column is clicked
ondblClickRow: function(rowid, iRow, iCol, e) {
var $grid = $(this),
cm = $grid.jqGrid("getGridParam", "colModel"),
cellvalue = $grid.jqGrid("getCell", rowid, iCol),
$searchField = $("#gs_" + cm[iCol].name);
if (!$searchField.is(":hidden")) {
$searchField.val(cellvalue);
this.triggerToolbar();
}
},
All the columns are retrieved
ondblClickRow: function(rowid, iRow, iCol, e) {
var grid=$('#grid');
var cm = $(this).jqGrid("getGridParam", "colModel");
var cmvalues = $(this).jqGrid("getRowData", rowid);
$.each(cm, function(i,n){
if(!n.hidden) {
$('#gs_'+n.name).val( cmvalues[n.name])
}
});
this.triggerToolbar();
},
I could not set the first code according to the second code!
I want all column data to be searched by double clicking
this is important for a practical filter
I want to do a search in all areas by doing double clicking, but I will never search in hidden columns!

Changing value separation from "," to "-" (JS/Jquery)

I received some Jquery code for an HTML checkbox. Essentially, when checked, the value of the checkbox is placed in an input box. When I uncheck the box, the value is cleared from the input. However, when you check multiple checkboxes, a "," separates the values. Is there a way to seperate the values by "-" instead of ","? I tried playing around with the code and it just breaks the code. I am fairly new to JS/Jquery so if it is a simple answer, I apologize. I can provide more information if needed. A working JSFiddle with "," is here: https://jsfiddle.net/m240Laka/25/
My code is located here:
var $choiceDisplay = $("#choiceDisplay"), //jquery selector for the display box
$none = $("#none"),
$choice = $(".choice");
$choice.on("change", function () {
var $this = $(this), //jquery selector for the changed input
isThisChecked = $this.prop("checked"), //boolean true if the box is checked
choiceSelectionsArray = $choiceDisplay.val().split(",").filter(function(e){return e !== ""}), //array of values that are checked
isThisValueInDisplayedSelection = $.inArray($this.val(), choiceSelectionsArray) !== -1; //boolean true when $this value displayed
if (isThisChecked) {
if (isThisValueInDisplayedSelection) {
return false; //odd, the value is already displayed. No work to do.
} else {
choiceSelectionsArray.push($this.val());
$choiceDisplay.val(choiceSelectionsArray.join());
}
} else { //box has been unchecked
if (isThisValueInDisplayedSelection) {
choiceSelectionsArray = choiceSelectionsArray.filter(function(e){return e !== $this.val()})
$choiceDisplay.val(choiceSelectionsArray.join());
}
}
});
$none.on("change", function () {
var $this = $(this),
isThisChecked = $this.prop("checked");
if(isThisChecked){
$choice.prop({
disabled: true,
checked : false
});
$choiceDisplay.val("");
}else{
$choice.prop({disabled: false});
return false;
}
});

In the functions join() and split(), you need to pass in the delimiter you want, '-'. I suggest creating a local variable that you use, so it is easier to change this if needed.
var $choiceDisplay = $("#choiceDisplay"), //jquery selector for the display box
$none = $("#none"),
$choice = $(".choice"),
delimiter = '-';
$choice.on("change", function () {
var $this = $(this), //jquery selector for the changed input
isThisChecked = $this.prop("checked"), //boolean true if the box is checked
choiceSelectionsArray = $choiceDisplay.val().split(delimiter).filter(function(e){return e !== ""}), //array of values that are checked
isThisValueInDisplayedSelection = $.inArray($this.val(), choiceSelectionsArray) !== -1; //boolean true when $this value displayed
if (isThisChecked) {
if (isThisValueInDisplayedSelection) {
return false; //odd, the value is already displayed. No work to do.
} else {
choiceSelectionsArray.push($this.val());
$choiceDisplay.val(choiceSelectionsArray.join(delimiter));
}
} else { //box has been unchecked
if (isThisValueInDisplayedSelection) {
choiceSelectionsArray = choiceSelectionsArray.filter(function(e){return e !== $this.val()})
$choiceDisplay.val(choiceSelectionsArray.join(delimiter));
}
}
});
Here is it in a jsfiddle.

In $.join() add the separator string parameter:
$choiceDisplay.val(choiceSelectionsArray.join("-"));
UPDATE:
add the same in $.split()
choiceSelectionsArray = $choiceDisplay.val().split("-")....

Jquery validation not working properly?

I am trying to do required validation in a asp.net page.
I have multiple controls that will be hidden and displayed.
Controls like checkboxlist,dropdownlist,multiselectedlistbox.
I am using a css class called required attaching to all these controls to check the validation.
I am trying to check if each control has value or not but my code is checking each options with in each controls.
I am really not finding a way not a jquery expert just a novice...
Here is my code any ideas anyone please....
$("input[type='submit']").click(function () {
if ($(this).val() != 'Back') {
var names = [];
var info=" ";
$('.required input').each(function () {
var control = $(this);
if (control.is(':enabled')) {
names[$(this).attr('name')] = true;
}
});
$('.required option').each(function () {
var control = $(this);
if (control.is(':enabled')) {
names[$(this).attr('name')] = true;
}
});
for (name in names) {
var radio_buttons = $("input[name='" + name + "']");
if ((radio_buttons.filter(':checked').length == 0) ||(radio_buttons.filter(':selected').length == 0)) {
info += radio_buttons.closest("table").find('label').html()+"</br>";
}
}
if (info != " ") {
$("#validation_dialog p").html(info);
$("#validation_dialog").dialog({
title: "Validation Error!",
modal: true,
resizable: false,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
}
}
});
here is a fiddle for it...
http://jsfiddle.net/bDmgk/35/

I think what you want is:
$(".required input[type='radio']:checked").each(function(){
});
instead of :
$(".required option").each(function(){ ... });

Hi I made some changes to your fiddle basically I checked for the inputs inside each column like this and then I added them to your names array.
Using
$('table.required:eq(0) input:checked')
I you can got all the inputs that are checked on the first column if the lenght of the array returned is 0 then no input is checked, i't the same procedure for the other ones.
An yes those input names are weird.
Check this fiddle
JSFiddle

Can't make TAB change the editor on dgrid

I'm trying to make the TAB key navigate on my dGrid. I have used as a base the solution found at Dgrid set focus on cell, but there are a couple of issues I'm running into which I couldn't solve so far.
Below you can find the block I'm using now; Not all columns have editors, so for I added a var do the element definition to select the next column instead of doing a right. I also added support for SHIFT+TAB to make backwards navigation possible. MT4.prje.grids[gridId]is the dGrid instance. There might be various on the page.
The grid is created with
MT4.prje.grids[gridId] = new (declare([OnDemandGrid, Keyboard, Selection, CellSelection]))(gridInfo, gridId);
where gridInfo has the column definitions and the store. The store is created as:
new Observable(new Memory({'data': {}, 'idProperty': 'id'}));
The editors are usually TextBox, NumberTextBox and Select dijit widgets, all set to autoSave.
aspect.after(MT4.prje.grids[gridId], "edit", function (promise, cellNode) {
if (promise === null) return;
promise.then(function (widget) {
if (!widget._editorKeypressHandle) {
widget._editorKeypressHandle = on(widget, "keypress", function (e) {
for (var rowId in MT4.prje.grids[gridId].selection) {
break;
}
for (var columnId in MT4.prje.grids[gridId].selection[rowId]) {
break;
}
if (e.charOrCode == keys.TAB) {
e.preventDefault();
var cellToEdit = null,
cellEdited = MT4.prje.grids[gridId].cell(rowId, columnId);
if (e.shiftKey) {
if (cellEdited.column.previousEditor === undefined) {
rowId = parseInt(rowId) - 1;
if (MT4.prje.grids[gridId].row(rowId).element !== null) {
for (var lastColumnId in MT4.prje.grids[gridId].columns) {}
cellToEdit = MT4.prje.grids[gridId].cell(rowId, lastColumnId);
}
} else {
cellToEdit = MT4.prje.grids[gridId].cell(rowId, cellEdited.column.previousEditor);
}
} else {
if (cellEdited.column.nextEditor === undefined) {
var firstColumnId = null;
rowId = parseInt(rowId) + 1;
if (MT4.prje.grids[gridId].row(rowId).element === null) {
var fields = {};
for (var cId in MT4.prje.grids[gridId].columns) {
if ((cId != 'excluir') && (firstColumnId === null)) {
firstColumnId = cId;
}
fields[cId] = '';
}
MT4.prje.addRowToGrid(gridId, fields);
} else {
for (var cId in MT4.prje.grids[gridId].columns) {
if (cId != 'excluir') {
firstColumnId = cId;
break;
}
}
}
cellToEdit = MT4.prje.grids[gridId].cell(rowId, firstColumnId);
} else {
cellToEdit = MT4.prje.grids[gridId].cell(rowId, cellEdited.column.nextEditor);
}
}
if (cellToEdit) {
MT4.prje.grids[gridId].deselect(cellEdited);
MT4.prje.grids[gridId].select(cellToEdit);
MT4.prje.grids[gridId].edit(cellToEdit);
}
}
});
}
});
});
Even ignoring the new line part, there are a couple of errors that happen. First of all, the editor barely pops into existence and them disappears, together with the selection. Sometimes when tabbing to an empty column, the editor will be filled with the values of the previous editor. Is there a way to do it more consistently?
What I'm figuring is that there is a race condition happening on the sharedEditor (they are set to editOn: focus). I tried wrapping the deselect/select on a dojo.on('blur') and emit it. But that doesn't get consistently correct with the dijit/form/Select widgets. Is there a better event that I can call for it?
I also tried changing the final block to:
if (cellToEdit) {
on(cellToEdit.element, 'focus', function(){
MT4.prje.grids[gridId].select(cellToEdit);
});
on(cellEdited.element, 'blur', function(){
MT4.prje.grids[gridId].deselect(cellEdited);
on.emit(cellToEdit.element, 'focus', {'bubble': true, 'cancelable': false});
});
on.emit(cellEdited.element, 'blur', {'bubble': true, 'cancelable': false});
}
But that gives two errors:
If I do make changes to a cell it does not go to the next editor. Does not even select it.
The first time I move from an empty cell to another empty cell it doesn't work either.
Anyone got any ideas?

This fix works on dgrid 0.3.11.
Add to your dgrid's postCreate.
postCreate: function() {
var that = this;
this.inherited(arguments);
this.on('dgrid-datachange', function(evt) {
that._selectedCell = that.cell(evt);
});
aspect.after(this, 'save', function(dfd) {
dfd.then(function() {
var nextCell = that.right(that.cell(that._selectedCell.row.id, that._selectedCell.column.id));
that.edit(nextCell);
// Bonus Fix. Workaround dgrid bug that blocks field text to be selected on focus.
nextCell.element.widget && nextCell.element.widget.textbox && nextCell.element.widget.textbox.select();
});
});
}

jqgrid checkbox change event

I have true/false values in my database. I want to update them with checkbox in jqgrid.
Once the value is set to true, it will remain true and should not change. Please take a look at my column model :
{
name : 'available',
width : 12,
resizable: true,
editable: true,
align: 'center',
edittype:'checkbox',
formatter: "checkbox", formatoptions: {disabled : false},
classes:'check',
editrules:{required:false}, editoptions:{size:39,value:"True:False"}
}
I'm trying to capture the event when checkbox is checked, currently they are all unchecked, so far I've tried:
jq(".check input").each(function(){
jq(this).click(function(){
aler("works");
});
});
jq("input[type='checkbox']").change(function(){
alert("works");
});
jq(":checkbox").parent().click(function(evt) {
if (evt.target.type !== 'checkbox') {
var $checkbox = jq(":checkbox", this);
$checkbox.attr('checked', !$checkbox.attr('checked'));
$checkbox.change();
alert("");
}
});
None of these work, I'm stuck don't know what else to try.
When inspect checkbox code with firebug it looks like this :
<input type="checkbox" offval="no" value="false">

You can create a custom formatter. In your grid,
formatter: cboxFormatter,
Then define the function,
function cboxFormatter(cellvalue, options, rowObject)
{
return '<input type="checkbox"' + (cellvalue ? ' checked="checked"' : '') +
'onclick="alert(' + options.rowId + ')"/>';
}
You can use onclick to perform your task or call a function.

The usage of the custom formatter is one of the possibilities. One can also use unobtrusive style of onclick binding
First one defines
var grid = $("#list"),
getColumnIndexByName = function(columnName) {
var cm = grid.jqGrid('getGridParam','colModel'),i=0,l=cm.length;
for (; i<l; i++) {
if (cm[i].name===columnName) {
return i; // return the index
}
}
return -1;
},
disableIfChecked = function(elem){
if ($(elem).is(':checked')) {
$(elem).attr('disabled',true);
}
};
Then one can use the in the loadComplete the code like
loadComplete: function() {
var i=getColumnIndexByName('closed');
// nth-child need 1-based index so we use (i+1) below
$("tbody > tr.jqgrow > td:nth-child("+(i+1)+") > input",
this).click(function(e) {
disableIfChecked(this);
}).each(function(e) {
disableIfChecked(this);
});
}
See the corresponding demo here.

This worked for me:
// Listen for Click Events on the 'Process' check box column
$(document).on("click", "td[aria-describedby='grdOrders_Process']", function (e) {
var checked = $(e.target).is(":checked")
var rowId = $(e.target).closest("tr").attr("id")
rowData = jQuery("#grdOrders").getRowData(rowId);
alert("Checked: " + checked)
alert("OrderNo: " + rowData.OrderNo);
alert("Name: " + rowData.Name);
});