We Keep Coding

How do I hide all the checkboxes in jQgrid?

I need to hide all the checkboxes on a jQgrid and after read this two posts:
Remove the heading checkbox from jqgrid
jqGrid multiselect "check all" in header: how to hide it?
This is what I did:
// this only hides the first checkbox on the header
$('#gbox_grid_notification_queue').find('input[type="checkbox"]').hide();
// this does not hide anything at all
$('#gbox_grid_notification_queue').find('td input[type="checkbox"]').hide();
// this does not hide anything, same as previous one
var grid_notification_queue = $("#grid_notification_queue");
$("#cb_" + grid_notification_queue.id).hide();
What I am missing here?

If you use free jqGrid fork, then the solution would be very easy. You need just add
multiselectPosition: "none"
option to prevent creating checkboxs. It improves additionally the performance of multi-selection. I remind that here you can find different options of free jqGrid, which has relation with selection. The value of multiselectPosition could be "left", "right" or "none".

You can use this code
$("input[type=checkbox]").each(function() {
$(this).hide();
});

Try this:
$('#gbox_grid_notification_queue').find('input[type="checkbox"]').each(function(){
$(this).hide();
});

Group level checkbox in slick grid

I am facing an issue in using checkbox selector plugin for the Slick grid.
The plugin does not provide any way to add group level checkbox after using grouping plugin for the slick grid. I added checkbox using formatter function in groupItemMetadataProvider options something like this:
dataView.setGrouping({
getter: "duration",
formatter: function (g) {
var checkedState="";
if(g.hasOwnProperty("checked")){
g["checked"] ? checkedState="checked" : checkedState="";
}
return "<input type=\"checkbox\" class="groupCheck" data-id=\""+g.value+"\" "+checkedState+"> Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>";
} });
Above code is displaying a checkbox.
I am binding change event and looping through data view to check rows which have the same duration as groupedBy ID and if its matched saving passing index to toggleRowSelection function in checkbox selector plugin.
Its working fine. Showing all child checked but header checkbox is not saving its state. After scrolling checkbox losing its 'checked' state.
Need help in solving this. Tried saving its state in "isChecekd" flag in above snippet.

Have you looked at this example? It is the official way to add a checkbox to groups which retains state on scroll.
http://6pac.github.io/SlickGrid/examples/example-grouping-checkbox-row-select.html
Make sure you have these three lines of code to get it working in your webapp:
var checkboxSelector = new Slick.CheckboxSelectColumn({cssClass: "slick-cell-checkboxsel"});
var groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider({ checkboxSelect: true, checkboxSelectPlugin: checkboxSelector });
dataView.syncGridSelection(grid, true, true);
The original developers of slickGrid are not very active in the development so make sure you are using the latest build from:
SlickGrid

How to use jqGrid Custom Formatter and 'showlink' at the same time? Links in column do not appear link-like

I am trying to link the variables in the first column of my jqgrid to another page. Right now, the variables do not appear link-like OR exclusive (meaning no matter where I click on the row, I am taken to the destination page).
I need to use the custom formatter because the URL in my search bar should not change (I am running this on my local server). But with the custom formatter, I cannot seem to also use 'showlink' (which ultimately seems to make my data appear link-like when I'm not using the custom formatter). I want the finger cursor when hovering over the data in my first column, all I'm getting right now is the "I".
Is there someway I can use both
formatter:'showlink' from the predefined formatter AND formatter: returnHyperLink(name) from the custom formatter? I want to be able to ONLY click the first column's data to be taken to the page, and I want this data to appear link-like ( should not be able to click anywhere on the row).
My relevant jqgrid code is:
colNames:['Name','Status', 'Created On', 'Update By', 'Updated On', 'RetentionDays','ValidityTime','Edit'],
colModel:[
{
name: 'name', width:100,editable: true, edittype:'select',
formatter: returnHyperLink(name),
xmlmap: function (obj) {
return $(obj).attr('name');
}
},
And my function, returnHyperLink appears as:
function returnHyperLink(name){
$(this).click(function() {
$( "#contents" ).load("jsp/consumers.jsp");
console.log(this, "Hello world");
});
};
...okay obviously something is wrong if all of this code isn't even showing up in the code box. I was thinking I could call the javascript function from inside of an href, but I also do not know how to do this.

It seems to me that you misunderstand how the custom formatter works. jqGrid creates the whole body of the grid (<tbody>) as the string. Thus the custom formatter should return the string and no $(this).click inside of the formatter do not what you expect. The <td> element not yet exist during the custom formatter is working.
You don't wrote, which version of jqGrid and from which fork of jqGrid you use. If you would use free jqGrid, then you can use onClick callback option of formatter: "showlink":
formatter: "showlink", formatoptions: {
onClick: function (options) {
// this is DOM of the grid
// options.iCol is the column index
// options.iRow is the row index
// options.rowid is the rowid
// options.cm is the element from colModel
// options.cmName is the column name
// options.cellValue is the text from the <a>
// options.a - DOM element of the clicked <a>
// options.event - Event object of the click event
alert("it's clicked!");
}
}
If you have to use an old version of jqGrid and can't migrate to free jqGrid then you can download jQuery.jqGrid.dynamicLink.js from here and to use formatter: "dynamicLink", which I described in the old answer. See the answer too.
If you would do prefer to use your custom formatter, then you can use beforeSelectRow callback to implement onClick action. See the answer and this one for more details.

IPython 2.0 Notebook: where has the "Add Cell Above" button gone, and how do I get it back?

I upgraded to IPython 2.0 today.
Alot of changes seem good, but the button to insert a new cell, above/below seems to be gone.
The option is still in the menu, and I believe the keyboard short cut works.
But the button is gone.
I'm sure there is a way to turn it back on, but the documentation for the new version doesn't seem super complete.
Possibly to turn it back on I need to adjust something in the config.
Which is just python script.
Maybe even tell it to insert a new element, and bind some javascript to it.

These buttons relocated to "Insert" menu. However, it is always good idea to use shortcut commands:
Ctrl+m+- (split cell)
Ctrl+m+a (insert cell above)
Ctrl+m+b (insert cell below)
If you can master them and other basic commands, it will make your notebook workflow really slick. Full list of commands can be found here.

I ended up teaching myself some javascript to do this.
You can make this change in the custom.js file.
which can be found in ~/.ipython/profile_[profile name]/static/custom.
Replace it with the following:
$([IPython.events]).on('app_initialized.NotebookApp', function(){
IPython.toolbar.add_buttons_group([
{
'label' : 'Insert Cell Above',
'icon' : 'fa-arrow-circle-o-up',
'callback': function () {
IPython.notebook.insert_cell_above('code');
IPython.notebook.select_prev();
IPython.notebook.focus_cell();
}
},
{
'label' : 'Insert Cell Below',
'icon' : 'fa-arrow-circle-o-down',
'callback': function () {
IPython.notebook.insert_cell_below('code');
IPython.notebook.select_next();
IPython.notebook.focus_cell();
}
}
]);
$('#insert_above_below').remove()
});
If you have already modified it,
then you can not replace the whole file, obviously, and should merge the appropriate parts.
The buttons will show up on the right.
The single + button for below is also removed.

as now in 5.7.4 version shortcut to create cell above is esc + a

jqGrid with navbar/pager having a custom function bound to the edit button

I'm using the jQuery plugin that generates interactive tables called jqGrid.
I want to use this "editfunc" (2/3rds or 3/4ths down the page) but I can't find a clear example of how to implement it anywhere. I've attempted several differnt things and all of them leave me with total failure.
To be clear, the table generated looks something like this:
That lower bar is called the "navpbar" or "pager", you implement it as a separate DIV, the API and documentation is fairly unclear (to myself anyway) on how exactly I put a custom function onto those buttons such as "add", "edit", "delete", etc... I can get default functionality working, but I can't find anything through websearches, this site, or the API docs on what the actual implementation looks like.

jqGrid has opened source. It helps to clear all questions directly in the code. Look at the lines for example. You will see what navGrid do on click on the 'Edit' button of the navigator:
var sr = $t.p.selrow;
if (sr) {
if($.isFunction( o.editfunc ) ) {
o.editfunc(sr);
} else {
$($t).jqGrid("editGridRow",sr,pEdit);
}
} else {
$.jgrid.viewModal("#"+alertIDs.themodal,{gbox:"#gbox_"+$t.p.id,jqm:true});
$("#jqg_alrt").focus();
}
So if you define editfunc callback function the function will be called with id of selected row as the parameter instead of creating editing dialog by editGridRow.
The method editGridRow have many customization functionality. The prmEdit parameter of the navGrid allow to specify any option used by editGridRow.
If you don't want do display editing form and display any other GUI instead you can use editfunc callback function. For example:
$("#list").jqGrid('navGrid', '#pager', {
editfunc: function (rowid) {
alert('The "Edit" button was clicked with rowid=' + rowid);
}
});
See the demo. Select a row and click on the "Edit" button and you will see the alert instead of the standard editing form.