I have used below code to simulate fixed header with vertical and horizontal scroll bars. See example on jsFiddle.
$('#liveTable').dataTable({
'bSort': false,
'destroy': true,
'aoColumns': [
{ sWidth: "85px", bSearchable: false, bSortable: false },
{ sWidth: "75px", bSearchable: false, bSortable: false },
{ sWidth: "80px", bSearchable: false, bSortable: false },
{ sWidth: "80px", bSearchable: false, bSortable: false },
{ sWidth: "85px", bSearchable: false, bSortable: false },
{ sWidth: "70px", bSearchable: false, bSortable: false },
{ sWidth: "70px", bSearchable: false, bSortable: false },
{ sWidth: "50px", bSearchable: false, bSortable: false }
],
'scrollY': 200,
'scrollX': true,
'info': false,
'paging': false
});
The above code is working fine in Desktop.
But in mobile devices when I scroll body of the content header part not moving accordingly. There is some delay (flickering effect) in header movement in mobile devices.
How to fix that header movement issue in mobile devices?
Try this if it works for you. It's the other way around, but it works. Maybe you'll just need to adjust width or whatsoever. Run it through jsFiddle to test it.
$.event.special.scrollstart = {
enabled: true,
setup: function() {
var thisObject = this,
$this = $( thisObject ),
scrolling,
timer;
function trigger( event, state ) {
scrolling = state;
var originalType = event.type;
event.type = scrolling ? "scrollstart" : "scrollstop";
$.event.handle.call( thisObject, event );
event.type = originalType;
}
$this.bind( scrollEvent, function( event ) {
if ( !$.event.special.scrollstart.enabled ) {
return;
}
if ( !scrolling ) {
trigger( event, true );
}
clearTimeout( timer );
timer = setTimeout(function() {
trigger( event, false );
}, 50 );
});
}
};
Ok, if the flickering effect exists, try something like this. Your scroll is ok. It's the effect that sucks.
document.getElementById("btn").addEventListener("click", function(){
var abc = document.getElementById("abc");
var def = document.getElementById("def");
abc.style["-webkit-transition-duration"] = "0ms";
def.style["-webkit-transition-duration"] = "0ms";
abc.style["-webkit-transform"] = "translate3d(0, 0, 0)";
def.style["-webkit-transform"] = "translate3d(100%, 0, 0)";
setTimeout(function(){
abc.style["-webkit-transition-duration"] = "1s";
def.style["-webkit-transition-duration"] = "1s";
abc.style["-webkit-transform"] = "translate3d(-100%, 0, 0)";
def.style["-webkit-transform"] = "translate3d(0, 0, 0)";
},
);
});
Related
VERSION: ^9.3.3
HTML
<button (click)="toggleEditing()">{ editing ? 'cancel' : 'editing' }</button>
<button>ADD</button>
<gridster [options]="options">
<gridster-item class="px-3 py-2" [item]="item" *ngFor="let item of dashboard">
</gridster-item>
</gridster>
TS
editing = false;
ngOnInit() {
this.options = {
gridType: GridType.Fit,
margin: 0,
outerMargin: null,
outerMarginTop: null,
outerMarginRight: null,
outerMarginBottom: null,
outerMarginLeft: null,
useTransformPositioning: true,
mobileBreakpoint: 640,
keepFixedHeightInMobile: false,
keepFixedWidthInMobile: false,
scrollSensitivity: 10,
scrollSpeed: 20,
enableEmptyCellClick: this.editing,
enableEmptyCellContextMenu: false,
enableEmptyCellDrop: false,
enableEmptyCellDrag: this.editing,
emptyCellDragCallback: this.emptyCellClick.bind(this),
enableOccupiedCellDrop: false,
ignoreMarginInRow: false,
draggable: {
enabled: this.editing,
stop: (event) => { this.setFlrLayout(event); }
},
resizable: {
enabled: this.editing,
stop: (event) => { this.setFlrLayout(event); }
},
swap: true,
disablePushOnDrag: false,
disablePushOnResize: false,
pushDirections: { north: true, east: true, south: true, west: true },
pushResizeItems: false,
displayGrid: DisplayGrid.Always,
disableWindowResize: false,
disableWarnings: false,
scrollToNewItems: false,
itemInitCallback: ((item: GridsterItem, itemComponent: GridsterItemComponentInterface) => {
window.dispatchEvent(new Event('resize')); // to reisize respective charts
})
};
}
toggleEditing() {
this.editing = !this.editing;
}
ngOnChanges() {
if (this.options && this.editing || this.options && !this.editing) {
this.options['enableEmptyCellClick'] = this.editing;
}
}
emptyCellClick(event: MouseEvent, item: GridsterItem): void {
console.log(`test ${item}`);
}
What I'm trying to do here is to multi selection grid. But the problem is the click doesn't work. when I click the empty cell it doesn't display the console in devtool.
For example i click the empty cell it should display the console or when I click a multiple select for example the first item and second item is empty then I will select the first item and second then when I click add it will add from first item and second item just like this.
TO
In your ts file, You assign the value to options, Can you replace the enableEmptyCellClick: false to enableEmptyCellClick: true.
Thanks #ABC
I am using three bxSlider based slider. I want to move each slider from opposite side. I have tried and done it for first two round but in the end of second round slide starting to move from same direction of previous slide.
Here is all script which I have tried so far.
I am sorry if the question is not clear, kindly check the fiddle so that you will understand about my issue and thank you in advance for that.
Below is the main script, which is I am trying
jQuery(document).ready( function($) {
let slideOneFirstInterval = true;
let slideTwoFirstInterval = true;
let slideThreeFirstInterval = true;
let slideOne = $('#owlSlide1');
slideOne.bxSlider({
auto : false,
autoControls : false,
stopAutoOnClick : false,
pager : false,
speed : 2000,
infiniteLoop : true,
responsive : true,
slideWidth : 600,
controls : false,
autoStart : false,
randomStart : false,
preloadImages :'all',
onSlideAfter: function($slideElement, oldIndex, newIndex) {
if (slideThreeFirstInterval) {
setTimeout(function() {
//slideTwo.goToNextSlide();
slideThree.goToNextSlide();
console.log('True Statement.. 1');
}, 2000);
slideThreeFirstInterval = false
} else {
setTimeout(function() {
slideThree.goToPrevSlide();
console.log('False Statement.. 1');
}, 2000);
}
},
autoDelay : 0,
});
let slideTwo = $('#owlSlide2');
slideTwo.bxSlider({
auto : false,
autoControls : false,
stopAutoOnClick : false,
pager : false,
speed : 2000,
infiniteLoop : true,
responsive : true,
slideWidth : 600,
controls : false,
autoStart : true,
randomStart : false,
preloadImages :'all',
onSlideAfter: function($slideElement, oldIndex, newIndex) {
if (slideTwoFirstInterval) {
setTimeout(function() {
//slideThree.goToNextSlide();
slideOne.goToPrevSlide();
console.log('True Statement.. 2');
}, 2000);
slideTwoFirstInterval = false
} else {
setTimeout(function() {
//slideThree.goToNextSlide();
slideOne.goToPrevSlide();
console.log('false Statement.. 2');
}, 2000);
}
},
});
let slideThree = $('#owlSlide3')
slideThree.bxSlider({
auto : false,
autoControls : false,
stopAutoOnClick : false,
pager : false,
speed : 2000,
infiniteLoop : true,
responsive : true,
slideWidth : 600,
controls : false,
autoStart : true,
randomStart : false,
autoDelay : 0,
preloadImages :'all',
onSlideAfter: function($slideElement, oldIndex, newIndex) {
setTimeout(function() {
//slideOne.goToNextSlide();
slideTwo.goToPrevSlide();
console.log('True Statement.. 3');
}, 2000);
},
});
setTimeout(function() {
//slideOne.goToNextSlide();
slideTwo.goToNextSlide();
console.log('false Statement.. 3');
}, 3000);
});
Assuming you want everything to slide from left to right as opposed to right to left, just replace all occurrences of goToNextSlide() with goToPrevSlide(). You may need to re-order your images in your HTML but it's easier to do that than tangle with a library.
<script defer>
$(document).ready(function() {
alert("FIRST ALERT MESSAGE (IT IS WORKING!)");
var calcDataTableHeight = function() {
return $(window).height()*39/100;
};
var oTable = $('#CariKart').dataTable({
sScrollY: calcDataTableHeight(),
bPaginate: false,
bFilter: true,
aaSorting: [[0,'asc']],
oLanguage: {
sZeroRecords: "Kayıtlı Cari Kart İşlemi bulunmamaktadır.",
sInfo: "Listede toplam <b>_TOTAL_</b> Cari Kart İşlemi bulunmaktadır.",
sInfoEmpty: "Kayıtlı Cari Kart İşlemi bulunmamaktadır.",
sSearch: "İşlem Ara: "
},
aoColumns: [
{ sWidth: '15%' },
{ sWidth: '10%' },
{ sWidth: '21%' },
{ sWidth: '10%' },
{ sWidth: '10%' },
{ sWidth: '10%' },
{ sWidth: '10%' },
{ sWidth: '10%' },
{ sWidth: '4%' }
]
});
$(window).resize(function () {
var oSettings = oTable.fnSettings();
oSettings.oScroll.sY = calcDataTableHeight();
oTable.fnDraw();
});
alert("SECOND ALERT MESSAGE (IT IS NOT WORKING!)");
});
Can anyone explain why first alert message is working why second message is not working?
alert function is not neccessary! When I write any js code before datatable codes they are running but If I write them after datatable codes they dont. Why? :)
You have to use one of the documented methods to access the plugin API
One is to use .DataTable() instead of .dataTable()
You are most likely getting a "not a function" error in console
Hi I have a Grid that is using cell edit and Inline editing. It saves to the ClientArray
$('#list').jqGrid({
datatype: "local",
colNames: ["Parameter Id", "Parameter Name", 'Parameter Value'],
colModel: [
{ name: "Id", index: "Id", align: "left", key: true, editable: false,hidden:true, jmap: 0 },
{ name: "ParameterName", index: "ParameterName", align: "left", editable: false, jmap: 1 },
{ name: "ParameterValue", index: "ParameterValue", align: "left", editable: true, edittype: "text", editoptions: { maxlength: 100 }, editrules: {required: true }, jmap: 2 }
],
pager: "#pager",
rowNum: 100,
rowList: [],
pgbuttons: false, // disable page control like next, back button
pgtext: null, // disable pager text like 'Page 0 of 10'
viewrecords: true, // disable current view record text like 'View 1-10 of 100'
height: '100%',
scrollOffset: 0,
sortname: "Name",
sortorder: "Asc",
gridview: true,
caption: 'Parameters',
autowidth: true,
hidegrid: false,
loadonce: true,
//beforeEditCell: function () {
// $("#list_ilsave").removeClass('ui-state-disabled');
// return;
//},
//afterEditCell: function (rowid, cellname, value, iRow, iCol) {
// $('#list').jqGrid('getCell', rowid, iCol).focus();
// return;
//},
width: totalWidth,
cellEdit: true,
cellsubmit: "clientArray"
});
$('#list').jqGrid('inlineNav', '#pager', {
edit: false,
add: false,
del: false,
save: true,
savetext: 'Save',
cancel: false
});
When I edit a Cell the save button remains disabled. If I manually Enable the button in beforeCellEdit, the editable cell hasn't got focus until you select another cell. This behavior is only happening in IE.
I have tried to fix both these issues individually in my commented out code, and I have found that the loss of focus is caused by the line
$("#list_ilsave").removeClass('ui-state-disabled');
I tried placing this line in beforeEditCell and in afterEditCell and it causes the input field to loose focus.
I was using JQ Grid 4.4.4 and I have tried updating to 4.6.0 after I read there were updates to Inline Editing after 4.4.4
UPDATE
I have changed my grid to use onSelectRow
onSelectRow: function (rowid) {
var $grid = $('#list');
var iRow = $("#" + rowid)[0].rowIndex;
$grid.jqGrid('editRow', rowid, {
keys: true,
oneditfunc: function(rowid, response) {
var $saveButton = $("#list_ilsave");
if ($saveButton.hasClass('ui-state-disabled')) {
$saveButton.removeClass('ui-state-disabled');
}
markCellAsDirty(rowid, $grid);
return true;
},
successfunc: function() {
alert('success');
return true;
},
aftersavefunc: function() {
alert('after save');
return true;
},
errorfunc: function() {
alert('error');
return true;
}
});
},
cellsubmit: "clientArray"
But I can't get any of the editRow events to fire other than oneditfunc. I also have an issue with getting the changed cells.
This method marks the cells as dirty / edited
function markCellAsDirty(rowid, grid) {
$(grid.jqGrid("setCell", rowid, "ParameterValue", "", "dirty-cell"));
$(grid[0].rows.namedItem(rowid)).addClass("edited");
}
I try to get the edited cells as follows
var editedRows = $grid.getChangedCells('dirty');
Before posting editedRows in an AJAX method to my server.
I'm not sure what you want to implement exactly, but I modified your demo to the following https://jsfiddle.net/OlegKi/byygepy3/11/. I include the full JavaScript code of the demo below
$(function () {
var myData = [
{ id: 10, ParameterName: "Test", ParameterValue: "" },
{ id: 20, ParameterName: "Test 1", ParameterValue: "" },
{ id: 30, ParameterName: "Test 2", ParameterValue: "" }
],
$grid = $("#list");
// change the text displayed on editrules: {required: true }
$.extend(true, $.jgrid.locales["en-US"].edit.msg, {
required: "No value was entered for this parameter!!!"
});
$grid.jqGrid({
datatype: "local",
data: myData,
colNames: ["", "Parameter Name", "Parameter Value"],
colModel: [
{ name: "act", template: "actions" }, // optional feature
{ name: "ParameterName" },
{ name: "ParameterValue", editable: true,
editoptions: { maxlength: 100 }, editrules: {required: true } }
],
cmTemplate: { autoResizable: true },
autoResizing: { compact: true },
pager: true,
pgbuttons: false, // disable page control like next, back button
pgtext: null, // disable pager text like 'Page 0 of 10'
viewrecords: true, // disable current view record text like 'View 1-10 of 100'
sortname: "Name",
iconSet: "fontAwesome",
caption: 'Parameters',
autowidth: true,
hidegrid: false,
inlineEditing: {
keys: true
},
singleSelectClickMode: "selectonly", // prevent unselect once selected rows
beforeSelectRow: function (rowid) {
var $self = $(this), i,
// savedRows array is not empty if some row is in inline editing mode
savedRows = $self.jqGrid("getGridParam", "savedRow");
for (i = 0; i < savedRows.length; i++) {
if (savedRows[i].id !== rowid) {
// save currently editing row
// one can replace saveRow to restoreRow in the next line
$self.jqGrid("saveRow", savedRows[i].id);
}
}
return savedRows.length === 0; // allow selection if saving successful
},
onSelectRow: function (rowid) {
$(this).jqGrid("editRow", rowid);
},
afterSetRow: function (options) {
var item = $(this).jqGrid("getLocalRow", options.rowid);
if (item != null) {
item.dirty = true;
}
},
navOptions: {
edit: false,
add: false,
search: false,
deltext: "Delete",
refreshtext: "Refresh"
},
inlineNavOptions: {
save: true,
savetext: "Save",
cancel: false,
restoreAfterSelect: false
},
formDeleting: {
// delete options
url: window.g_baseUrl + 'MfgTransactions_MVC/COA/Delete?',
beforeSubmit: function () {
// get value
var selRowId = $(this).jqGrid('getGridParam', 'selrow');
var parametricValue = $(this).jqGrid('getCell', selRowId, 'ParameterValue');
// check if empty
if (parametricValue === "") {
return [false, "Cannot delete: No value exists for this parameter"];
}
return [true, "Successfully deleted"];
},
delData: {
batchId: function () {
return $("#BatchId").val();
}
},
closeOnEscape: true,
closeAfterDelete: true,
width: 400,
msg: "Are you sure you want to delete the Parameter?",
afterComplete: function (response) {
if (response.responseText) {
alert("response.responseText");
}
//loadBatchListIntoGrid();
}
}
}).jqGrid('navGrid')
.jqGrid('inlineNav')
.jqGrid('navButtonAdd', {
caption: "Save Changed",
buttonicon: "fa-floppy-o",
onClickButton: function () {
var localData = $(this).jqGrid("getGridParam", "data"),
dirtyData = $.grep(localData, function (item) {
return item.dirty;
});
alert(dirtyData.length > 0 ? JSON.stringify(dirtyData) : "no dirty data");
}
});
// make more place for navigator buttons be rwducing the width of the right part
var pagerIdSelector = $grid.jqGrid("getGridParam", "pager");
$(pagerIdSelector + "_right").width(100);
// make the grid responsive
$(window).bind("resize", function () {
$grid.jqGrid("setGridWidth", $grid.closest(".container-fluid").width());
}).triggerHandler("resize");
});
where HTML code is
<div class="container-fluid">
<div class="row">
<div id="gridarea" class="col-md-6 col-md-offset-3">
<table id="list"></table>
</div>
</div>
</div>
and CSS code
.ui-th-column>div, .ui-jqgrid-btable .jqgrow>td {
word-wrap: break-word; /* IE 5.5+ and CSS3 */
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
overflow: hidden;
vertical-align: middle;
}
It demonstrate how one can implement starting inline editing on select row. Additionally I added optional column with template: "actions" which can be alternative implementation. I set property dirty in every item of data inside of afterSetRow callback and I added "Save Changed" button, which uses localData = $(this).jqGrid("getGridParam", "data") and dirtyData = $.grep(localData, function (item) { return item.dirty; }); to get the dirty (modified) data.
Environment: Ruby 2.0.0, Rails 4.0.3, Windows 8.1 Update, jquery-datatables-rails 2.2.1, jquery-ui-rails 5.0.0, jquery-rails 3.1.1
I have DataTables up and running, but I need to make my tables responsive. I'm confused by the instructions to do so. I have written some JavaScript but not Coffee. Either way, I'm not sure what to do.
The jquery-datatables-rails instructions say:
5 - Initialize your datatables using:
responsiveHelper = undefined
breakpointDefinition =
tablet: 1024
phone: 480
tableElement = $("#example")
tableElement.dataTable
autoWidth: false
preDrawCallback: ->
# Initialize the responsive datatables helper once.
responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition) unless responsiveHelper
return
rowCallback: (nRow) ->
responsiveHelper.createExpandIcon nRow
return
drawCallback: (oSettings) ->
responsiveHelper.respond()
return
I currently initialize my tables doing this:
$(document).ready(function () {
// Enable any datatables
$('#datatable').dataTable({
"sPaginationType": "full_numbers",
bJQueryUI: true
});
$('#carstable').dataTable({
"sPaginationType": "full_numbers",
bJQueryUI: true,
bProcessing: true,
bServerSide: true,
sAjaxSource: $('#carstable').data('source')
});
I used compileonline.com to generate the JavaScript:
(function() {
var breakpointDefinition, responsiveHelper, tableElement;
responsiveHelper = void 0;
breakpointDefinition = {
tablet: 1024,
phone: 480
};
tableElement = $("#example");
tableElement.dataTable({
autoWidth: false,
preDrawCallback: function() {
if (!responsiveHelper) {
responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition);
}
},
rowCallback: function(nRow) {
responsiveHelper.createExpandIcon(nRow);
},
drawCallback: function(oSettings) {
responsiveHelper.respond();
}
});
}).call(this);
But I cannot see what I need to do to integrate that into my current JavaScript initializer.
Staring at the code long enough sometimes resolves the problem... I have it basically working, though I'll need to customize it. The replacement code is as follows:
$(document).ready(function() {
var breakpointDefinition, responsiveHelper, tableElement;
responsiveHelper = void 0;
breakpointDefinition = {
tablet: 1024,
phone: 480
};
tableElement = $("#datatable");
tableElement.dataTable({
autoWidth: false,
"sPaginationType": "full_numbers",
bJQueryUI: true,
preDrawCallback: function() {
if (!responsiveHelper) {
responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition);
}
},
rowCallback: function(nRow) {
responsiveHelper.createExpandIcon(nRow);
},
drawCallback: function(oSettings) {
responsiveHelper.respond();
}
});
tableElement = $("#carstable");
tableElement.dataTable({
autoWidth: false,
"sPaginationType": "full_numbers",
bJQueryUI: true,
bProcessing: true,
bServerSide: true,
sAjaxSource: $('#carstable').data('source'),
preDrawCallback: function() {
if (!responsiveHelper) {
responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition);
}
},
rowCallback: function(nRow) {
responsiveHelper.createExpandIcon(nRow);
},
drawCallback: function(oSettings) {
responsiveHelper.respond();
}
});