I am using redips drag class to be able to drag/drop table cells of my table.
I would like to add a condition to forbid the drop if the destination cell was empty. Which means I only need to "switch" if the target cell is not empty.
Any help ?
if (target_elements_length) {
// call myhandler_switched because clone_limit could call myhandler_clonedend1 or myhandler_clonedend2
REDIPS.drag.myhandler_switched();
// and myhandler_dropped
REDIPS.drag.myhandler_dropped(target_cell);
// if object is cloned, update climit1_X or climit2_X classname
if (cloned_flag === 1) {
clone_limit();
}
}
// otherwise element is dropped to the empty cells
else {
//TODO cancel the event.
}
Nevermind ...
this is the solution.
Modify drag.js accordingly:
if (target_elements_length) {
obj.parentNode.removeChild(obj);
target_cell.appendChild(obj);
// call myhandler_switched because clone_limit could call myhandler_clonedend1 or myhandler_clonedend2
REDIPS.drag.myhandler_switched();
// and myhandler_dropped
REDIPS.drag.myhandler_dropped(target_cell);
// if object is cloned, update climit1_X or climit2_X classname
if (cloned_flag === 1) {
clone_limit();
}
}
Related
I'm working on ejs-grid and I want to toggle(Expand/Collapse) a child grid when I click on a row in the grid.
I was able to get the row click functionality working using (rowSelected) attribute but I don't really know how to get the current state of a child grid(collapsed or expanded).
My Current Code
toggleChildGrid(event){
const rowIndex = event.rowIndex;
const isCollapsed = true;
if(isCollapsed){
this.grid.detailRowModule.expand(rowIndex);
}
else{
this.grid.detailRowModule.collapse(rowIndex)
}
}
I just made the isCollapsed variable true but I will like that to be derived dynamically based on the state of the child grid.
You could use a set containing row indices that are expanded, and add/remove from that list to represent if the row is expanded/collapsed
private expandedRowIndices = new Set<number>();
toggleChildGrid(event: {rowIndex: number}): void {
const rowIndex = { event };
const isExpanded = this.expandedRowIndices.has(rowIndex);
// If it is currently expanded, now collapse
if (isExpanded) {
this.grid.detailRowModule.collapse(rowIndex);
this.this.expandedRowIndices.remove(rowIndex);
} else {
this.grid.detailRowModule.expand(rowIndex);
this.this.expandedRowIndices.add(rowIndex);
}
}
Based on your shared information we suspect that you want to expand/collapse the child grid based on the current state while clicking on the row of grid. To achieve your requirement we suggest you to use our default recordClick event.
Using this event we find the current state of child grid and based on that we have collapsed and expanded using expand and collapse method.
Please refer to the below code and sample link.
recordClick(args){
const isCollapsed = (args.target.closest('tr').nextElementSibling.classList.contains('e- detailrow') && (args.target.closest('tr').nextElementSibling.style.display != 'none')) == true ? true : false;
if (!isCollapsed) {
this.grid.detailRowModule.expand(args.rowIndex);
}
else {
this.grid.detailRowModule.collapse(args.rowIndex);
}
}
Sample link: https://stackblitz.com/edit/angular-pm1ziu-9kpxum?file=app.component.ts
API Link: https://ej2.syncfusion.com/documentation/api/grid#recordclick
When selecting a row in my SAPUI5 tree table I have to make sure that
all existing selections are removed
check if selected row has children and if so, select the item and all its children
To do that I use a function that gets called on the rowSelectionChange-Event of my table:
onRowSelectionChange: function(oEvent) {
if (oEvent.getParameters().userInteraction)
var oTable = oEvent.getSource();
var oObject = oEvent.getParameters().rowContext.getObject();
var iIndex = oEvent.getParameters().rowIndex;
// Check if row was selected or deselected
if (oTable.isIndexSelected(iIndex)) {
// Deselect other items
oTable.clearSelection();
// Select row again
oTable.addSelectionInterval(iIndex, iIndex);
// Check if object has children
if (oObject.content) {
//Select child rows here
} else {
// Do stuff
}
} else {
// Do stuff
}
}
}
As you can see the first thing I do is to check if the selection change's origin was an explicit user interaction, because, of course, clearing the selection and then adding the selection for the child rows will call the function again.
My problem is now, that when clearSelection() calls my function, the userInteraction-parameter is again set to true, despite not being an explicit user interaction. Am I missing something here?
Thank you!
I want to use qTip and Handsontable at the same time.
So I made a grid with Handsontable and when the user submits it, ajax sends the cells that are not correct. Then, with a callback function, I want to color the cells in the wrong format and display a bubble with qTip2.
My problem is when I want to create a bubble on a specific cell, it doesn't work.
Here is my code :
function insertTraitementCallback(responseObject,ioArgs)
{
var jsonobject = eval(responseObject);
$("td").eq(jsonobject[item]+11).qtip({ //It doesn't work
content : '<div id="bulle">test</div>'
});
for(var item in jsonobject)
{
if((item % 2 ) == 0)
{
$("td").eq(jsonobject[item]+11).css("background-color","red"); //It works
}else
{
}
}
}
Please help !
I have assigned data attributes to every grid class, each value is a different number ranging from 1-64.
I want it so that it adds a class 'success' to the grid class with a data-value="1", i can only get it without the specific value. so it finds all data attributes called data value and adds the success class but I cant figure out how to only add it to classes with the data attribute of 1.
function clickSquare() {
$('.grid').click(function(){
if ( $('.grid').data('value'))
{
$(this).addClass("success");
}
else
{
$(this).addClass("error");
}
});
}
<div data-value="1" class="grid pointer">1</div>
also, if i set up an array
var values = ['1', '2']
how could i do it so that the jquery only attaches the class to values with that of the array. hope that made sense!
You need to use this inside the event handler to refer to the clicked grid element. If you use the selector .grid inside the handler it will return the data value of the first grid element in the page instead of current element
$('.grid').click(function () {
if ($(this).data('value') == 1) {
$(this).addClass("success");
} else {
$(this).addClass("error");
}
});
Demo: Fiddle
hi i have atable with some data and i have expand and Collapse button there if we click on + it will expand and show table and if we click on-it will collapse and i am using following code but i am getting error with
document.getElementById('eleName');
imageXchk='expand';
loadedCheck='false';
function toggleDisplayCheck(e, tableSize){
element = document.getElementById(e).style;
if (element.display=='none') {
element.display='block';
}
else {
element.display='none';
}
if (loadedCheck=='false') {
myUpdater('returnsDetailsTable', '/oasis/faces/merchant/dashboard/ReturnsDetailsCheck.jsp', { method: 'get' });
loadedCheck='true'
}
size = tableSize-1;
eleName = 'mercPerfDashboardForm:returnsDetailsTable:' + size +':switchimageRetChk'
if (imageXchk=='collapse') {
document.getElementById('eleName').src='${pageContext.request.contextPath}/images/expand.gif';imageXchk='expand';
}
else {
document.getElementById('eleName').src='${pageContext.request.contextPath}/images/collapse.gif';imageXchk='collapse';
}
return false;
}
If the element's style's display property hasn't been explicitly set previously in JavaScript, it will be empty, even if the element is hidden via some CSS rule. The easiest thing to do would be to know what the initial state (hidden or visible) is and assume that state if the display property is empty:
if (element.display=='none' || element.display=='') {
element.display='block';
}
else {
element.display='none';
}
you can use jQuery to do this very very simple:
$("#table_id").hide(); // hide the table
$("#table_id").show(); // show the table