I have 2 questions,
How can I set the value of the global search box and trigger the filter programmatically, using java script (basically I want to implement a persistent filter, based on the last user input, as the user navigates in and out of the page), check image below
Considering the Veu devtool component, I can find the vue-good-table Component and its Search subcomponent. And I can see that there is a value propuerty on this subcomponent that has the same value I had typed in the search box.
So my question is if with this information can I have a way to solve my first question, does the information in the Vue devtool can help me figure out the references to that object and value and then set it?
This could be a very useful tool in case I have a similar problem in the future with another component.
Have very little experience with Veu and general searches on how to access data or elements in components has been confusing, I just understand the properties and events to pass data, but in this case this is an imported component, so I can not hack it.
Thanks #tao, I read the docs before but skipped noticing this property
externalQuery
This is the one that solves the problem, you can link a variable to the search item and I then use your own text input box to implement the solution.
Related
After trying to find solution to this issue for hours on various forums i am posting this here.
So i have two components. 1) App and 2) Todo. Both renderes a list and i can complete items so there will be two lists one for incomplete items and one for complete items. you can click on item and it will be gone to complete items list.
So in my example you can see i am using same component but with two diffreent ways to give data to component. one using API and one using native js Data. in both cases it renderes but with api i can click on list item and it will be gone to completed list but with javascript array example it doesn't work. i am completely amazed with this because component is same. how it can affect like that.
many answer here do tell me that computed properties are not reactive as they are cached but what’s the solution to that ? i can put data variable but then the first case of api will not work because time it takes to fetch it. so please help me with this one.
complete code at sfc playground
You have reactivity issues the computed property probably expects that value to be constant because you provide a non-reactive array from the parent.
I think you have 2 options here:
you either provide a reactive prop from parent
or you set a local data attribute in the child-component so that vue will know that it can change
Your fiddle didn't work for me so I copied your code to codesandbox, I have both examples there but commented out the first solution, there you basically simply add the array to the data object and reference that in the code.
Second solution you can add a mounted hook to define reactiveAssignments to your data in the child component this way it will have the same reference so that's why it would work that way.
I think the first solution is simpler, but it is really up to which one you prefer.
You can check the solutions here in my codesanbox
A better approach could be though by setting up component events instead of v-models in the child you should use it in the parent because this way you are directly modifying the props. You can read more about this here: https://vuejs.org/guide/components/events.html#usage-with-v-model
So I am trying to create a form using Vue Formulation. I have a few input fields that are required. Is it even possible to highlight them somehow? I have read Vue Formulation doc, but could not find the answer.
You could simply give the required fields a different styling/CSS class.
If you are really fancy, you could try to read the attributes of the DOM elements (with attr() or refs), but haven't tried that and it is probably not worthwhile.
I am using mark t hughes view picklist custom control from open NTF.
Link to control on openNTF
I have set all the paramenters etc, however when I load the page with the control on, I get my custom error page, and the error below in my error logging database
Error on dialog1button5999 null property/event:
1:
Script interpreter error, line=1, col=35: [ReferenceError]
'compositeData' not found
compositeData.picklistButtonClass + " domfindmebutton5999"
This is trying to set the styleClass of a button in the custom control here:
<xp:this.styleClass><![CDATA[#{javascript:compositeData.picklistButtonClass + " domfindmebutton5999"}]]></xp:this.styleClass>
I am also definately passing this parameter is with the default code:
picklistButtonClass="button2"
I also followed the video Here to the letter, and still get exactly the same issue.
Has anyone come across this before or have any pointers as to where I should be looking to resolve it? Im not sure where to start, as all the instructions and video's explain how to complete the custom properties of the control, but there is never any mention of a need to actually modify any code WITHIN the custom control....
Thanks
(as a side note, I am using bootstrap, should this make any difference)
This is because of the theme definition. Look at the Mark Leusink's blog entry here. http://linqed.eu/2014/08/28/xpages-gotcha-modeconcat-in-your-themes/
If a theme has a "concat" definition, that will be computed at a very early phase. To concat values, it needs to compute the initial value. However, in some cases (e.g. Repeat, Custom control, etc.), the initial value cannot be computed at the page-load section.
For such cases, you can override the theme with a special themeId, as Mark suggested.
Question:
Given a DOJO TreeGrid, how can I capture the event when a user clicks the expando ("+") button to expand a row, and store the specific row number or associated item's identifier? I'd like to do this for the express purpose of completely deleting the TreeGrid from the DOM, rebuilding it, and restoring it's state once rebuilt (i.e. programmatically expanding the rows that the user has previously expanded).
Background:
So I've got a custom DOJO TreeGrid, hooked up to a custom QueryReadStore, in my app. It was constructed using the following tutorial:
http://www.ibm.com/developerworks/web/library/wa-dojotreegrid/index.html?ca=drs-
Pretty interesting tutorial, but it might be irrelevant to my question because it doesn't really squash any functionality, it only seems to augment it.
Anyway, googling around for a moment, I found a nice function in the DOJO forums that I can use to programmatically expand a row, given the specific row index. Works perfectly.
The problem is that I haven't been able to find a good way to capture the expando click event, and relate it to a specific "parent item row" index in the grid.
Details aside, I'd like to get the row index of every row that the user has expanded, into an array (and delete the index of a row that the user collapses, obviously), so I can destroy this TreeGrid, and faithfully rebuild it, with the user's selections expanded properly.
I'm not really a novice to DOJO, but I'm certainly no expert by any means. I've done a fair bit of googling, and FireBugging, and haven't really been able to find anything that I can use to do this.
Suggestions? Anybody done something similar before? Stupid question with obvious answer that I've missed? I'm totally misguided and am going about it all wrong? Thanks everybody!
Something similar to this would probably work, this is how the dijit.Tree implementation wouldve looked;
var expandedNodes = {}
dijit.tree._onExpandoClick = function (args /* object wrap for args.node */) {
var treeNode = args.node,
path = treeNode.getTreePath(),
id = treeNode.getIdentity();
expandedNodes[id] = path;
}
I am not 100% sure im being strictly correct but for the TreeGrid you will have to look through code of dojox/grid/_TreeView.js (link). The _setOpen would be an entrypoint from which you can 'hook' the onclick action. from there, find the expandoCell.openStates hash, this is a true/false variable set, indexed by itemId. This hash is most likely what you need as your state
I'm trying to add tooltips to a Dojo application that I recently inherited. The problem I'm having is that everything is created with dojoAttachPoint identifiers instead of with id's , such as :
so, I can't use "connectId= " when defining the tooltip, until I get a hold of the element's id that I want to connect to. Basically my question is, how can I find the id based on the dojoAttachPoint?
Thanks much for any suggestions!
The attach point is either going to be a domNode or a Widget based on whether it has a dojoType or not so if you have an attachPoint to a widgit then you can access connectid with this.myAttachWidget.connectid assuming that the attachPoint is in a widgets template.