Develop Reference

How to create tree view inside the dropdown using angular material?

Can anyone tell me, how to create a tree view inside the drop down. The drop down values will be getting from rest api call as json as follows. And subchild may contains one more level of child as well.
I have to do auto suggestion here to perform the filter from parent as well as the child level too.
VehicleList = [
{
parent: "audi",
child: [{
type: 'G-audiA',
subchild: [{
id: 1,
name: 'type audi A1'
}, {
id: 2,
name: 'type audi A2'
}]
}, {
type: 'G-audiB',
subchild: [{
id: 1,
name: 'type audi B1'
}, {
id: 2,
name: 'type audi B2'
}]
}]
}, {
parent: "bmw",
child: [{
type: 'G-bmwA',
subchild: [{
id: 1,
name: 'type bmw A1'
}, {
id: 2,
name: 'type bmw A2'
}]
}, {
type: 'G-bmwB',
subchild: [{
id: 1,
name: 'type bmw B1'
}, {
id: 2,
name: 'type bmw B2'
}]
}]
}]
Anyone help will be appreciated!!!

Based on the first example from the Angular Material Tree docs I managed to build up a drop-down with a tree structure inside like so:
The trick for displaying the tree is to add a disabled/empty option. I used it as a label. The tree is taken from their examples so I did not modify it at all, you can modify the node structure to match your own.
In order to display the selected items in the label of the drop-down, you can create a method that will return the selected items a string as their SelectionModel object has the selected property which would return all selected nodes.
/** The selection for checklist */
checklistSelection = new SelectionModel<TodoItemFlatNode>(
true /* multiple */
);
And in order to get the selected items from the tree:
return this.checklistSelection.selected.map(s => s.item).join(",");
For the filtering part I think you can look over this answer.
Hope this is helpful!
Stackblitz
Edit: If you select a child the parent gets selected too and added in the SelectionModel even if all its children are not selected. If you don't want this behaviour comment on the function descendantsPartiallySelected. This will not check the checkbox and so parents will not be added in SelectionModel unless all children are selected

Replacing an array values in script with input values of view in MVC

I have this code for view(model's value):
#foreach (var item in Model)
{
<input name="DepID" type="text" value="#item.DepID" id="id">
<input name="DepName" type="text" value="#item.DepName" id="depname">
<input name="DepID_Parent" type="text" value="#item.DepID_Parent"
id="parent">
}
on the other hand, I have an array like below in my script:
var testData = [
{ id: 1, name: 'my organization', parent: 0 },
{ id: 2, name: 'ceo office', parent: 1 },
{ id: 3, name: 'division 1', parent: 1 },
{ id: 4, name: 'division 2', parent: 1 },
{ id: 6, name: 'division 3', parent: 1 },
{ id: 7, name: 'division 4', parent: 1 },
{ id: 8, name: 'division 5', parent: 1 },
{ id: 5, name: 'sub division', parent: 3 },
];
I want to replace the value off all inputs to testData array, and use them in my script.
So,I change the definition of testData with this code for script:
var testData = $('#id,#depname,#parent').map(function () {
return testData.value;
}).get();
But when I replace testData with this code, the values aren't returned.
What changes must be done?

Your code has some issues. You are setting a static id attribute value to your input elements inside a loop. So when razor executes your code, it will generate markup for more than one input with the same id attribute value. That is invalid HTML! element Id's should be unique inside a document
From the comments you added to the question, you want to create a javascript array similar to what you have in testData variable, by reading the input values from your DOM. I suggest you wrap the inputs for each item in the collection, inside a wrapper div. You can use a jQuery selector on this wrapper div later to get the items to build your array. Make sure to remove the code which sets the same id attribute value inside the loop
#foreach (var item in Model)
{
<div class="item-row">
<input name="DepID" type="text" value="#item.DepID" />
<input name="DepName" type="text" value="#item.DepName" />
<input name="DepID_Parent" type="text" value="#item.DepID_Parent" />
</div>
}
Now in your javascript, get all the divs with item-row class, and get the inputs (using the name selector) and build the object with the 3 properties.
This should work
var testData = $("div.item-row").map(function () {
var t = $(this);
return {
id: t.find("[name='DepID']").val(),
name: t.find("[name='DepName']").val(),
parent: t.find("[name='DepID_Parent']").val()
};
}).get();
//testData is an array of js objects with 3 properties
console.log(testData);

how get data within particular period using dates in angular2?

Hi I have certain amount data related to a customer. I need to get period of transactions of a customer and show to angular2 app.
I have one page with drop down list and output area. In dropdown items are like "Last one month transactions", "Last Three months transactions" and etc.
When I select a one of the item in dropdown I need show the all transactions in output area.
I am unable filter data using the pipes in angular2. Please send your thoughts about it. Thanks in advance.
[{
productNo:1,
productName: 'Toys',
quantity: 2,
purchaseDate: '2016/17/08'
},
{
productNo:1,
productName: 'Shoes',
quantity: 4,
purchaseDate: '2016/30/07'
},
{
productNo:1,
productName: 'Books',
quantity: 10,
purchaseDate: '2016/07/06'
},
{
productNo:1,
productName: 'Mobile',
quantity: 1,
purchaseDate: '2016/21/06'
}]

Angularjs Multidimensional array and two relative select boxes

I have a multidimensional array that holds the product names and versions.
I want to create an interface that lets the user select the product from a select box, and then the version number in the second select box. The second select box should only show the versions numbers of the product that the user selected in the first select box.
This is my mutidimensional array:
[Object]0:
name: "Product 1"
versions: [Array]0:
number: "1.0"
number: "1.5.2"
1:
name: "Product 2"
versions: [Array]0:
number: "0.0"
number: "0.5"
The user has the option to choose multiple products, so I created an array to hold the users selection.
my controller is setup like this:
app.controller('mainController', function ($scope) {
$scope.products = [{id: 1, name: '', versions: []}];
$scope.packages = [];
$scope.packages[0] = { id: 1, name: 'Product 1', versions: [{number: 1.0}, {number: 1.5}, {number: 2.0}]};
$scope.packages[1] = { id: 2, name: 'Product 2', versions: [{number: 0.1}, {number: 0.2}, {number: 0.3}]};
$scope.addProduct = function(){
var id = $scope.products.length + 1;
$scope.products.push({id: id, name: "", version: []});
};
});
And the select boxes are setup like this with angularjs:
<div ng-repeat="product in products">
<label>Product</label>
<select ng-model="product.product" ng-options="package.name for package in packages" class="form-control"></select>
<label>Version</label>
<select ng-model="product.versions" ng-options="version.number for version in product.versions" class="form-control"></select>
</div>
<button ng-click="addProduct()">Add Product</button>
What I tried to do was setup the ng-options to select the versions object of the current product. But this doesn't work.
I created a jsFiddle of what I currently have:
http://jsfiddle.net/rkyu4rjq/
I would really appreciate any suggestions on how to link the version select box with the product selected.
TIA

Eventhough I'm not really keeping track of which version chosen for each product I fixed your relative select options.
You can find a solution here. This should get you on your way!

I missed something very simple.
In the version select box binding I should of used version.number for version in product.product.versions instead of version.number for version in product.versions
Here is a working jsFiddle: http://jsfiddle.net/rkyu4rjq/2/

Knockoutjs Dropdown Pre Selection In Nested Arbitary Javascript Object Working Fine KO 2x versions Not working in KO 3x versions

so this my sample data. which il be loading form server in json format construct into below looking objec graph.
Its an array of "Choice" objects each will be having id, name, stages & currentStageId properties. "stages" property in "Choice" object is an array of "Stage" object which would be having id, name &
value properties.The "Choice" object will go through no.of stages from "First Stage" to "Fourth Stage" so user can select a "Stage" from the give dropdown list and save it. "currentStageId" is the property which stores "id" of stage object which will give in which stage the respective "Choice" object is in
Note: each choice can have different types of stages for brevity kept simple as possible
i.e for Choice 1 the current saved stage is 4
var data = [
new Choice({
id: 1,
name: "One",
stages: [
new Stage({
id: 1,
name: "First Stage",
value: 25
}),
new Stage({
id: 2,
name: "Second Stage",
value: 50
}),
new Stage({
id: 3,
name: "Third Stage",
value: 75
}),
new Stage({
id: 4,
name: "Fourth Stage",
value: 100
})],
currentStageId: 4
}),
new Choice({
id: 2,
name: "Two",
stages: [
new Stage({
id: 1,
name: "First Stage",
value: 25
}),
new Stage({
id: 2,
name: "Second Stage",
value: 50
}),
new Stage({
id: 3,
name: "Third Stage",
value: 75
}),
new Stage({
id: 4,
name: "Fourth Stage",
value: 100
})],
currentStageId: 3
}),
new Choice({
id: 3,
name: "Three",
stages: [
new Stage({
id: 1,
name: "First Stage",
value: 25
}),
new Stage({
id: 2,
name: "Second Stage",
value: 50
}),
new Stage({
id: 3,
name: "Third Stage",
value: 75
}),
new Stage({
id: 4,
name: "Fourth Stage",
value: 100
})],
currentStageId: 2
})];
Here is "Choice" & "Stage" Modles to hold data and ViewModel for binding
function ViewModel(data) {
var self = this;
self.choices = ko.observableArray(data);
//dont require pre selection so kept it with empty observable so it
//will be set to first item in the dropdown list
self.selectedChoice = ko.observable();
}
function Choice(data) {
//debugger;
this.id = data.id;
this.name = data.name;
//require pre selection of stage as choice can go through no of
//stages and selected stage name and value will be stored
this.selectedStage = ko.observable(ko.utils.arrayFirst(data.stages, function (item) {
return item.id === data.currentStageId;
}));
this.stages = ko.observableArray(data.stages);
}
function Stage(data) {
this.id = data.id;
this.name = data.name;
this.value = data.value;
}
ko.applyBindings(new ViewModel(data));
Here is my view
<select data-bind="options: choices, optionsText: 'name', value: selectedChoice"></select>
<select data-bind="options: selectedChoice().stages, optionsText: 'name', value: selectedChoice().selectedStage"></select>
Knockout.js 2x version
Pre selection of saved stage is working
Selected stage for choice is updated into underlying observable
Here is the Working sample with KO 2x in js
Knockout.js 3x version
Pre selection of saved stage is not working
Selected stage for choice is not preserved. When choice is changed the selectedStage is set to first item in the dropdown list each and every time the choice is changed.
Here is the Working sample with KO 3x
Finally the actual part. Question!
Why the same code behaving differently with two different versions of KO. Am i missing something new in KO? or is it a bug in KO?
What code changes should be done to produce same fucntionality as in with later version of KO, using the latest version of KO? because my project is being developed with latest version konckout.js 3.1.0 and i don't wanna switch back to older version for this functionality.
Which behavior of KO version is correct whether 2x or 3x? What is happening internally? which is causing this behavior discrepancies?
Thanks in advance.

I think it is related to 2. Bindings are now refreshed independently
Now you should use selectedChoice move out from options binding, e.g.
<div data-bind="with: selectedChoice">
<select data-bind="options: stages, optionsText: 'name', value: selectedStage"></select>
</div>