kendo replace (or remove) widget - kendo-ui

I have my website setup to use the KendoUI framework and I have pulled in some external internet code with forms. To make it look like Kendo i have set the following to make all my select's into a kendoDropDownList:
$("select").kendoDropDownList();
This works fine. However there is one particular select that I like to convert into a kendoComboBox.
Is there a way to replace or remove the kendoDropDownList from my element and put the kendoComboBox instead.
Thanks in advance
Karel

If you need to single out one select, then you'll need to use a more specific jQuery selector (an id, text, CSS class, containing div, etc.).
For example, if your select elements have id's, you could do something like:
$("select:not([id='myComboBox'])").kendoDropDownList();
$("select[id='myComboBox']").kendoComboBox();
Really, you just need to do something to separate that select from the rest of them.
If you are unfamiliar with jQuery selectors (or just need a refresher), you can find the full documentation here: http://api.jquery.com/category/selectors/
Here's an example fiddle of this working: http://jsfiddle.net/ATNkC/1/

Related

Angular5 pass DOM object to ng-content

I'm newest in web.
I want customize default scroll-bar in ag-grid. I try use ngx-scrollbar for this. In sources ngx-scrollbar I found that ngx-scrollbar using ng-content for wrapping elements(link to github source file). If wrap ag-grid-angular element then scrolling even doesn't shows because content doesn't overflow ag-grid-angular content because oveflow happen in div with class .ag-body-viewport where using stock srolls. In order to achieve needed effect I wish pass DOM element with class .ag-body-viewport to ng-content of ngx-scrollbar. Is it possible?
More info here github issue but I don't use Nice Scroll or Perfect Scrollbar
I want use ngx-scrollbar because it has capability of customization.
UPDATE
I can pass DOM element to ng-content using next sintax(agGridViewport is native element):
<ng-scrollbar>
{{ agGridViewport }}
<ng-scrollbar>
but it pass element like a copy of real DOM object but I want pass this like a refence.
Now I got UI like a stack style:
[rendered real ag-grid-angular]
[rendered ng-scrollbar with his content]
But it isn't that I need. Also I got bad rendering with artifacts and even some components doesn't appear. Now I want to try use Renderer2 for putting ng-scrollbar element between two DOM elements in tree(.ag-body-viewport-wrapper and .ag-body-viewport). But I think it's very bad idea because Renderer2 doesn't have methods for putting elements between DOM elements in tree and my code will be very unlify and complicated :( It's must be like injection.
No, I can not do injection in DOM with Angular tools. It's bad idea do it and it is not possible now. AgGrid doesn't support customization with tools like ngx-scrollbar which using ng-content for wrapping components and other elements. May be better way using other tools which working by another way or using webkit customization which supports not all web browsers.
UPDATE
Also I try to use smooth-scrollbar. I managed to get better result. I bind him to element .ag-body-viewport. It works fine but it scrolling only content of grid without header be careful. smooth-scroll bar doesn't have options for horizontal and vertical scrollbar as a different units. I know how issue can be solve. Vertical scrollbar must be bind to .ag-body-viewport and horizaontal scrollbar must be bind to .ag-root. If your can find scrollbar which let you do it that you can solve this problem. May be I write special component for Angular in near future and then add link to this answer. If you do it faster you can add yourself link or you can add link to already existing packages.

JSF PrimeFaces ajax update excluding one component

I got a form, that includes outputPanel that I need to update, excluding one of its component (it containts calendar, that resets after I call update, I want to prevent that)
<p:ajax update=":form1:outputPanel1 :not(form1:outputPanel1:nestedOutputPanel)"/>
But I have no idea how can I achieve something like this (above example is not working)?
The PrimeFaces update attribute takes one or more expressions separated by a space (or comma). Normally (in plain JSF) those expressions are client IDs, but in PrimeFaces you can also use selectors. A selector is executed and results in a list of client IDs to update. You could use a selector to select all the components that need to be updated and exclude the component you don't want to update.
You could add a style class to the component you want to exclude and use something like:
update="#(.parent :not(.exclude))"
As you can read in the top answer on the linked question, the #(...) selector will be used as a jQuery selector. So you can easily test selectors in your browser's JavaScript console as $("...").
See also:
How do PrimeFaces Selectors as in update="#(.myClass)" work?

Unable to identify element in Blue Prism using XPath

I have spied an input text box using the Application Modeller of Blue Prism and was able to successfully highlight the text box using the below XPath:
/HTML/BODY(1)/DIV(4)/main(1)/DIV(1)/DIV(1)/DIV(1)/DIV(2)/DIV(1)/DIV(1)/DIV(2)/IFRAME(1)/HTML/BODY(1)/DIV(2)/FORM(1)/DIV(3)/TABLE(2)/TBODY(1)/TR(1)/TD(1)/DIV(1)/DIV(1)/DIV(1)/DIV(2)/DIV(1)/DIV(1)/DIV(1)/DIV(1)/DIV(1)/DIV(1)/DIV(1)/DIV(1)/DIV(1)/SPAN(1)/DIV(1)/DIV(2)/DIV(1)/DIV(1)/DIV(1)/DIV(1)/DIV(1)/TABLE(1)/TBODY(1)/TR(1)/TD(1)/INPUT(1)
I wanted to use a more robust XPath and to achieve that I was trying to use the below XPath:
//*[#id="CT"]/div/div/div/div[1]/div[1]/table/tbody[1]/tr/td/input[1]
The above XPath was identifying the element correctly in Chrome but was getting the below error message when trying the same in Blue Prism:
Error - Highlighting results - Object reference not set to an instance of an object.
Let me know if I am doing anything incorrectly.
Sorry for replying to a pretty old one! The workaround we've devised for this scenario (where making the path dynamic requires too long of a loop / search) is to use Jquery snippets. If the page is using jquery it is trivial to execute these queries very quickly using the blue prism capability of executing javascript functions.
And we put in an enhancement request, because it'd be supremely useful functionality.
Update: As a user points out below, the vanilla js querySelector method is probably safer and more future proof than using jquery if it is possible to be used.
Blue Prism does not fully support the XPath spec; alas the construct you're attempting to use here won't work.
Alternatively, you can set the Path attribute of an application modeler entry to be Dynamic, which allows you to insert dynamic parameters from the process/object level to pinpoint elements you'd like to interact with.
Unfortunately Blue Prism doesn't actually use "real" XPaths, but only an extremely limited subset: Absolute paths without wildcards. (Note: It is technically possible to match the XPath to a string with wildcards, but this seemingly causes BP to check every single element in the document, and is so slow it is almost never the right solution.)
For cases where an element can't be robustly identified via the BP application modeler (maybe because it requires complex or dynamic selectors), my workaround is to inject a JS snippet. JS can select elements much more reliably, and it can then generate the BluePrism path for that element.
Returning data from JS to BluePrism is not trivial, but one of the nicer solutions is to have JS create a <script id="_output"> element, put JSON inside it, then have BluePrism read the contents of this element.

Struts 2 - Conditionallly display elements on page based on validation errors

I'm looking into the fielderror tag for struts and was wondering if it was possible to conditionally show certain elements on the page based on whether or not there are any validation errors. I want to do something like this (which currently does not do what i want it to):
<s:fielderror>
This is a test link
<s:param>field1</s:param>
<s:param>field2</s:param>
<s:param>field2</s:param>
</s:fielderror>
I would like the anchor tag to show up ONLY if one of the fields referenced by the param tags is invalid. In other words, if something is invalid in this fielderror block, I would like to display some HTML. The way it is coded above, the anchor tag is always displayed.
I think I can certainly do this with jQuery, but i was wondering if there was a way to do this natively in Struts that perhaps I'm overlooking. I've tried looking at things like the label and title attribute, but nothing seems to be working.
thanks in advance!
~j
There's nothing out-of-the-box, at least not like the way you want it.
Personally, I find your construct quite counter-intuitive: it doesn't execute/render like it reads.
A few options: do it "manually", create a tag to do it, or do it outside of the view. All rely on using ValidationAware.getFieldErrors() to grab the map and do some minimal logic.
The manual approach would use <s:if> to check for the presence of fieldErrors['fieldName'] for each field. Wrapped up in a simplistic JSP-based custom tag would produce something like:
<if:fieldErrors for='field1, field2, field3'>
<a ...>
</if:fieldErrors>
IMO doing most of the work in Java is cleaner, and easier to test. This could mean doing all the work in the action (or utility) and exposing only a single flag to the view, or using a thin JSP-based tag to call the utility. Either way, it's easier to test outside of a container, and removes inappropriate view logic.

Click at a scrollable data table with watir

Is there anyway of marking several different rows in a scrollable data table ?
I know how to mark one row
b.div(:id, "listProductsForm:productList:bc_4_0").click
I just want to simulate the "Ctrl"- button is pressed down
How does your "scrollable data table" looks like? Show us the HTML. I see that you are using div tag to access one element.
You probably need to fire some JavaScript event. See How to find out which JavaScript events fired?
The chances are good that you will need to use a combination of Watir::IE.send_keys() and the click actions on the document.
Try something like this:
#browser.send_keys("{CTRLDOWN}")
#browser.div(:id, "listProductsForm:productList:bc_4_0").click
#browser.div(:id, "listProductsForm:productList:bc_5_0").click
#browser.send_keys("{CTRLUP}")
Watir API documentation: http://wtr.rubyforge.org/rdoc/1.6.5/classes/Watir/IE.html#M000497
The documentation above links to the specific key commands that can be sent. I'm pretty sure this will require that you have AutoIt installed.

Resources