I see in this question:
Create tree in angular-grid (ag-grid) with async data loading
that Niall recommends writing a cellRenderer but I'm not sure how that would work. I am guessing there would be a button in the cellRenderer that would trigger the call to get more data, but how would I rebind?
adding rowData directly inside the component watched the updated rowData.
<ag-grid-angular style="width: 100%; height: 400px;" class="ag-theme-balham"
[gridOptions]="gridOptions"
[showToolPanel]="showToolPanel"
[rowData]="rowData">
</ag-grid-angular>
Here's official plunker
Docs
Related
I have a list generated in a v-for loop. Wrapped around it is a transition-group like so:
<transition-group name="list">
<tr v-for="item in items" :key="item.key" class="list-item">
<td name="foo">{{item.foo}}</td>
<td name="bar">{{item.bar}}</td>
</tr>
</transition-group>
I have set a transition ( in css) on element deletion and creation:
.list-enter-active, .list-leave-active {
transition: all 0.5s;
}
.list-enter {
background-color: green;
}
.list-leave-to {
background-color: red;
}
(Flash red before removing from the list. Flash green after inserting into the list)
The problem is that, if another tab on the browser is selected, and update on a list is made, the transition waits for the tab where Vue is to be selected. And only then transition gets executed.
I would want for transition animation to execute real time and, if the browser tab at the time of the update of the list is not selected, then execute run (or ignore) the animation anyway.
Is there a way to do that?
UPDATE:
Created issue on Vue GitHub repo - https://github.com/vuejs/vue/issues/9890
Got an answer to the issue created in the GitHub repo - link to answer. Will post it here in case if someone stumbles upon the same problem:
Unfortunately, this is due to how browsers trigger the transitioned events when tabs are inactive.
If this is problematic for the kind of animation you are doing, you should switch instead to something that uses JS instead of CSS animations. That way, you can end the animation calling the done callback with js hooks: https://v2.vuejs.org/v2/guide/transitions.html#JavaScript-Hooks
So I have a page with multiple dropdowns (with the same choices) when automating a webpage using Capybara and Chromedriver.
They are all react-select's (Which I have a helper file for). Sadly they ALL have the same label text (but not label ID....however I don't think page.select works for label ID).
I thought about doing a page.all on the react-selects? and then just going through the array? Is that possible?
the react-select looks pretty standard, I realize the span has an id but selecting by that doesn't work for react-selects from what i've been able to tell.:
<div class="Select-control">
<span class="Select-multi-value-wrapper" id="react-select-6--value">
<div class="Select-placeholder">Select...</div>
<div class="Select-input" style="display: inline-block;">
<input role="combobox" aria-expanded="false" aria-owns="" aria-haspopup="false" aria-activedescendant="react-select-6--value" value="" style="width: 5px; box-sizing: content-box;">
<div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre;"></div>
</div>
</span>
<span class="Select-arrow-zone"><span class="Select-arrow"></span></span>
</div>
Could I maybe just pull it in via page.all? The react helper I have does this:
module CapybaraReactHelper
def capybara_react_select(selector, label)
within selector do
find('.Select-control').click
expect(page).to have_css('.Select-menu-outer') # options should now be available
expect(page).to have_css('.Select-option', text: label)
find('.Select-option', text: label).click
end
end
end
Any ideas?
Thanks!
Selecting by the id on .Select-multi-value-wrapper isn't working because that span isn't the react-select component's top-level tag. Working with react-select and Capybara generally is difficult because the Capybara form helpers won't work with react-select's custom markup and behavior.
As you've mentioned, you can get around this by using a version of your existing helper with a scoping within block and page.all(). For example:
# helper
def react_select_capybara(selector, option)
within selector do
find('.Select-arrow-zone').click
expect(page).to have_css('.Select-menu-outer')
find('.Select-option', text: option).click
expect(page).to have_css('.Select-value-label', text: option)
end
end
# usage
given(:select_values) { ['Grace Hopper', 'Ada Lovelace'] }
...
react_selects = page.all('.Select')
select_values.each do |select_value, i|
react_select_capybara(react_selects[i], select_value)
end
While this will work, it is brittle - it relies on the implicit ordering of your react-selects on the page. A more robust setup would pass each react-select component a custom classname to uniquely identify it in your test. From the react-select docs on custom classnames:
You can provide a custom className prop to the component, which will be added to the base .Select className for the outer container.
Implementing this might look like:
# JSX
<ReactSelect className="js-select-user-form-1" ... />
<ReactSelect className="js-select-user-form-2" ... />
# Spec
react_select_capybara(".js-select-user-form-1", 'Grace Hopper')
react_select_capybara(".js-select-user-form-2", 'Ada Lovelace')
page.select doesn't work for this because it only works for HTML <select> elements. This is a JS driven widget, not an HTML <select> element.
If you are just automating a page (not testing an app) it'll probably be easier just to use JS (via execute_script) to set the value of the hidden <input>s.
If you are testing an app, then you can use page.all to gather all the react-selects and step through, as long as selecting from any react-select doesn't replace any of the others on the page (which would leave you with obsolete elements).
If that doesn't provide enough info to solve your problem, and your real issue is trying to pick a specific react-select to select from, then please add enough HTML to your question so we can see what actual differences exist between the widgets you're trying to choose from (2 different react-select elements for instance)
Ok, this will probably be simple to resolve, but I am a graphic designer & not a developer so wondering if someone can help me out. I have played around with positions but not such luck.
So I have a header div with a backgroud image within it, but when I preview the html/css on ebay the background image within this div appears at the top of the browser (conflicting with the ebay standard header) & not being positioned relative to the container div it is placed in. So basically the bg image is outside the div. I need it to be contained with the div I want it in.
Any help would be appreciated. (This may be a repetitive topic, so sorry about that)
Code:
<div id="HeaderContainer">
<div id="BGHeader"></div>
</div>
#HeaderContainer{
position:relative;
}
#BGHeader {
position:absolute;
top:0;
height:420px;
width:100%;
background-image:url(imagehere.jpg);
background-repeat:repeat-x;
}
You should post your html and css. At least the relevant parts. But having not seen them I would say my best guess is you're using absolute positioning on the header.
You need to wrap that in another element that's relative positioned.
<div id="container">
<header>header here</header>
</div>
where your css is like so:
#container{
position:relative;
}
header{
position:absolute;
top:0;
left:0;
}
If I'm wrong about your needs or situation let me know and I can update.
How are widgets rendered in Dojo? What is the flow or sequence with which various JSs are called. I am trying to understand how the internal code is contructed for widget.
For example: If TabContainer is used , we can see the following code:
<div dojoattachpoint="containerNode"
class="dijitTabPaneWrapper
dijitTabContainerTop-container dijitAlignClient"
aria-labelledby="tabContainer_tablist_dijit_layout_ContentPane_0"
style="left: 0px; top: 28px; position: absolute; width: 748px; height: 335px;">
So how is Dojo constructing all these?
Many widgets use html templates. On top of the templates, various functions are triggered during the widget life cycle. There, you can manipulate the dom programmatically.
For information on how this is done, read the following links :
http://dojotoolkit.org/documentation/tutorials/1.6/templated/
http://www.sitepen.com/blog/2008/06/24/creating-dojo-widgets-with-inline-templates/
https://dojotoolkit.org/documentation/tutorials/1.6/understanding_widget/
I have a templated custom widget that inherits from dijit.layout._LayoutWidget, dijit._Container, and dijit._Templated which gives my widget native Widget support for resizing, etc. All I need is a TabContainer, which is sized to the size of widget. Here is my widget.
<div dojoAttachPoint="containerNode">
<div dojoType="dijit.layout.TabContainer" tabPosition="top" style="width:100%;height:100%" >
<div dojoType="dijit.layout.ContentPane" title="tab" selected="true">
hello
</div>
</div>
</div>
Everything looks fine but I get a weird TabList.
I looked into the problem. All the pieces of the widget and TabContainer have the correct width and height values. Only The tablist has a loooong width (50'000 something pixels wide): I have read about similar issues such as this one: http://bugs.dojotoolkit.org/ticket/10495, but in my case all the elements have correct width and length. I have no idea how does tablist get this long width.
I have also tried many ways of adding and removing style="width:100%;height:100;" for the parent container and its parents. But none of the configurations fixed the problem.
Is there a way to fix this problem?
Just in case someone is looking for the solution, I had the same problem, and came to this question. Though I looked at the bug reports, it didn't apply in my case, I was not embedding tabcontainer inside table or setting doLayout to false. I tried setting tabcontroller but that didn't work either. Finally after debuggin, turns out you have to provide 'resize' method in your widget and resize tabcontainer inside it in the following way
widgetTemplate = '... ' + //Our tabcontainer declaration
'<div dojoAttachPoint="containerNode">' +
'<div dojoAttachPoint="widgetTab" dojoType="dijit.layout.TabContainer"' + 'style="width:100%;height:100%" >' +
'<div dojoType="dijit.layout.ContentPane" title="tab" selected="true">hello</div></div></div>' +
'...' //Rest Of template declaration
//Since we are embedding widget inside template we need _WidgetsInTemplateMixin
dojo.declare("MyWidget", [dijit._Widget, dijit._TemplatedMixin,dijit._WidgetsInTemplateMixin], {
templateString: widgetTemplate,
.... //Rest of functions
resize: function(){
this.containerNode.widgetTab.resize() //Resize tabcontainer
}
});
Hope this helps
Try to add attribute to your TabContainer:
<div dojoType="dijit.layout.TabContainer" controllerWidget="dijit.layout.TabController" ... >
http://bugs.dojotoolkit.org/ticket/10113#comment:11
Just rewrite your css like this:
div[class="dijitTabListWrapper dijitTabContainerTopNone dijitAlignClient"]{
height: 30px !important;
}
#-moz-document url-prefix() {
div[class="dijitTabListWrapper dijitTabContainerTopNone dijitAlignClient"]{
height: 31px !important;
}
}
If you want to remove the first one : "useMenu : false"
If you want to remove the second and the third : "useSlider : false"