I am trying to put 2 kendo ui treeviews in same page.
The Page is Rendered fine but i can't expand the nodes of the trees.
Can someone help please?
You must provide different names to the .Name() attribute of the treeviews in order to let it expand because onclicking node items it distracts one another..
Check your page for JavaScript errors. Those would prevent the Kendo UI widgets from working as expected. Here is a list of common JS errors: http://docs.kendoui.com/getting-started/troubleshooting#known-javascript-errors
Related
I have nested jQuery accordions in my markup where I try to auto-open on page load according to the path that was last opened in previous sessions.
I saved the path into a cookie, loading the cookie and run the following code
path.forEach(function(label){
var element = root.find("[data-caption='"+label+"']");
element.parent().accordion( "option", "active", parseInt(element.attr('data-index')) );
root = element.children().eq(1);
});
The issue is that for some reason the 'active' takes effect only for the first accordion and non of the nested ones.
I checked several times and:
element.parent() is indeed an accordion (otherwise it would have thrown an error).
data-caption is a unique key for elements in each iteration.
element.children().eq(1) is the active panel (according to the structure of jQuery UI Accordion).
the active element I am asking to open indeed exists for each iteration.
I don't know what is the issue here, any ideas?
I found the problem by myself and post here for future reference.
The issue is this part of the code
parseInt(element.attr('data-index'))
And the reason lies with how accordion counts elements within its panel.
In my panel I had several html elements which were not accordion and several which were. Now the code above brought me the index of the accordion element in compare to the entire panel.
The issue is that for some reason .active only counts sub elements which are accordion themselves. So for example if the panel index of an element is 3 but it has 1 non-accordion element before it in the panel, then it's "active" index is actually 2.
I don't know why they chose for this behaviour, but there you have it.
My solution was to place a different attribute on the element with it's "active" index and use it instead of data-index.
Now everything works like a charm.
So, I'm trying to select a polymer custom element(using paper_elements) in my view with querySelector. I'm able to select regular html elements just fine. In particular, I'm trying to select a specific paper-input element. I want to be able to query it's input element which is buried in it's second shadowroot.
I've tried the following:
querySelector('#my-paper-input::shadow #input')
querySelector('paper-input::shadow input')
and a bunch of other variations. However, no matter what I do, the query always returns null. It's driving me mad because I can style it in css. What do?
As far as I know you have to use several steps
querySelector('#my-paper-input').shadowRoot.querySelector('input');
but you should also be able to access the value using the attribute of the outer element like
querySelector('#my-paper-input').attributes['value'] or
querySelector('#my-paper-input').attributes['inputValue']
you could also use http://pub.dartlang.org/packages/angular_node_bind
but I wasn't able using Angular with paper-elements recently (see https://github.com/angular/angular.dart/issues/1227)
I have around 10 tables in my database. Building CRUD’s for these are easy with ie. reverse engineering in Netbeans, and with Netbeans 8 the pages look great thanks to primefaces.
So now I have 4 pages per entity; list, create, edit and view. Create and edit are similar except they bind to a new respective an existing entity. View is similar to edit, except it is readonly. The available buttons change too, of course, and there are probably other minor differences.
What I would like is to keep it down to 2 components per entity; 1 for the list and 1 for an instance. The latter should come in 3 flavours; editmode, createmode and viewmode. These components should be includeable in other pages, preferably both as dialogs and “raw” imports.
Anyone have an idea whether this is possible? Do I need to create my own set of renders, which can ie. render an inputText-component and a selectOneMenu as an outputText? As an example my first try with an inputText was just to write disabled=”true”, which renders the inputtext as non-editable. It becomes too greyish, but I guess that would be fixable by overriding the style. But preferrably it should render as a real outputText would when in viewmode. Maybe some clever use of css could do the job instead of renders.
Maybe the easiest way would be to store the viewmode of the composite component in the componenttree. Is this possible? I guess any component would have to look up in the tree in the render phase, to see how it should render.
For the buttons I could maybe do with just the rendered attribute.
Is it possible to go this route, or has anyone already made a framework for this? Or is it stretching JSF too far?
Select boxes converted to Select2, do not automatically integrate with unobtrusive validation mechanism in ASP.NET MVC framework.
For example, on a form which contains a regular select box (marked as required in model definition), submitting the form while no options have been selected in the select box, will cause the border and background of the select box to take a reddish color, and by using #Html.ValidationMessageFor, error messages, if any, can be displayed beside the box. However if the select box is converted to a Select2 component, then none of the mentioned features work any more. Even the validation error message will not show up.
It seems that the reason for even the validation error message not showing, is because Select2 changes the display CSS property of the original select box to none (display:none), and I guess the unobtrusive validation script does not bother generating error messages for invisible fields.
Any ideas / solutions?
This issue isn't really specific to Select2, but rather to the jQuery unobtrusive validator.
You can turn on validation for hidden fields as highlighted in this answer.
$.validator.setDefaults({
ignore: ''
});
As the comments noted, it didn't work inside an anonymous callback function within $(document).ready(). I had to put it at the top level.
I've run into similar issues with the select2 plugin. I don't know exactly which features you're using specifically, but in my experience, when you set an element as a select2 in the document.ready event, the plugin will change some of the element's attributes on the fly (inspect one of the elements after your page has finished loading - oftentimes you'll see the id and class properties are different than what you're seeing when you view source).
It's difficult to offer more without actually seeing the code, but here's a few ideas to get you started:
First off, obviously make sure you have the a link to your select2.css stylesheet in the header.
Then, since you're talking about form submissions, I'd recommend you examine whether or not you're getting a full postback or submitting via AJAX (if you're using jQueryMobile, you're using AJAX unless you override it in the jquerymobile.js file or set a data-ajax="false" in your form attributes). You can just look at the value returned by Request.IsAjaxRequest() for this. Obviously if you're submitting via ajax, you won't hit the document.ready event and the select2 won't initialize properly and you'd need to figure out a way around that. Try refreshing the page after the submit and see if it renders the select2 component.
Then I'd suggest examining the elements and see if they're not behaving like you'd expect because you're actually trying to work with classes that the plugin has reassigned at runtime. You can either just adjust your logic, or you can dig into the select2 code itself and change the behavior - it's actually fairly well-documented what the code is doing, and if you hop on the Google group for select2, Igor is usually pretty quick to follow up with questions.
like this
$('select').on('select2:select', function (evt){
$(this).blur();
});
$('body').on('change', 'select.m-select2', function () {
$(this).blur();
})
I am having a html dropdown
<select id="ExternalIp" onchange="externalIpchange()"></select>
I bind the data to dropdown through jquery and a I am passing data from controller which is working properly. I want to change the look and feel of the dropdown so I called a function
$("#ExternalIp").selectbox();
Now the look and feel of drop down is changed but it is not showing the data which I bind to dropdown. I am not getting what is the problem. Plz help
It appears as if the jQuery plugin you are using resets the values bound to the select list.
Look for a method provided within your jQuery plugin to rebind the data which you earlier attached with jQuery or style your element first and then try binding the values.
Cheers!!!