When there are rows which didnt fit in screen datatable collapses and display button + .So I want to datatable should fit to screen and show all rows.
Yes it is possible and its very easy use
Please follow the link click here
You have to include this JS https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js
And use datatable like below
$('#myTable').DataTable( {
responsive: true
} );
Related
I have a dynamic angular-datatable something similar to this https://l-lin.github.io/angular-datatables/#/withFixedHeader, also table got horizontal scroll bar. Currently fixed header datatable plugin not supporting scroll. Any idea how to implement this ?
Check the scroll event of datatable and initialize it in angular,
angular.element(document).on('init.dt', function() {
document.querySelector('.dataTables_scrollBody').onscroll = function(e) {
// dtInstanceCallback
// call the dtInstance again.
}
})
so, whenever a scroll event happens in angular datatable then it will recreate the table which in turn works as expected.
Note: This makes datatable too compatible with scroll events in angular way :)
I am hoping to catch the drop event when dragging and droping a row in the same grid.
I am looking the "Sortable Rows" example listed here (version 3.6)
http://trirand.com/blog/jqgrid/jqgrid.html
I am able to replicate this example locally. Instead of using
jQuery("#sortrows").jqGrid('sortableRows');
from the example, I used the following:
jQuery("#sortrows").jqGrid('sortableRows', {
ondrop: function (ev, ui, getdata) {
alert('fired');
}
});
I did not change anything else. However, the ondrop event seems not fired when I drop a row.
How to catch drop and other events in my situation?
BTW, what is the normal strategy of refreshing the table after drag/drop, if I have a grid with rows of alternating colors?
Thanks and regards!
I found this post:
Using SortableRows and know when rows have been moved
which mentions:
jQuery("#grid").sortableRows( options )
"options" is the passed to the sortable plugin.
options = { update : function(e,ui){} }
In the update method, I used the following:
$(grid_selector).trigger("reloadGrid");
Hope this helps. Love to hear better solutions.
Often I need to edit a single record in a database without the need to display the grid at all. I can hide the grid using CSS or jQuery. What I couldn't figure out is to directly go to the edit form from another webpage while hiding the grid.
I know it's kind of defeating the purpose of having a grid, but it's one of those cases where only a single record should be view and modified by the users similar to the Access single record mode. Is it even possible?
In general you can just hide so named "gbox" created over the grid and then call editGridRow method with the options which you like to have. As the result you will have the form which close to what you want. I am sure that you have to make some other small problems, but the first look can be like you want. Moreover you can scroll over the rows during editing.
The demo demonstrate what I mean. It displays the following form
The demo uses the following code
$("#list").jqGrid({
...
loadComplete: function (data) {
$(this).jqGrid("editGridRow", data.rows[0].id, {
modal: true,
overlay: 0, // create no overlay
onClose: function () {
return false; // don't allow to close the form
}
});
}
}).closest(".ui-jqgrid").hide();
This is one of the reasons I like to use my own custom edit forms, instead of the one built into jqGrid. Then you can just open it like you would from the jqGrid handler (with appropriate parameters of course), no grid required.
I am using the kendo UI Web Grid to display some data.
Since I am dealing with a lot of data I have decided to use the grid virtual scrolling feature, which works great.
Now, I need to add a non databound column that will get populated with a checkbox, so that I can check/uncheck a record in the grid for further processing.
I cam able to add the checkbox column by simply using a template :
columns: [
{
field: "",
width:'3%',
title: " ",
hidden: false,
template: "<input type=\"checkbox\" />"
},
The problem that I am running into is that when virtual scrolling is enabled, if I check one of the checkboxes, then scroll the grid, when I go back to the record that was checked, it is not checked anymore.
How can I use virtual scrolling and still keep my checkbox checked ?
Thanks
The rows are always re-created when you pass as many records as your pageSize is. However if you really bind that checkbox to the underlying model, the changes will be persisted and once you are back on the same page you will see the items as checked.
One way to make the checkboxes reflect the changes to the model is like this:
grid.tbody.on('click',':checkbox',function(e){
var row = $(this).closest('tr');
grid.dataItem(row).set('isAdmin',$(this).is(':checked'));
})
Where isAdmin is the name of the field the checkbox is bound to.
Here is live example.
Does jqgrid supports fade in,fade out, I want to make it fade in fade out when the grid display and reload, is there anyone knows how to make it?
you need to hide it's content or the whole grid?, there is no fade in/out in jqgrid but you can use jquery effect function to create this effect
you can set fadeOut in onBeforeRequest, and fadeIn in loadComplete
onBeforeRequest : function(){
// is used for the whole grid
$(this).closest('#gbox_'+this.id).fadeOut('slow');
/*--------- OR ----------*/
//will fade out only the table inside
$(this).fadeOut('slow');
},
loadComplete : function(){
$(this).closest('#gbox_'+this.id).fadeIn('slow');
/*--------- OR ----------*/
$(this).fadeIn('slow');
}
If you're going for a visual effect, Liviu's answer is a good one. If you're trying to block user interaction with the grid while it's loading data, what I like to do on my grids is use the BlockUI plugin http://jquery.malsup.com/block/#element
My pattern is to block the grid before an ajax call, and then unblock it on the ajax call's success method .
If you are wanting to inform your users that the grid is loading...(I'm completely assuming this might be at the core of what you are looking for??)...as an alternative to a fadeIn/fadeOut...
I find that the "grid loading" message is not the greatest way to inform users that the grid is loading. For example, if the grid has many rows, the message may not appear in the view area and the user may be looking at old data in the grid (while it's loading) and not realize it...especially if the server processes the ajax slow or the query is slow for whatever reason. Here's a little something I do:
Add this event to your jqgrid setup:
beforeRequest: function(){
$('#grid tr').addClass('gridLoadingClass');
$('#grid span').css('color','lightgray');
$('#grid a').css('color','lightgray');
},
And add a class like this somewhere in your CSS:
.gridLoadingClass {color:lightgray;}
Your grid's contents will now "gray out" while loading.