Develop Reference

Angular SyncFusion's EJS-GRID Child Grid (Hierarchical Binding)

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

How to remove and add css styles using javascript - added style not reflected in UI

I have created a stackblitz for my code.
https://stackblitz.com/edit/ngxdatatable-sort-test-qfeux3?file=src/app/app.component.ts
Basically i am trying to add a custom icon if sorting is not performed on the columns.
If any sorting is performed, I am retaining the existing icon.
While trying to add the custom icon, I am removing the existing classnames and adding the new icon.
When i debug, i can see the new custom icon getting added, but after execution , the added custom icon is getting removed.

I checked your code and after the following changes, I am able to see the icon change. Try to check if this is the problem.
onSort(event){
const name: string = event.column.name;
name = name.toLowerCase();
console.log(event);
if(name=="company") {
event.sorts.push({"id":0});
}
if(name =="name") {
event.sorts.push({"id":1});
}
if(name=="age") {
event.sorts.push({"id":3});
}
for (let i = 0; i < this.columns.length; i++) {
console.log("id value",event.sorts[1].id);
console.log("i value",i);
if(event.sorts[1].id == i){
console.log("inside id value",event.sorts[1].id);
console.log("inside i value",i);
console.log("do nothing");
} else {
console.log('change icon');
// here i am removing the existing icon and adding the custom icon
document.getElementsByClassName("sort-btn")[i].classList.remove(
"datatable-icon-down");
document.getElementsByClassName("sort-btn")[i].classList.remove("sort-desc");
document.getElementsByClassName("sort-btn")[i].classList.remove(
"datatable-icon-up");
document.getElementsByClassName("sort-btn")[i].classList.remove("sort-asc");
// running in debug mode, during execution i can see custom icon getting added, but after execution i am not able to see the added icon,
if (i == 2) {
document.getElementsByClassName("sort-btn")[i].classList.remove("datatable-iconCustom");
} else {
setTimeout(()=>{
document.getElementsByClassName("sort-btn")[i].classList.add("datatable-iconCustom");
},10);
}
}
}
}

<select>'s not updating with Semantic UI

We have a popup containing a form with quite a few <select> tags. In some cases a <select> will appear on the page when it loads with no <option> tags inside, and it will be filled in later. Some already have <option>s defined. In every case, <option>s could be added or removed from the <select>s. We are using Semantic UI and defining the <select>s like this:
<select id="select1" class="ui dropdown"></select>
It is not updating the dropdowns it creates (the "menu") when the underlying <select> changes. Is there something we need to call when <option>s are added or removed?
UPDATE:
I tried this:
$('#select1').dropdown('refresh')
and the semantic UI menu did not update.
UPDATE 2
In some cases, the <options>s are "added" or "removed" by just changing their display to none instead of actually removing them from the <select>. In other cases they are actually added or removed. Can Semantic UI handle both of these cases?

I decided to move ahead and created a proof-of-concept to see if there was a way to handle this. I created a mutationobserver to look for changes in the attributes of every in the popup and have the semantic ui "menu" match the display property of the associated . It appears to be working.
function create_select_mo()
{
//create observer
var observer = new MutationObserver(function(mutations){
//console.log(mutations)
//get changed element in select
var target_el = mutations[0].target
if(!gel(target_el.parentNode))
{
return false
}
//find the changed <select>
var sel = target_el.parentNode
//make sure the parent is a <select>
if(sel.nodeName != 'SELECT')
{
return false
}
//get <select> wrapper created by semantic ui
var wrapper = sel.parentNode
//find the associated semantic menu
var cur_menu = $(wrapper).children('.menu')
if(gel(cur_menu))
{
//get corresponding element to target element in semantic menu
var menu_el = $(cur_menu).children('div[data-value=' + target_el.value + ']')[0]
//change the menu element to match the style of the <select> element
if(menu_el)
{
menu_el.style['display'] = target_el.style['display']
}
}
})
//initialize config to look for changes to attributes
var observer_config = {
attributes: true,
}
//set observer on each <option>
var target_nodes = gel('my_popup').querySelectorAll('option') //document.body
for(var x=0;x<target_nodes.length;x++)
{
observer.observe(target_nodes[x], observer_config)
}
}
function gel(el)
{
if(document.getElementById(el))
{
return document.getElementById(el)
}
else if($(el).get(0))
{
return $(el).get(0)
}
else if((typeof el == 'object') && (Object.keys(el).length > 0))
{
return el
}
else
{
//console.log(el + ' not found')
return false
}
}

How to confirm if all elements are hidden

I build a UI interface that show messages and after confirming them they become :"display=none", now i want to check if all the elements are been confirm meaning all hidden. so that my interface wont start.
This is the code:
this is visible:
<li id="announcement4" class="announcement"></li>
this is not visible:
<li id="announcement4" class="announcement" style="display: none"></li>
can i check via the class or type? like
if(all elements type li are hidden)
if(all elements class announcement are hidden)
what is a good way of doing this?
Thanks

Simply use is(':visible')
var allLiHidden = !$('li').is(':visible');
var allClassHidden = !$('.announcement').is(':visible')
FIDDLE

you can do like this:
if($('ul#SomeId').children(':visible').length == 0) {
// all are hidden
}
or:
if($('li.announcement:visible').length == 0) {
// all are hidden
}
Fiddle Example

if($('.announcement:visible').length>0)
{
//something is visible
}

For such a query, you can use the jQuery :visible selector, which gives you only visible elements (everything that Consumes space in the layout) As return.
If you then compare the amount of visible elements with the invisible, you'll see whether one is not visible.
if( $('.announcement').length === $('.announcement:visible').length ){
//all visible
} else{
//not all visible
}
Or
if( $('li').length === $('li:visible').length ){
//all visible
} else{
//not all visible
}

Checking if Element hasClass then prepend and Element

What I am trying to achieve here is when a user clicks an element it becomes hidden, once this happens I want to prepend inside the containing element another Element to make all these items visible again.
var checkIfleft = $('#left .module'),checkIfright = $('#right .module');
if(checkIfleft.hasClass('hidden')) {
$('#left').prepend('<span class="resetLeft">Reset Left</span>');
} else if(checkIfright.hasClass('hidden')) {
right.prepend('<span class="resetRight">Reset Right</span>');
}
I tried multiple ways, and honestly I believe .length ==1 would be my best bet, because I only want one element to be prepended. I believe the above JS I have will prepend a new element each time a new item is hidden if it worked.
Other Try:
var checkIfleft = $('#left .module').hasClass('hidden'),
checkIfright = $('#right .module').hasClass('hidden');
if(checkIfleft.length== 1) {
$('#left').prepend('<span class="resetLeft">Reset Left</span>');
} else if(checkIfright.length== 1) {
right.prepend('<span class="resetRight">Reset Right</span>');
}
else if(checkIfleft.length==0){
$('.resetLeft').remove()
} else if (checkIfright.length==0){
$('.resetRight').remove()
}
Basically if one element inside the container is hidden I want a reset button to appear, if not remove that reset button...

hasClass() only works on the first item in the collection so it isn't doing what you want. It won't tell you if any item has that class.
You can do something like this instead where you count how many hidden items there are and if there are 1 or more and there isn't already a reset button, then you add the reset button. If there are no hidden items and there is a reset button, you remove it:
function checkResetButtons() {
var resetLeft = $('#left .resetLeft').length === 0;
var resetRight = $('#left .resetRight').length === 0;
var leftHidden = $('#left .module .hidden').length !== 0;
var rightHidden = $('#right .module .hidden').length !== 0;
if (leftHidden && !resetLeft) {
// make sure a button is added if needed and not already present
$('#left').prepend('<span class="resetLeft">Reset Left</span>');
} else if (!leftHidden) {
// make sure button is removed if no hidden items
// if no button exists, this just does nothing
$('#left .resetLeft').remove();
}
if (rightHidden && !resetRight) {
$('#right').prepend('<span class="resetRight">Reset Right</span>');
} else if (!rightHidden) {
$('#right .resetRight').remove();
}
}
// event handlers for the reset buttons
// uses delegated event handling so it will work even though the reset buttons
// are deleted and recreated
$("#left").on("click", ".resetLeft", function() {
$("#left .hidden").removeClass("hidden");
$("#left .resetLeft").remove();
});
$("#right").on("click", ".resetRight", function() {
$("#right .hidden").removeClass("hidden");
$("#right .resetRight").remove();
});
FYI, if we could change the HTML to use more common classes, the separate code for left and right could be combined into one piece of common code.

Add the reset button when hiding the .module, if it's not already there :
$('#left .module').on('click', function() {
$(this).addClass('hidden');
var parent = $(this).closest('#left');
if ( ! parent.find('.resetLeft') ) {
var res = $('<span />', {'class': 'resetLeft', text : 'Reset Left'});
parent.append(res);
res.one('click', function() {
$(this).closest('#left').find('.module').show();
$(this).remove();
});
}
});
repeat for right side !

I've recently experimented with using CSS to do some of this stuff and I feel that it works quite well if you're not trying to animate it. Here is a jsfiddle where I can hide a module and show the reset button in one go by adding/removing a 'hideLeft' or 'hideRight' class to the common parent of the two modules.
It works by hiding both reset button divs at first. Then it uses .hideLeft #left { display:none;} and .hideLeft #right .resetLeft { display: block; } to hide the left module and display the reset button when .hideLeft has been added to whichever element both elements descend from. I was inspired by modernizr a while back and thought it was a neat alternative way to do things. Let me know what you think, if you find it helpful, and if you have any questions :)