ExtJS Accordion event on unrendered components - javascript

I have an accordion of 5 panels. Each panel contain a set of checkboxes. I want to attach the change event to the checkboxes. But as the panels are collapsed the checkboxes dont get rendered and as a result I cannot attache the events. Any idea how do I do this.
Note : I am using ExtJS designer to make the accordion and the checkboxes.
Stuff done so far.
I added a class to the checkboxes and tried to access them using the query
Ext.query('.winrej');
this however gives me list of checkboxes from the panel that is open.

If the checkboxes are not rendered yet you will not catch any user interaction events, so it doesn't make sense to subscribe to them. Try to subscribe to events after certain panel of accordion layout has been rendered. Or am I missing something? What exactly are you trying to achieve?

Related

Sorting called Muliple times Using igGrid on igDialog Ignite UI Control

I am Using Ignite UI Control I am facing a sorting issue
Let me explain the scenario
I am opening an igDialog and in that dialog box I am opening a Grid view using igGrid which looked like below
Fig(1)
For the first time it working fine now when I click on each column is grid sorting is executed once but when I clicked on the add button the I replace the the dialog contents with the add content now this dialog box will be look like that.
Fig(2)
When click on the cancel button Above it again load the content of listing view and show Fig (1).
The problem I faced is actually when I clicked on any column it called the sorting function twice and it hit my controller action twice.
No of times I go to add view and then back to list view it called sorting multiple times.
Now I don’t know what's happening here ?
Note : I am using $(gridId).igDialog("content", html); to loaded content dynamically
It would be better if you can include the code which handles the view changes inside the dialog. What you're describing sound like grid events are attached multiple times on the same elements. If you're not disposing the grid, or attaching custom events every time it's shown, then this would be the result.
I will update the answer to be more concrete once you include the code in the question.

jQuery - having icons at the end of drop down list items with independant actions

Ive looked around a bit and not found anything so im not even sure if this is possible.
What I want to do is have a drop down list. Each list item is a specific type of a view for a list. Is it possible to add an icon at the end that when clicked will fire off a different action to just selecting the item?
So the user opens the drop down. They see View 1. At the end there is a pencil button image. If they select View 1 the list view changes. If they select the pencil it opens up the edit View dialog for that view.
Is this even possible using javascript/jQuery?
It won't be do-able with the standard select element, however it's definitely possible using divs and heavy Javascript/jQuery.
Something similar to how the jQuery plugin Chosen works - it hides the original select element and rebuilds it with divs, adding interaction with jQuery (obviously).

Preventing an AjaxToolkit Accordion From Opening

I'm working on a project where I am using the AJAXToolkit Accordion. What I am trying to achieve is the following. I want to capture the event of when the header of the Accordion has been clicked prevent that relevant section of the Accordion from opening and instead postback to the server to populate a DataGrid within the body section of the Accordion, once the DataGrid is populated then expand the selection that was just prevent from opening. (I know how to fire a postback to the server). I have searched the internet with no avail.
Handle accordion open event on the client side (selectedIndexChanging) and use PageRequestManager ( js object handling postbacks ) to do postback and get updated grid.
Alternatively you can OnItemCommand(AjaxControlToolkit.AccordionCommandEventArgs) event and look for selectedIndex command ( not sure with the name though) and trigger databind on grid on the server side.

How to prevent showing ion-option-button in IonicFramework?

I use different list in one page with each list have some Option button,
you can take a look at my codepen : [http://codepen.io/harked/pen/WvMgXg][1]
If we swipe the first card, it will show the option button.
If we swipe the second card, it will also show the option button.
Is there any way to prevent Option-Button to show while the other in another card is showing?
I mean the problem is like this pict : http://www.nanonimos.com/IonOption.jpg
Anyone? It would be greatly appreciated.
It doesn't look like Ionic have a way to do this right now. What we need is a listener on the option buttons being display, at which point you can close all others, but that listener doesn't exist.
You could build custom functionality and listen for swipe events on each ion-list item, but this is likely to be a little buggy. Alternatively dig into the framework and try and emit a custom event on the same trigger than Ionic uses.
You probably have an ng-repeat when working with lists in Ionic. You can easily disable Option buttons using ng-show as in this codepen.
[http://codepen.io/anon/pen/vORyaz?editors=101']

How to make my list effects work when I'll change list into table?

I have list of files - and after clicking on one of them it shows the jquery form: here it is: http://jsfiddle.net/GSC3x/11/
But now I noticed, that I will need a table on this page, and I want to this list be one column in my whole table, here is the (ugly) example: http://jsfiddle.net/GSC3x/15/ .
I want the jquery form thing work the same way after changing into the table view. I mean, hide everything and make form appear.
How to do it?
Thanks!
To make the table disappear, you shouldn't hide the individual cells (as you do with $(".show_hide").hide();), but hide the whole table instead.
Also, you are reusing the button that is showing the form for hiding it, but with a completely different styling. That is weird, unnecessary and makes it difficult to use.
Use a separate button to close the form, and don't use the same event handler ($('.show_hide').click). The show and hide parts share no code anyway.
Structuring your code like this also makes it very easy to add smooth transitions like fading or, the sliding you already had implemented.

Categories