I am using JsTree checkbox which contains lot of sub fields.
When I am selecting one field it automatically selects the sub category of another field.
So that field shows partially checked.
For instance:
In my JsTree When I clicked "United States" it partially selects
"Canada".
Please any one explains this behavior.
Since the tree is big I am not pasting the code instead of that I am posting an JsFiddle URL.
Code:
$(function () {
$("#tree").jstree({
"checkbox": {
"keep_selected_style": false
},
"plugins": ["checkbox"],
'core': {
'data': {
"id": "ALL",
"text": "ALL",
"children": [] ...
JSFiddle : http://jsfiddle.net/1r70vjmx/
Thanks in Advance.
Short answer: Duplicate ID's
Long answer: The jsfiddle example shows some nodes having a duplicate ID. jsTree requires that you have unique ID's for all nodes throughout your tree data. In your data, Ontario city in the United States and the Ontario province in Canada have the same id 'Ontario'. If in this case you apply a prefix of 'us-' to all the id's for United States you will see that the problem disappears.
Related
Based on the provided documents/examples found here:
http://tabulator.info/docs/4.1/localize
I have found no way to actually override the localization applied when hovering over the table page numbers themselves. So even in the example provided at the above link, if you set the table to German, and then hover over the 1 or 2 page number, you will see "Show Page 1" written in English. I haven't been able to find the name of the property I can use to override this.
In order to override the Show Page tooltip, you need to enter in the following inside the langs , pagination object: "page_title": "my new title"
for example:
locale: "es-es",
langs: {
"es-es": {
"pagination": {
"page_title": "Mostrar página"
}
}
}
I am trying to figure out how to load data dynamically in react.
I made a example where I am loading all the parents as div.cards. Each parent do have a checkbox. Whenever you press a checkbox, you should get the chosen parents children.
The problem I am facing right now:
Whenever I press a checkbox, I load all childrens to all parents. I just want to load the children to the chosen parent(clicked checkbox div).
Since I am loading the data dynamically, all checkboxes seems to get the same ID, any suggestions on how to fix this aswell?
Can I somehow also destroy the div of the children if I uncheck the checkbox?
I made a example here:
https://jscomplete.com/playground/s504328
Help is appreciated, and if you see something I could Improve, please let me know.
You are rendering childData based on this.state.childData which will be referenced by both the parents.
I suggest you change the structure to something like
this.state = {
parentData: [{
"title": "ParentTitle",
"id": 1,
"childData": [{
"title": "child1",
"id": 1
}]
}],
loading: true,
id: '',
};
I have created a fiddle with the solution you require.
https://jsfiddle.net/8w0o5a2m/1/
I have removed the async functions from code for simplicity
I am using AngularJS for my web app. My objective is to have two dropdowns list using ng-options.
The first dropdown showing the country list
The other gives the language preferences for the selected country
Being still new to AngularJS, I am able to display the data but the entire object is displayed as a single option, I am unable to split each data.
Kindly find the code below that I used.
HTML
<select ng-model="selectedRegion" ng-options="region.countryName for region in eyebrow.regionSelector"></select>
<select ng-model="selectedRegion.selectLang" ng-options= "selectedRegion.selectLang for region in selectedRegion track by selectedRegion.countryName"></select>
JS:
angular.module ('appngOption')
.controller ('headerController', function($scope) {
$scope.eyebrow = { regionSelector: [
{
"id": 1,
"countryName": "Belgium",
"selectLang": ["Dutch", "English", "French"]
},{
"id": 2,
"countryName": "France",
"selectLang": ["English", "French"]
}]}
});
Example: Dutch, English and French should be each separate dropdown option when Belgium is selected.
& English and French should be each separate dropdown option when France is selected.
Kindly review the code and let me know if i had missed anything. Your help is deeply appreciated.
I fixed some issues in your code.
JSFiddle demo
The first input was correct:
<select ng-model="selectedRegion" ng-options="region.countryName for region in eyebrow.regionSelector"></select>
But in the second, I changed several things:
Set ng-model to a different variable (selectLang), it's cleaner.
ng-options loops over selectedRegion.regionSelector, instead of just selectedRegion. That was your main mistake here:
<select ng-model="selectLang" ng-options="lang for lang in selectedRegion.selectLang"></select>
I am using bootstrap-select for drop-down selection with angular. What I want to actually do is to allow selection only from one group(suppose a user selects CS1607 from group Ground, the then selection from the other groups should be disabled and only selection from Ground is allowed then).
$scope.course = [{
id: "Ground",
code: ['CS1607','SD90','EE11','PO213']
}, {
id: "First",
code: ['PH006','EE2131','Aq122']
}, {
id: "Second",
code: ['CSB-9','AA22']
}];
I know, I have to use angular watchers for the changes. I tried a lot but could not get the desired result. Here is my version of code.
Any help would be appreciated.
I would link each select to a model (ng-model) and disable each select whenever the models of the other two are not null. Something like (for select_1):
...ng-if="!select_2_Value && !select_3_Value"...
I'm having a strange issue I can't seem to troubleshoot with my view. I'm using a directive that generates a treeview of my website. When I select one site, I have two select boxes which populate with the groups in one site and the lists in the site. When the options populate, they are all selected. I've inspected elements and they all have option="selected" Stranger is that, when I click on a single option, all others disappear and only the selected option remains. I've checked the source in Chrome console and yea only the selected option tag remains.
For exmaple the Site Lists select box has multiple options but when I clicked on Old documents, they others all disappeared. In the Site Groups, all groups are already selected
Ctrl:
spApp.controller('sitesCtrl',
function sitesCtrl($scope, $q, $modal, UserService, GroupService, SiteService){
//Options for tree controller directive
$scope.treeOptions = {
nodeChildren: "children",
dirSelectable: true,
injectClasses: {
ul: "a1",
li: "a2",
liSelected: "a7",
iExpanded: "a3",
iCollapsed: "a4",
iLeaf: "a5",
label: "a6",
labelSelected: "a8"
}
}
//Returns siteMap for tree controller directive
$scope.siteMap = SiteService.getSiteMap();
//Returns selected sites information: grous, lists, title, url
$scope.showSelected = function(site){
var siteData = SiteService.getSiteInfo(site);
//sets sites title and url in view
$scope.site = site;
$scope.siteGroups = siteData.groups;
$scope.siteLists = siteData.lists;
}
}
);
View:
<div class="siteGroups">
<label for="siteGroups">Site Groups</label>
<select
multiple
name="siteGroups"
id="siteGroups"
class="siteGroups"
ng-model="siteGroups"
ng-options="g.name for g in siteGroups">
</select>
</div>
<div class="btm1 animated fadeInUp">
<label for="siteLists">Site Lists </label>
<select multiple
id="siteLists"
ng-model="siteLists"
ng-options="l.title for l in siteLists">
</select>
</div>
Service and more of the view
This is happening because the ngOptions in the select lists are bounded to the same array as the ngModel. ngModel needs to be a different array that holds only the selected values.
With siteGroups as an example, what is happening is that the select list options are initialized with siteGroups, and they are all selected because the items are in the ngModel (also the siteGroups array). When you click on one of them, it now removes all other items from ngModel except the one you clicked on. Since ngOptions is bounded to the same list, all the non selected options disappear too.
To fix this, create separate array properties on your scope for the selected values in each list.