CheckboxTree : lvl1 box | lvl2 radio - extjs

All the question is in my title =).
I started with checkBox Tree exemple, add property checked:false for the first level that work i see my checkbox just on left icone folder.
But have radio in level that is so different, i tryed some change to transform checkbox in radio, but nothing *:_:*
Some topic given by broogle talk only some levels with checkbox but none with radio.
Have you an idea ?
Thx a lot, have a nice day.

The Example is using a JSON file to load the nodes.
In de JSON file you can set "checked" to true or false.
{"text": "Grocery List",
"cls": "folder",
"children": [{
"text": "Bananas",
"leaf": true,
"checked": false
},{
"text": "Milk",
"leaf": true,
"checked": false
},{
"text": "Cereal",
"leaf": true,
"checked": false
},{
"text": "Energy foods",
"cls": "folder",
"children": [{
"text": "Coffee",
"leaf": true,
"checked": false
},{
"text": "Red Bull",
"leaf": true,
"checked": false
}]
}]}
You can only have a checkbox in the tree but you can always write your own extension :)

Well, i'm brb on this thread for give a little function. put that on your tree and normaly you have checkbox with radio behavior.
listeners: {
'checkchange': function( n, check )
{
if( check )
{
var p = n.parentNode;
p.eachChild( function( c )
{
if( c.isLeaf() && c.get('checked') )
{
c.set('checked', false);
}
});
n.set('checked', true);
}
else
{
n.set('checked', false);
}
}
}

Related

Rendering columns dynamically

I receive JSON(that has products/categories related information) from a Rest API call, on my ReactJS page. I render this information on ag-grid.
Categories are showed horizontally and against each category, products are shown in the columns.
---------|----- |----------|------------
Product1| Product2 | Product3
---------|-------------------------------
Category1|abc1 | abc2 | abc3
-----------------------------------------
Category2|xyz1 | xyz2 | xyz3
-----------------------------------------
The JSON can have any number of categories/products.
I need to able to render the rows/columns dynamically based on this info.
Not sure how to go about this?
Products could be maximum five in number.
Shall I define header definitions of these five products in my reactJS page and then dynamically set the hidden property to true or false, depending upon which product is present in JSON?
[{
headerName: "Product1",
resizable: true,
wrapText: true,
cellStyle: {
'white-space': 'normal'
},
autoHeight: true,
hide: true
},
{
headerName: "Product2",
resizable: true,
wrapText: true,
cellStyle: {
'white-space': 'normal'
},
autoHeight: true,
hide: false
}]
JSON:
Example1:
"raw_message":
[
{
"category": "category1"
[
{
"product": "Product1"
},
{
"product": "Product2"
},
]
}
]
Example2:
"raw_message":
[
{
"category": "category1"
[
{
"product": "Product1"
},
{
"product": "Product2"
},
{
"product": "Product3"
},
]
}
]
Thanks for your help. I managed to resolve the issue by using ag-grid's onRowDataChanged eventhandler and columnAPi's SetColumnVisible property.

Using ng-if and ng-repeat correctly

I have a rudimentary understanding of AngularJS and have a couple (possibly stupid) questions about ng-if and ng-repeat.
If I have a ng-repeat that looks like this:
For all containers without titles, would the ng-repeat produce those containers and not show them? Or do they simply don't exist? The reason I ask is I've tried to replace ng-if with ng-show, but it does not produce the same outcome of "hiding" containers that do not have titles.
Is there a way to code a ng-if to say if the next container has no title, then do something. I tried something like ng-if="item.title=='' && $index+1", without any luck.
Any suggestions?
My data looks like this:
"_sections": [{
"_bootstrap_cells": 6,
"_count": 2,
"visible": true,
"columns": [{
"fields": [{
"name": "type_of_account",
"type": "field"
}, {
"name": "routing_transit_number",
"type": "field"
}]
}, {
"fields": [{
"name": "type_of_payment",
"type": "field"
}, {
"name": "check_digit",
"type": "field"
}]
}],
"caption": "Direct Deposit",
"id": "b456b9d2137ac340177c36328144b0ef"
}, {
"_bootstrap_cells": 12,
"_count": 1,
"visible": true,
"columns": [{
"fields": [{
"name": "account_number",
"type": "field"
}, {
"name": "account_title",
"type": "field"
}, {
"name": "financial_institution_name",
"type": "field"
}]
}],
"caption": "",
"id": ""
}
}]
The first section has two columns and a bootstrap cell value of 6 for each column, the second section only has one column and a bootstrap cell of 12. Since the second doesn't have a caption, I want it to be appended to the first section, but keep both sections' bootstrap formatting.
If containers is an array then it does not have a title property. You need to check the title on each item.
Also note that ng-if will not hide the content, but remove it or not insert it into the DOM. The counterpart of ng-show is ng-hide.
angular.module('appModule', [])
.controller('MyController', [function() {
this.containers = [{
aaa: 1,
title: 'One'
}, {
aaa: 2,
title: ''
}, {
aaa: 3,
title: 'Three'
}]
}]);
angular.bootstrap(window.document, ['appModule'], {
strictDi: true
});
<div ng-controller="MyController as myCtrl">
<div ng-repeat="item in myCtrl.containers track by $index">
<div ng-if="item.title!=''">{{$index}}. {{item.title}}</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>

Add optgroups to angular-selectize asynchronously

I am using angular-selectize directive in my project. For this, I need to load optgroups asynchronously. So far I have tried multiple approaches but none of them works. The problem is, you cannot use the data returned by a promise synchronously. On the flip side, I have also been unable to initialize selectize from inside a promise callback. Given below is the code I currently have. Note that it is only to be used to get the idea of the data I'm playing with, not to present it as something you can consider right.
app.js
$http
.get('/get-categories')
.then(getCategoriesSCB, getCategoriesFCB);
function getCategoriesSCB(response) {
if(typeof(response.data) === 'object') {
posControl.menuCategories = response.data[0];
posControl.menuCategoryGroups = response.data[1];
}
else {
getCategoriesFCB(response);
}
}
function getCategoriesFCB(response) {
console.log(response);
}
posControl.menuConfig = {
valueField: 'id',
labelField: 'title',
placeholder: 'Select Category',
optgroupField: 'class',
optgroupLabelField: 'label',
optgroupValueField: 'value',
optgroups: posControl.menuCategoryGroups,
maxItems: 1,
searchField: ['title', 'category'],
onInitialize: function(selectize) {
console.log('selectize is here');
},
}
index.html
<selectize config="POSCtrl.menuConfig" options="POSCtrl.menuCategories" ng-model="POSCtrl.menuModel"></selectize>
data returned by ajax call
[
// this array has to be used for options.
[{
"class": "57b83830babb9",
"category": "Food Menu",
"id": "57b83855b23f9",
"title": "Beverages"
}, {
"class": "57b83830babb9",
"category": "Food Menu",
"id": "57b83855c05de",
"title": "Cuisines"
}, {
"class": "57b83830babb9",
"category": "Food Menu",
"id": "57b83855cdcb4",
"title": "Steaks"
}, {
"class": "57b83830d0899",
"category": "Wholesale Coffee",
"id": "57b83830d0899",
"title": "Wholesale Coffee"
}],
// this array has to be used for optgroups
[{
"value": "57b83830babb9",
"label": "Food Menu"
}, {
"value": "57b83830d0899",
"label": "Wholesale Coffee"
}]
]
You should be able to load a selectize asynchronously by setting the values directly on the posControl.menuConfig:
function getCategoriesSCB(response) {
if (typeof(response.data) === 'object') {
posControl.menuConfig.options = response.data[0];
posControl.menuConfig.optgroups = response.data[1];
}
}

Variable as array value

I have this array
$scope.critere_cuisine = [
{"name" : "Assiettes plates",
"etats" : $scope.etats
}]
which refers to
$scope.etats = [{ "text": "Bon", "checked": true },
{ "text": "Moyen", "checked": false },
{ "text": "Mauvais", "checked": false }];
But i don't manage to make it work, where am i wrong ?
You probably defined etats below critere_cuisine. If you declare etats before critere_cuisine it should work fine.

how to parse and bind complex JSON in backbone.js with view model controller approach

I am using one complex JSON structure as a result of one Ajax call. Here I need "many different kinds of nested models in one parent model".For each person, I am using one EmployeeContext. I need this as my parent model.
Within this EmployeeContext, I need many different collection having associated model. Example:I have a collection named expenseContextCollection with "expense" as the model of the same.And I have travellContextCollection with travel as the model.
I need to display details of each model and need to update the same and save back to mongo database.
Currently I am using one file for model (EmployeeModel.js),one file for view (EmployeeView.js), one file for template (EmployeePage.html).
And in the EmployeeView.js file I am setting the result of ajax call to model.
initialize: function(instance) {
this.model.set({
"travelContext": ajaxResponse.EmployeeContext.travellContextCollection
});
this.model.set({
"expenseContext": ajaxResponse.EmployeeContext.expenseContextCollection
});
this.render();
}
But I need this travelContext as a backbone collection so that I can loop though it and take each travel model from it
How Can I handle this situation with model view collection approach in backbone.js ?
following is one sample of JSON structure:
{
"EmployeeContext": {
"expenseContextCollection": [{
"currencyType": "INR",
"empID": "00123456",
"imageID": "d69ce74a9b4e075d2111cf0619e27c503d",
"toDate": "11-12-2015",
"billDate": "11-12-2015"
}, {
"currencyType": "INR",
"empID": "00123456",
"imageID": "ab2f78d9f9e7897b4a11c5bc82618d09f4",
"toDate": "25-01-2016",
"billDate": "20-01-2016",
}],
"claimContextCollection": [],
"travellContextCollection": [{
"empID": "00123456",
"isOneWay": true,
"eligibility": "true",
"createTravelRequest": {
"purposeOfTravelDetailsCollection": [{
"isPrimary": "true",
"purposeOfTravel": "Trans",
"leadOpportunity": "BAA12346",
"account": "BASS"
}],
"travelDetailsCollection": [{
"travelToCity": "BANGALORE",
"travelType": "DTR",
"travelTime": "",
"travelFromCity": "CHENNAI",
"checkoutDate": "25-01-2016",
"travelDate": "20-01-2016",
"travelTo": "INDIA",
"travelFrom": "INDIA"
}],
"Preference": {
"empnum": "00123456",
"employeeProfilePreference": {
"emergencyContacCity": "9412345678",
"travelSeatPreference": "aisle",
"smsNotification": "true",
"emergencyContactNumber": "9412345678",
"frequentFlierPreference": {
"frequentFlierNo": "EJK7861",
"frequentFlierAirlines": "Virgin"
},
"employeeContactNumber": "8712345678",
"emergencyContactPerson": "Moll Mathew",
"emergencyContactAddress": "KOOODC",
"travelMealPreference": "vegetarian"
}
},
"otherDetails": {
"smsNotification": true,
"forexAmount": "0",
"forexRequiredDate": "20141002",
"employeeContactNumber": "00123456",
"billable": "true"
},
"emergencyContactDetails": {
"emergencyContacCity": "KOOODC",
"emergencyContactNumber": "9412345678",
"emergencyContactPerson": "Moll Mathew",
"emergencyContactAddress": "KOOODC"
}
},
"billSubmissionMode": "manual",
"travelClass": "Economy",
"access_token": "",
"travelEndDate": "25-01-2016",
"timeStamp": "2015-12-11 16:00:47.395",
"travelType": "DTR",
"travelID": "3000553702",
"travelStartDate": "20-01-2016",
"approvalGIMS": "approvalGIMS",
"expenseCodes": {
"ExpenseTypeCollection": [{
"travelType": "DTR",
"client": "200",
"expenseDescription": "LODGING",
"glAccount": "0000834110",
"lastChangedBy": "",
"expenseCode": "DCN",
"changedOn": "0000-00-00",
"expenseStatus": "ACTIVE"
}, {
"travelType": "DTR",
"client": "200",
"expenseDescription": "BUSINESS",
"glAccount": "0000839301",
"lastChangedBy": "",
"expenseCode": "DMT",
"changedOn": "0000-00-00",
"expenseStatus": "ACTIVE"
}],
"ErrorCodeCollection": [{
"ErrorText": "S",
"ErrorType": "S"
}]
},
"empEmailID": "jaiseephen#gmail.com",
"entry_type": "new_entry",
"approvalBFM": "approverBFM",
"status": "Pending for Expense"
}],
"location_contextCollection": [{
"Status": "success"
}],
"user_context": {
"timeStamp": "2015-12-11 16:00:47.754",
"access_token": "",
"empID": "00123456",
"buDetailsCollection": [{
"buHeadADID": "",
"buHeadName": "",
"buHeadEmail": ""
}],
"empTechManager": {
"techMgrEmpID": "",
"techMgrADID": "",
"techMgrName": "",
"techMgrEmail": ""
},
"empPassportDetails": {
"endDate": "",
"dateOfBirthAsOfPassport": "0000-00-00",
},
"empDetails": {
"secondSupervisorEmpNumber": "00000000",
"empDOB": "15.05.1999",
},
"empEmailID": "jaiseephen#gmail.com",
"supDetailsCollection": [{
"ADID": "FAMM",
"supADID": "FAMM",
"supEmail": "fazee_ammed#gmail.com",
"lastName": "Faz Mammed",
"supCostCenter": "",
"Email": "fazee_ammed#gmail.com",
"CostCenter": "",
"empNumber": "00678444",
"supEmpID": "00678444",
"supName": "Faz Mammed",
"Name": "Faz Mammed"
}],
"altSupDetailsCollection": [{
"supADID": "FAMM",
"supEmail": "fazee_ammed#gmail.com",
"supEmpID": "00678444",
"supName": "Faz Mammed"
}]
}
}
}
I believe the simplest solution would be parse JSON.parse(text). Then, you can use that object in your Backbone model like this:
var obj = JSON.parse(income);
obj.EmployeeContext.travellContextCollection[0]
Also for finding a target value you can create function for searching target node.

Resources