Just curious, for a route like /chart/:charttype
I want to load different type of chart components into that chart area, how to plan this in VueRouter(currently I only put /chart/:charttype there) and component( currently I put a container component there, inside which, there is a long list of v-if different type of chart components )? Any best practice?
/*
Say I have a long list of diff type of charts,
when charttype matches, it will load that component,
otherwise load 404 component there.
*/
_______________________
| _____________ |
| | | |
| | chart | |
| |___________| |
|_____________________|
I believe current long list of v-if way will be very hard for maintenance, also, in the future, that chart area will be a a group of charts which build a combo chart component(such as 4 charts as a combo chart component), so I guess there has to be a configurable way to do this.
Thanks,
You can check Dynamic Components in the docs
<component :is="componentName"></component>
Related
I am relatively new to React Native and styling with flex and have been looking for a way to break a long word at a specific point. I only want an optional break in case the word gets too long.
In case 1 (see example) I don't want to break the word, since the component is big enough.
In case 2 the component is too small so the word breaks. I would like to be able to control the breaking position to get something as in case 3.
I am looking for something similar to this solution for HTML, but I cannot use <wbr> or and could not find an equivalent for React Native, if something like that exists.
I have tried using \u00AD as suggested here, but it doesn't seem to insert a break.
Example:
// case1
––––––––––––––––––––––––––––––––––––––––––––––
|ReallyLongWordThatBreaksSomewhere |
| |
––––––––––––––––––––––––––––––––––––––––––––––
// case2
–––––––––––––––––––––––
|ReallyLongWordThatBre|
|aksSomewhere |
| |
–––––––––––––––––––––––
// case3
–––––––––––––––––––––––
|ReallyLongWord |
|ThatBreaks |
|Somewhere |
–––––––––––––––––––––––
Hi This is my first question to stackoverflow. In my project we have requirement to generate the PDF based on DOM. There were multiple requirement and we used Kendo for this. PDF was generated from Bootstrap pages and many UI issue was there as bootsrap3 is not officially support the print version. There were overlapping and table width issue, content was going off the screen due to Boostrap offset classes all of them are sorted now. One more task client ask that can we apply scroll to pdf were we have grid and lots of column. On browser everyone know we can manage it by applying horizontal scroll and user can see the rest of the data by scrolling it.
As per my experience I don't see this kind of example but still asking is there any possibility to implement the scroll for generated PDF where we have grid with lots of column?
PDF content layout is static and there are no scrollbars for items, such as tables within. So, no possibility.
When a grid is too wide you have to decide how to split up the layout of the grid for 'printout' pages. For example, suppose your grid needs six pages to fit in a pdf
The pages in the pdf could be from this row-wise layout
A wide grid
+---+---+---+
| 1 | 2 | 3 |
+---+---+---+
| 4 | 5 | 6 |
+---+---+---+
or this column-wise layout
A wide grid
+---+---+---+
| 1 | 3 | 5 |
+---+---+---+
| 2 | 4 | 6 |
+---+---+---+
Which ever you choose, the content in a pdf reader will look like
A wide grid (direction-wise)
+---+
| 1 |
+---+
... pages 2 to 5 ...
+---+
| 6 |
+---+
If the content is widely variant it might be easier to sell the client on receiving Excel content instead of PDF, versus trying to code your own grid to pdf layout engine.
If the web page is only the grid, you could also consider using the spreadsheet component, which has a pdf download feature which renders column-wise.
I have dijit/layout/ContentPane. And I want to place a Table in it. To be exact, I need a table-aligned content with borders.
The table looks like this:
-------------------------------
Header 1 | Value 1 | CheckBox 1
Header 2 | Value 2 | CheckBox 2
Header 3 | Value 3 | CheckBox 3
-------------------------------
Is it possible to create it declaratively (I think, I've checked all possible containers for that) or I should take a Grid and make a storage etc. etc.?
Important point: I need not a data-table. I need a layout container, that will act like regular HTML table and I'll be able to put it inside dojo ContentPane and apply styles.
Try to use dgrid.
You may follow this link http://dgrid.io/
I have been using it until now. It is quite simple to use, and also, it allows you to easily set the scroll-bar, add events on dgrid-select, and many more. Have you learned about dojo store? Please follow this if you haven't: http://dgrid.io/js/dgrid/demos/laboratory/ (you may ignore it if you already have learned about dojo store)...
I am having great difficultly testing cascading dropdown boxes with Selenium. I would like to know what the standard approach is for this. I'm a bit unclear as to which commands to use i.e. ClickAndWait, WaitForTextPresent etc. It seems a little bit of a hack to try and get this to work.
Has anyone got selenium to correctly test this out? An example scenario would be to have 3 listboxes which have Car Make, Model and Colour. Each one is populated in turn by the other. Selenium needs to somehow wait for the next listbox to populate before preceeding with the test.
What is normally the best way to do this is to do
Select | select1 | option
waitForSelectx | select2 | possiblePattern
Select | select2 | option
waitForSelectx | select3 | possiblePattern
Select | select3 | option
the waitForSelectx is just shorthand for one of the waitForSelect type commands. You will need to pick the one that works best for you.
I'm new in Selenium and testing matters.
I'm trying to capture the id of an hyperlink element that is dynamically part generated.
The click action is recorded like as below when i make click on in selenium, the part in bold are dynamically generated, there are many of them on my page and can differ from one site to another(I'm testing cms). I'd like to capture and click on any one.
This is what I've tried to do since:
storeAttribute | //button#class onclick="setLocation(javascript{baseUrlSelection()}['/checkout/cart/add/uenc/(a-zA-Z0-9)/product/(0-9)]'')" | myid
echo | ${myid} |
clickAndWait | ${myid[0]}
It doesn't work
My links looks like this when click action is recorded in selenium:
buton[#onclick="setLocation('http://localhost/mydomaine/index.php/checkout/cart/add/uenc/aHR0cDovL2xvY2FsaG9zdC9NYWdlbnRvSGls
YWlyZURlbW9WMi9tYWdlbnRvZGVtb0hpbGFpcmVWMi9pbmRleC5waHAvY2F0ZWdvcmllMS5odG1sP19fX1NJRD1V/product/1/')">
Please Help.
Are you using the Selenium IDE? It would probably be much easier to do something using the other development environments, however if you really want to do looping:
Get the looping user-extension from this page
and run a script like this.
store | 0 | myCurrent
storeEval | var pattern=new RegExp("\\w*http://localhost/mydomaine/index.php/checkout/cart/add\\w*");var i=0;var total=0;while(i<window.document.getElementsByTagName('input').length){if (window.document.getElementsByTagName('input')[i].id.match(pattern)){window.document.getElementsByTagName('input')[i].id = 'testID_' + total;total=total+1;}i=i+1;}total; | myTotal
while | storedVars.myCurrent < storedVars.myTotal
storeAttribute | //input[contains(#id,'testID_${myCurrent}')]#class | myid
echo | ${myid}
clickAndWait | //input[contains(#id,'testID_${myCurrent}')]
store | javascript{storedVars.myCurrent++}
endWhile
What does the click on these buttons do? Does it postback the page or anything like that? If so, you'll need to move the storeEval | var pattern.... inside the while loop. What the javascript does is rename all of the inputs on the page that match the RegEx pattern (which you'll probably need to change to match your button ID's) to a sequential ID so you can loop through them easily. If there is a different pattern you can exploit, feel free to do that.
Javascript adapted from here
You can use the xpath contains() function to locate the items:
storeAttribute | //input[contains(#onclick,"setLocation('http://localhost/mydomaine/index.php/checkout/cart/add/uenc/")]#class | myid
echo | ${myid}
clickAndWait | //input[contains(#onclick,"setLocation('http://localhost/mydomaine/index.php/checkout/cart/add/uenc/")]#class
It is also a good idea to reference the elements by something other than their onclick attribute. Id or name would be good choices.