I have a strange issue with jQuery ui-sortable. In my example I have multiple columns and in each column I have multiple sortable items.
I want to drag and drop in any column, sorting within one column is no problem.
I have two problems:
When dragging from one column to another column I need the destination column to auto scroll to the bottom.
Horizontal scroll does not auto scroll for the column on the very right side.
See my example
https://jsfiddle.net/maidanhcongtu/9ws2unLa/11/
var configuration2 = {
cursor : 'move',
placeholder : 'highlight',
dropOnEmpty : true,
connectWith : ".connectedSortable",
containment : "body",
};
$(".connectedSortable").sortable(configuration2).disableSelection();
Okay, I have found a solution to disable scrolling when you're no longer sorting in the original parent, so that the sortable item does not scroll the parent when dragging over another sortable.
I also made the sortable list you're sorting over auto scroll to the bottom.
Sorry, I changed your code up a bit because it's easier for me to keep track of things this way.
Also, I added ID's to each sortable list.
see updated fiddle: https://jsfiddle.net/Souleste/ktxeu35p/46/
$('li').addClass('item');
var y;
var og;
var n, nB, half;
$(".connectedSortable").sortable({
cursor : 'move',
placeholder : 'highlight',
dropOnEmpty : true,
connectWith : ".connectedSortable",
containment : "body",
items: '.item',
start: function(event,ui) {
og = $(this).closest('.connectedSortable');
},
over: function(event,ui) {
n = $(this).closest('.connectedSortable');
nB = n.outerHeight(true) + n.position().top;
half = nB / 2;
},
sort: function(event,ui) {
console.log(half);
if ( n.attr('id') != og.attr('id') ) {
og.sortable( "option", "scroll", false );
if (event.pageY > half) {
n.scrollTop(n.scrollTop() + 5);
} else if (event.pageY < half) {
n.scrollTop(n.scrollTop() - 5);
}
} else {
og.sortable( "option", "scroll", true );
}
}
});
Related
I have an ag-grid master-detail grid where one master row typically has only 1 or 2 sub-rows in the detail grid (there's always 2 columns for the detail grid). When I write up the code matching the examples on ag-grid's documentation, it always leaves huge whitespace under the detail grid and it auto-expands the detail grid's width to the width of the container.
I would like to get rid of the extra whitespace under the detail grid and also size the detail grid so the columns are only as wide as they need to be to fit the data. (Thus there would be whitespace to the right side of the detail-grid)
I've tried looking through the styles in chrome dev tools but I can't figure out what controls those 2 styling aspects. In addition, setting domLayout = 'autoHeight' in the detail grid options just moves the bottom of the detail grid to the last row, but it doesn't get rid of the extra whitespace in the cases where there's only 1 detail-row.
Plunkr MVPs (includes domLayout = 'autoHeight' in detail-grid's options):
React: https://plnkr.co/edit/K76FssFF4Ex538fn
Angular: https://plnkr.co/edit/0n5EllKejfyq9x4E
The original plunkr samples came from the "Simple Example" plunkr on the ag-grid master-detail documentation.
All you need to do is refer the documentation here, as for the additional things needed.
We need to use this method from the ag-grid documentation.
this.getRowHeight = function(params) {
if (params.node && params.node.detail) {
var offset = 80;
var allDetailRowHeight =
params.data.callRecords.length *
params.api.getSizesForCurrentTheme().rowHeight;
var gridSizes = params.api.getSizesForCurrentTheme();
return allDetailRowHeight + gridSizes.headerHeight + offset;
}
};
Also on the detail panel grid options we need to add this property, which will set the height dynamically.
this.detailCellRendererParams = {
detailGridOptions: {
columnDefs: [
{ field: 'callId' },
{
field: 'duration',
valueFormatter: "x.toLocaleString() + 's'",
}
],
defaultColDef: {
flex: 1,
editable: true,
resizable: true,
},
onGridReady: function(params) {
params.api.setDomLayout('autoHeight');
},
},
getDetailRowData: function(params) {
params.successCallback(params.data.callRecords);
},
};
Below is a working example for your reference
Plunkr example
After combining Naren's answer with some css adjustments, this is the best result I could get. I'm not accepting this answer because it's not what I want, but I can live with it until I (or someone else) can figure out something better.
https://plnkr.co/edit/d9emrRiavR9gCpQl
Basically I added these 2 things to the plunkr:
this.getRowHeight = params => {
const defRowHeight = params.api.getSizesForCurrentTheme().rowHeight;
if(params.node.detail) {
const offset = 80;
const detailRowHeight =
params.data.callRecords.length * defRowHeight;
var gridSizes = params.api.getSizesForCurrentTheme();
return detailRowHeight + gridSizes.headerHeight + offset;
} else {
return defRowHeight;
}
}
styles: ['::ng-deep .ag-details-row { width: 50% }']
An acceptable solution would provide a way to resize the detail grid directly to the width of the actual columns (rather than an arbitrary percentage)
Image:
(You can remove that little extra space under the 1st row of the detail grid by overriding min-height of one of the grid's css classes. It only appears if there's 1 row in the detail grid)
I'm working on my WordPress website with Visual Composer.
I need to include a pageable container but it would be great if it can be like a slideshow.
This is my pageable container
Thanks in advance,
Regards :)
Based upon the current version of WP Bakery Page Builder the below works for me:
To build it I created a row with 3 columns, with the pageable container in the middle column and the left and right arrow images in the columns on either side.
Both arrow images and the pageable container were given IDs. In my example the IDs of the arrows were #arrow_prev and #arrow_next respectively. You can give your pageable container any unique ID.
(function ($) {
$(document).ready(function(){
$( '#arrow_prev' ).click( function( e ) {
var pageable_container = $(this).closest(".vc_row").find(".vc_tta-panels-container");
move_pageable_container(pageable_container,'prev');
});
$( '#arrow_next' ).click( function( e ) {
var pageable_container = $(this).closest(".vc_row").find(".vc_tta-panels-container");
move_pageable_container(pageable_container,'next');
});
function move_pageable_container(pageable_container,direction){
// Make a list of the panel IDs
var panel_ids = $(pageable_container.find(".vc_tta-panel"))
.map(function() { return this.id; }) // convert to set of IDs
.get();
// Find position of the active panel in list
var current_active_pos = panel_ids.indexOf($(pageable_container).find(".vc_tta-panel.vc_active").attr('id'));
var new_pos = 0;
switch(direction) {
case 'prev':
if (current_active_pos > 0){
new_pos = current_active_pos-1;
}else{
new_pos = panel_ids.length-1;
}
break;
case 'next':
if (current_active_pos < panel_ids.length-1){
new_pos = current_active_pos+1;
}else{
new_pos = 0;
}
break;
}
// Clear active panels
$(pageable_container.find(".vc_tta-panel")).each(function(i,a) {
$(this).removeClass("vc_active");
});
var new_active_panel = $(pageable_container).find('#'+ panel_ids[new_pos]);
$(new_active_panel).addClass("vc_animating");
$(new_active_panel).addClass("vc_active");
setTimeout(
function(){
$(new_active_panel).removeClass("vc_animating");
}, 350);
}
}
);
})(jQuery);
If you want a pseudo fading-in effect then you can use this additional CSS in your style sheet:
#id_of_pageable_container .vc_tta-panel.vc_animating {
opacity: 0!important;
}
Where #id_of_pageable_container is the ID that you gave your pageable container
A simpler solution with vanilla js only:
The idea is to find the target page button and press it programmatically, so that there is no need to mimic the plugin's animations as in Chaz's solution.
Add js (via Raw JS widget / other means):
function prevSlide () {
const slides = document.getElementsByClassName('vc_pagination-item');
for (let i = 0; i < slides.length; i++) {
if (slides[i].className.includes('vc_active')) {
if (i - 1 < 0) return;
slides[i - 1].firstChild.click();
return;
}
}
}
function nextSlide () {
const slides = document.getElementsByClassName('vc_pagination-item');
for (let i = 0; i < slides.length; i++) {
if (slides[i].className.includes('vc_active')) {
if (i + 1 >= slides.length) return;
slides[i + 1].firstChild.click();
return;
}
}
}
Add button widgets and set href to call js:
For left arrow button,
javascript:prevSlide();
For right arrow button,
javascript:nextSlide();
Hope this helps.
I prefer to use the Post Grid widget for that. Keep in mind that the pageable container is not totally responsive, it doesn't react to swipe touching, but the Post Grid does.
Post Grid is really powerful, although it also has its caveouts. You can create your content with posts and pages, or a custom post type and then filter what you want to show in your slider from the widget options.
In "advanced mode" you can use the Grid Builder to create your own template and control the output.
The only problems that I've found with this method is to set a variable height in sliders and that sometimes it is slow loading content and is not possible to do a lazyload.
I have a grid with row. I want to give a strike on click of particular button. Here is my code.
{
xtype: 'button',
text: 'Exclude',
handler : function(){
debugger;
var cohartgrid = Ext.getCmp('abc');
var cohartstore = cohartgrid.getStore();
var record = Ext.getCmp('abc').getSelectionModel().getSelected();
var st = cohartstore.getRange();
if (record) {
Ext.fly(row).addCls('row-deleted');// This line is not working.
}
if(record.data.EXL == "No"){
record.set("EXL","YES")
}
}}
What css I have to put. Thanks for help.
I answered same kind of question in other post. Here you need to get the index of your row and then place strike css by using addClass. remember extjs 3 is not supporting addCls
var selection = grid.getSelectionModel();
for(var i=0;i<gridstore.data.length;i++){
if(selection.isSelected(i)){
var test = grid.getView().getRow(i);
var dsd=Ext.fly(test);
dsd.addClass('StrikeCSS'); // Placing css to that perticular row.
}
}
In answer grid is your grid. In selection you getting row index and placing Strike
.StrikeCSS {
text-decoration: line-through !important;
color : BLACK !important;
}
Use code to add class in selected row :
rowIndex = cohartgrid.getStore().indexOf(selectedRecord);
cohartgrid.getView().addRowCls(rowIndex, 'row-deleted');
I am trying to enable horizontal scrolling for my kendo grid. So far I've heard if you have added width to the columns definitions. But what do you do if data is dynamic?
I've tried a couple of things. This code can help you understand that.
var kgrid = $("#grid").kendoGrid({
height: 155,
pageable: true,
dataSource:ds,
dataBound:function(e){
var m = kgrid.data('kendoGrid');
console.log('dataBound: ', m.columns);
},
dataBinding:function(e){
var m = kgrid.data('kendoGrid');
var obj = ds.view()[0];
console.log('dataBinding columns before: ', m.columns);
//for(x in obj){
// if(x[0] == '_')
// continue;
// m.columns.push({field: x, width:'200px'});
//}
console.log('dataBinding columns after: ', m.columns);
}//,
//columns:[
// {field:'col1', width: '200px'},
//{field:'col2', width: '200px'},
//{field:'col3', width: '200px'},
//{field:'col4', width: '200px'}
//]
});
Also here is the link to my page: http://jsfiddle.net/deostroll/497zM/3/
I want to set some size to the column, and hence enable horizontal scrolling.
The only way I can see as of now you can do this is to completely destroy the grid and re-bind it every time new data arrives. And when it arrives we'd have to take the first item, read the properties and create the columns array. We'd have to set each object's width property here like mentioned below:
success: function (data) {
var cols = [];
var item = data[0];
$.each(item, function (key, val) {
cols.push({
field: key,
width: '325px'
});
});
theGrid.kendoGrid({
dataSource: {
data: data,
pageSize: 5
},
pageable: true,
columns: cols,
height: 225
});
} //end success
Fiddle: http://jsfiddle.net/deostroll/497zM/5/
I am trying to display some aggregate value (like total) in the last row of an ng-grid. The style and css class of the last row needs to be different than the other cells in that column. How to acheive this?
The cellTemplate in a column definition applies to all cells in that column, but in my case I need to have a different style for the last row in that column. Can anyone please suggest me a solution.
Thanks
Sudipta
I was able to add a class to the last row through a plugin:
function ngGridAddClassToLastRow(className) {
var self = this;
self.grid = null;
self.scope = null;
self.init = function (scope, grid, services) {
self.domUtilityService = services.DomUtilityService;
self.grid = grid;
self.scope = scope;
var addClass = function () {
var lastRow = self.scope.renderedRows[self.scope.renderedRows.length - 1];
lastRow.elm[0].className = lastRow.elm[0].className + ' ' + className;
};
self.scope.$watch(grid.config.data, addClass);
};
}
And with this added to the gridOptions:
...
plugins: [new ngGridAddClassToLastRow('<some class name>'),
...
And of course add some css, e.g. in my case:
.lastRow {
border-bottom: 0px;
}
That worked for me. I cannot say for certain that is the way to go since, needless to say, i'm a noob with Angular and ngGrid. I've constructed the plugin from flexible height plugin.
You can set a special property "isLast" (or however you like to name it) of the item that should be displayed in the last row. This item can be accessed through row.entity.isLast.
... somewhere in your controller ....
$scope.getRowClass = function(row) {
return row.entity.isLast === true ? 'lastRow' : '';
}
... somewhere inside the gridOptions ...
rowTemplate: '<div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="[col.colIndex(), getRowClass(row)]" class="ngCell {{col.cellClass}}">....</div>'
Based on the .lastRow class you could define a custom style for the last grid row.