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

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

Related

Kendo Grid Filter customaization

I have to customize the kendo grid filter event. On applying filter instead of filtering the records based on the available records on the grid i need to requery along with filters.
i.e:
Onfilter
{
prevent filtering on existing data()
requery from db and apply filter on that data()
}
so i have coded like below.(in document ready)
(document).ready(function (){
grid.bind("filter", function (e) {
if ((e.filter == null) ) {
mymanualretrieve();
}
if (e.filter!=null) {
tempFilter = e.filter.filters;
}
//i don't want the default filtering. to prevent that i am clearing it out
e.filter = grid.dataSource.filter({});}
I have one dropdown where i should call retrieve again with the filters applied.so i am trying like below in change event of drop down.
if (tempFilter != null && tempFilter != undefined) {
grid.dataSource.filter({ tempFilter });
mymanualretrieve();
tempFilter = grid.dataSource.filter().filters;
//I need to prevent default filtering here as well, but on applying the below code, my manual retrieve is not queried based on filters
grid.dataSource.filter({});
After this changes dcument.ready also doesn't get hit on filtering
custom filter options for every column: asp.net MVC
columns.Bound(c => c.columnName).Format("{0}%").Filterable(
ftb=>ftb.Cell(cell=>cell.ShowOperators(true))
.Extra(false)
.Operators(op=>op.ForNumber(fn=>fn.Clear()
.IsEqualTo(CommonResource.GridFilter_IsEqualTo)
)))
.Title("Column Name");

<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
}
}

Link two elements, store them, and send them to remove function - Pure Javascript

I have a little Pure Javascript prototype demonstrating shopping cart functionality.
I have a Button which adds the item to the cart (and toggles to an ON state) and then a Card which represents the item in the shopping cart.
So far I have worked;
Attach data to Add to Cart Button ✓
Send data from Button to Shopping Cart and create new Item Card ✓
However, I cannot work out how to link Button and newly created Item Card so I can:
Remove Item Card and toggle button OFF or
Toggle button OFF and remove the correct Item Card
https://codepen.io/rhysyg03/pen/PdyyWE
Your help would be much appreciated.
FYI - this is just for a demo so it doesn't need to be production ready code.
Thank you.
const shoppingCartEl = document.querySelector('#js-shopping-cart');
const addToCartButton = document.querySelector('#js-add-to-cart');
var buttonToggle = false;
var itemOneData = {
name:'Shoes',
price:"$105.00"
}
function addItem(button, itemData) {
console.log("ADD");
// var itemEl = createElement('<div class="item-card"></div>');
const itemEl = document.createElement("div");
itemEl.classList.add("item-card");
itemEl.innerHTML = itemData.name + itemData.price + "<button id='js-item-cart-remove'>Remove</button>";
shoppingCartEl.appendChild(itemEl);
const itemCardRemove = document.querySelector('#js-item-cart-remove');
itemCardRemove.addEventListener('click', () => {
removeItem();
})
}
function removeItem() {
console.log("REMOVE");
// how to do this part
}
addToCartButton.addEventListener('click', () => {
if (buttonToggle == false) {
addItem(addToCartButton, itemOneData);
buttonToggle = true;
addToCartButton.innerHTML = "Remove from Cart";
} else {
// How to do this part
removeItem();
buttonToggle = false;
addToCartButton.innerHTML = "Add to Cart";
}
})
(I am sorry I am tired a bit, you should read the very ending, firstly)
You should have items like this:
var itemOneData = {
id: 1,
name:'Shoes',
price:"$105.00"
}
var itemTwoData = {
id: 2,
name:'Shoes',
price:"$105.00"
}
Then you should store identifier on the item card element:
...
itemEl.classList.add("item-card");
itemEl.setAttribute("data-item-id", itemData.id)
...
After this, when clicking on remove button, you should:
Get the id of item to be removed itemEl.getAttribute("data-item-id")
Pass the id to remove function removeItem(id)
(this was where I've given up) Find the item with the attribute "data-item-id" having value of the id and replace it to empty string ""
There is another solution, probably far less complex: when clicking on remove button simply find it's parent and replace it with empty string.
This is a quick solution, just to get what you are looking for, but of course, maybe you should be having some 'state' where you have your cart items, and render the UI based on that state. In this quick solution, what I am doing is event delegation, as we know that the one element that will exist at the beginning is the cart div. So we place the event on this element and then check which element are we clicking, and also doing some check so we assure only that an item-card can be deleted. codepen.io/anon/pen/WgaYxe?editors=1011
Hope this helps and if you need more details please feel free to ask!
Bye

Filtering Tooltip in Kendo

I have a tooltip in Kendo UI which I'm trying to filter cells based on their column name, because the standard td:nthchild won't work (users can move columns around). I want to engage the tooltip based on if someone hovers over MY COLUMN NAME'S CELLS. How do I accomplish that in the filter field? Or should I do it in the show function?
this.$el.kendoTooltip({
filter: "th:contains('MY COLUMN NAME')",
show: function (e) {
if (this.content.text().length > 0) {
this.content.parent().css("visibility", "visible");
}
},
hide: function(e) {
this.content.parent().css("visibility", "hidden");
},
content: function (e) {
var target = e.target;
return $(target).siblings().first().text();
}
});
Like this ?
this.$el.kendoTooltip({
filter: "thead th:contains('ColumnA')"
});
Demo
UPDATE
As you want to show the tooltip on the row cell based on the column's title, you can't use filter parameter for that, it is meant to be used to filter only the target element, which is not your case. You will need some programming there, e.g:
show: function(e) {
let index = this.target().index(), // Get hovered element's column index
columns = grid.getOptions().columns, // Get grid's columns
column = columns[index]; // Get current column
// If target TD is not under 'ColumnA', prevent tooltip from being showed
if (column.title != "ColumnA") {
this.hide();
}
}
Demo
Thanks to kendo, you can't prevent their own events, so using hide() works but the tooltips still opens blinking before it is hidden again, it's possible to catch it opening. Tried using e.preventDefault() and return false that would a reasonable way to say "cancel the widget showing" but with no luck. This was the best I could do.

SAPUI5 TreeTable: User Interaction set to "true" when event fired by code

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!

Categories

Resources