We Keep Coding

How to dynamically change datatable using jquery?

I'm making a website which is responsive so I'm working with datatables since it is responsive I want to change the datatable appearance in different #media screens. What I want to do is when I'm in desktop version the table will be in a normal state and for tablet form I want it to be in FIXED COLUMNS and when in mobile version I want it to be like
Responsive Table like so. What is best approach for this? Do I need to create multiple table or just use a script? Please let me know.

This should do the trick. You need to destroy the first DataTable before initializing it again.
$(window).on('resize load', function () {
var width = $(window).width();
if (width < 720) {
//for screens with less than 720px
var table = $('#example').DataTable({
destroy : true,
"scrollY": "300px",
"scrollX": "100%",
"scrollCollapse": true,
"paging": false
});
new $.fn.dataTable.FixedColumns(table);
} else {
$('#example').DataTable({
destroy : true,
responsive: true
});
}
}

I would suggest using a single script to change the look of the table based on media screen properties. Below is an example script that would load different views of a table based on screen width.
$(window).on('resize load', function () {
var width = $(window).width();
if (width < 720) {
//for screens with less than 720px
var table = $('#example').DataTable({
"scrollY": "300px",
"scrollX": "100%",
"scrollCollapse": true,
"paging": false
});
new $.fn.dataTable.FixedColumns(table);
} else {
$('#example').DataTable({
responsive: true
});
}
}
Responsive and Fixed Column code is taken from datatables website links you have provided. This piece of code should fire on window resize and when loading as explained here.

You can use bootstrap's class as shown in given link
http://getbootstrap.com/2.3.2/scaffolding.html#responsive

How to add a jquery ui slider to each cell of slickgrid?

I need to add a jquery ui slider to each cell of slickgrid. Number of records is over 10,000 with over 150 columns. The problem is that the initial set of sliders are rendered fine but as I scroll (left or right), they disappear. Somehow, the grid is not getting invalidated for those cells. I am using the following formatter on the column:
SliderFormatter = function (row, cell, value, colDef, dataContext) {
var html = "<div class='mySlider' id='slider_" + dataContext['id'] + "'></div>" + value;
return html;
}
and invoking the slider from my document.ready callback.
Any help will be appreciated. Thanks in advance !

SlickGrid renders only what's visible in the viewport, plus a small buffer. As you scroll, rows/cells are dynamically added and removed.
What this means for your case, is that when you initialize the slider widget in your document.ready callback, you're only initializing a tiny portion of them, and the ones that did get initialized, don't get re-initialized when the cells they are in are removed and recreated by SlickGrid.
SlickGrid doesn't allow you to use jQuery widgets like the slider in cells and requires that formatters output pure HTML in order to make it hard to implement the grid in a way that will slow it down. (I won't get into my reasoning behind that admittedly controversial decision.)
My advice here is to avoid using the jQuery UI slider here. It is simply not scalable or performant enough. Without virtualization, what you're trying to do is impossible - initializing 100 sliders is going to be really slow; initializing 10'000 x 150 of them is out of the question. With virtualization, you'll need to initialize and destroy them on the fly as you're scrolling around, and that's just too slow to scroll smoothly.
Consider using an HTML5 range input - <INPUT type="range">. It's supported by all major browsers with the exception of IE <10. See http://caniuse.com/#feat=input-range.

I've created an example using SlickGrid's async post-render option. #Tin is probably right that it would be better to use the native <input type="range"> but just in case you need to support older browsers here's how you can do it.
function waitingFormatter(value) {
return '<div class="slider"></div>';
}
function renderSlider(cellNode, row, dataContext, colDef) {
var cell = $(cellNode);
cell.find('.slider').slider({
value: dataContext.value,
slide: function(e, ui) {
data[row].value = ui.value;
cell.prev().html(ui.value);
}
});
}
var grid;
var data = [];
var columns = [
{ id: "title", name: "Title", field: "title", sortable: false, width: 120, cssClass: "cell-title" },
{ id: "value", name: "Value", field: "value", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator },
{ id: "chart", name: "Slider", sortable: false, width: 425, formatter: waitingFormatter, rerenderOnResize: true, asyncPostRender: renderSlider }
];
var options = {
editable: true,
enableAddRow: false,
enableCellNavigation: true,
asyncEditorLoading: false,
enableAsyncPostRender: true
};
$(function () {
for (var i = 0; i < 500; i++) {
var d = (data[i] = {});
d["title"] = "Record " + i;
d["value"] = Math.round(Math.random() * 100);
}
grid = new Slick.Grid("#myGrid", data, columns, options);
})

How to dynamically toggle the `resizable` boolean in the jQuery UI Layout plugin?

Problem
I am using the jQuery UI Layout plugin (layout.jquery-dev.net/index.cfm) in my web application.
Using 2 panels only (center and east), I need to dynamically disable the resizable option of the layout.
function InitializeLayout(sElement) {
var oOptions = {
closable: false,
resizable: true,
slidable: false,
east__livePaneResizing: true,
east__maxSize: 672,
east__minSize: 250,
east__onresize_end: function() {
// GetOverlaySizes();
// SetOverlaySizes();
// SetPaperSizes();
},
east__size: 250
};
oLayout = $(sElement).layout(oOptions);
oLayout.options.east.resizable = false;
console.log(oLayout.options);
}
This doesn't work, even though the resizable option is set to false on the console.
Questions
How do I dynamically disable/enable the resizable option ?
This has nothing to do with my problem, but why does enabling the live pane resizing make Mozilla Firefox (20.0) so slow ?
Thanks,
Solution
oLayout.disableResizable("east");
oLayout.enableResizable("east");
Thanks to #dwaddell.

Here is what you need to do, after the init:
oLayout.disableResizable('east');
Hope that helps.
Here is an updated jsFiddle: http://jsfiddle.net/dwaddell/YE2CQ/

jqGrid changes focus to an element at the top of the page

I'm having trouble with editable jqGrid's behavior when jqGrid becomes long. Clicking on non-editable cells and submitting edited cells brings the user to the top of the grid. Randomly clicking around would produce tons of unpredictable results. The element that gets focused is set to "top:-1000000px". What would be a good resoultion for this? Is there a way to override the focus event on this element?
<script type="text/javascript">
function populateTable(table) {
for(i = 0; i < 1000; i++) {
table.addRowData(i, {key:'Lorem', value:'Ipsum'});
}
}
$(document).ready(function() {
$("#grid").jqGrid({
datatype : "local",
colNames : ["Key", "Value"],
colModel: [
{name:'key', index:'lever', width:500, editable: true},
{name:'value', index:'defaultcpm', width: 100, editable: true},
],
height: 'auto',
cellEdit: true,
cellSubmit: 'clientArray'
});
populateTable($("#grid"));
});
</script>
</head>
<body>
<table id="grid"></table>
</html>
Edit: I suppose I was not specific enough. I do not want focus change after edits. The following code fixes it, but has side effects if any non-grid HTMLDivElement receives a focus event.
HTMLDivElement.prototype.focus = function() {}

If you want to set focus, the cells in colModel should be editable. Also try pasting this
$("#grid").jqGrid('editCell', 1, 1, true); in your code.
It will set focus on 1st row 1st column

jqGrid - Dragging a row to sort it screws up cell widths

My problem: When I drag a row in jqGrid, and it completes a custom reload function, the cells of the grid, previously all of varying widths set when the grid is defined, are resized to all be the same width. This happens in Webkit browsers but not in Firefox.
Code:
I have dragging to sort enabled on a grid:
$mygrid.jqGrid(
'sortableRows', {
update: function(e, ui) {
sort_grid(e, ui);
}
}
);
As you can see I have a sorting function called on drag complete, sort_grid. Here it is:
function sort_grid(e, ui) {
var current_grid = $(ui.item[0]).closest('table').attr('id');
var $current_row, moved_id, next_id, next_priority;
var $moved_row = $('#' + current_grid + ' tr');
var cnt = 0;
this_id = ui.item[0].id;
$moved_row.each(function () {
if ($(this).attr('id') == this_id) {
$current_row = $moved_row.eq(cnt);
moved_id = $current_row.attr("id");
next_id = $current_row.next().attr("id");
next_priority = $current_row.next().children("td:first").attr("title");
}
cnt++;
});
if ( typeof moved_id !== 'undefined' ) {
if ( next_priority == 'undefined' ) {
next_priority = '999';
}
$.ajax({
url:my_url,
type:"POST",
data:"moved_id=" + moved_id + "&next_id=" + next_id + "&next_priority=" + next_priority,
success: function(data) {
$('.grid').setGridParam({loadonce:false, datatype:'json'}); // force grid refresh from server
$('#' + current_grid).trigger("reloadGrid");
$('.grid').setGridParam({loadonce:true}); // reset to use local values
}
})
}
}
Once I hit that reload trigger $('#' + current_grid).trigger("reloadGrid"); and reload finishes the grid now has incorrect widths on the cells in the grid (they go from being of various widths to all being the same width).
When the grid was originally created it had widths defined in the normal jqGrid fashion:
colModel:[
{name:'one', index:'one', sortable:true, width:45},
{name:'two', index:'two', sortable:true, width:180},
]
but after the grid reload the widths are reset all be the same width (I assume this is the total width of the grid being evenly divided over the total number of cells in the row). So, do I need to explicitly set these widths again, perhaps with something like the following called after the grid reloads?
$('.grid').setGridParam({
colModel:[
{name:'one', index:'one', sortable:true, width:45},
{name:'two', index:'two', sortable:true, width:180},
]
});
I tried the above fix, redefining the colModels after reload and explicitly setting the widths, but it had no effect. Weirder, if I go into the browser console and set the widths with javascript it also has no effect. That's got me stumped.
Unfortunately for me it looks like the jqGrid "Answer Man" (Oleg) is not around... lol.

I faced the same problem for Chrome. I recreated it here http://jsfiddle.net/gZSra/. Just drag the row and then sort any column.
But after few hard hours of debugging jqGrid sources I finally fixed this bug. The problem appears in emptyRows method of jqGrid.
emptyRows = function (scroll, locdata) {
var firstrow;
if (this.p.deepempty) {
$(this.rows).slice(1).remove();
} else {
firstrow = this.rows.length > 0 ? this.rows[0] : null;
$(this.firstChild).empty().append(firstrow); // bug "activation" line
}
if (scroll && this.p.scroll) {
$(this.grid.bDiv.firstChild).css({height: "auto"});
$(this.grid.bDiv.firstChild.firstChild).css({height: 0, display: "none"});
if (this.grid.bDiv.scrollTop !== 0) {
this.grid.bDiv.scrollTop = 0;
}
}
if(locdata === true && this.p.treeGrid) {
this.p.data = []; this.p._index = {};
}
},
*In recent jqGrid-4.4.4 this code begins from 1070 line of jqGrid.src.js
The problem connected removing and then appending firstrow. This row defines width of columns - one of it's cells in my jsFiddle example is
<td role="gridcell" style="height:0px;width:60px;"></td>
That is why problem seems to be connected with some Chrome's or Webkit's dynamic table behaviour.
FIX
Replace infected else scope with next line
$(this.firstChild).find('tr:not(:first)').remove();
It's not hard to see that instead of removing all lines and then appending first back, I just selecting and removing all except first row.
Result jsFiddle: http://jsfiddle.net/HJ3Q3/
Tested in Chrome, FF, IE 8 & 9.
Hope this fix will soon become part of jqGrid sources.

.trigger('reloadGrid');
is causing issues with sortablerows.
Below work around might help you (Unload & reload grid)
Create a function to configure grid, like below
jQuery().ready(ConfigureGrid);
function ConfigureGrid(){
jQuery("#grdCategory").jqGrid({
url: '/controller/action',
datatype: "xml",
colNames: ['Order', 'Name', 'Page Title', 'Is Active', 'Action'
],
colModel: [
{ name: 'col1', index: 'col1', width: 50, sortable: true, sorttype: 'int' }
, { name: 'col2', index: 'col2', width: 150, sortable: true }
],
rowNum: 10,
rowList: [10, 20, 30],
});
$("#list1").jqGrid('navGrid', '#pager1', { edit: false, add: false, del: false, search: true });
$("#list1").jqGrid('sortableRows', { update: function (event, ui) { updateOrder() } });
}
Create function to reload grid
function loadGrid() {
$('#grdCategory').jqGrid('GridUnload');
ConfigureGrid();
}
use loadGrid() function in ajax call back or to refresh grid

Have you tried to setup this property in your jQgrid options
width: 'auto',
If this doesnt work try reloading your grid after the update of the row
jQuery('.grid').trigger('reloadGrid');

The comment of PokatilovArt needs more attention : jqGrid - Dragging a row to sort it screws up cell widths .
It solves the problem in Chrome.
Here is the parameter to change in jqGrid :
deepempty : true
In jqGrid wiki, here is the definition of this option.
This option should be set to true if an event or a plugin is attached to the table cell. The option uses jQuery empty for the the row and all its children elements. This of course has speed overhead, but prevents memory leaks. This option should be set to true if a sortable rows and/or columns are activated.