I need to create a table with dynamically adding rows.
But I need to have a fixed table header that I got dynamically from JSON and table body also generated dynamically.
Here is JSON example
data = [
{
id: 0,
title: "control0",
text: "text 0"
},
{
id: 1,
title: "control1",
text: "text 1"
},
{
id: 2,
title: "control2",
text: "text 2"
},
{
id: 3,
title: "control3",
text: "text 3"
}
]
I try to create method, but I get new column instead of ROW
addRow(index, name) {
this.newDynamic = { id: index, name: name, text: "name" + index };
this.data.push(this.newDynamic);
return true;
}
Here is how now it is looking
But I need like this
When we click on button ADD ROW, I want to add new row but without title (like on picture), but update JSON with new object.
Here is stackblitz for example
Related
I have an array in which I have some string value holding the id along with answer selected and I have different object in which I have the detail about answer which is selected. The below array keep updated whenever we select an option from question.
arr = ["Q1A1", "Q2A3"]
assume Q1 is Question no. 1 and A1 is option selected from the question. And below I have an object for the corresponding Q1 which contained the detail about answers and this object also get change as we move over to Q2
{
id: "Q1",
answers: [
{
id: "Q1A1",
text: "Yes"
},
{
id: "Q1A2",
text: "No"
}
]
}
same way I have any another object for Q2 if we select the answer in Q1, now we have different object for Q2
{
id: "Q2",
answers: [
{
id: "Q2A1",
text: "Test 1"
},
{
id: "Q2A2",
text: "Test 2"
},
{
id: "Q2A3",
text: "Test 3"
},
{
id: "Q2A4",
text: "Test 4"
}
]
}
I need to lookup the object with the help of array which contain question and answer(eg, "Q1A1") with selected and need to find the text for answer selected i.e ("Yes") if u look into the above object for question 1. Hence I need put into the array like this way.
result = ["Q1_Yes","Q2_Test3"]
This code will help you to get those results.
let selected = ["Q1A1", "Q2A3"];
let QA = [
{
id: "Q1",
answers: [
{
id: "Q1A1",
text: "Yes"
},
{
id: "Q1A2",
text: "No"
}
]
},
{
id: "Q2",
answers: [
{
id: "Q2A1",
text: "Test 1"
},
{
id: "Q2A2",
text: "Test 2"
},
{
id: "Q2A3",
text: "Test 3"
},
{
id: "Q2A4",
text: "Test 4"
}
]
}
];
let all_answers = QA.reduce((allanswers,qa)=>(qa.answers.map(d=> allanswers[d.id]=[qa.id,d.text]),allanswers),{});
const result = selected.map(selected => all_answers[selected].join('_'))
console.log(result)
I am trying to search and filter data in datatable based on two columns.
Below is the code that I am using for search and redrawing the datatable.
(http://live.datatables.net/hapijuri/1/edit)
$(document).ready( function () {
var table = $('#example').DataTable({
"columns": [
{ title: 'title0', name: 'name0'},
{ title: 'title1', name: 'name1'},
{ title: 'title2', name: 'name2'},
{ title: 'title3', name: 'name3'},
{ title: 'title4', name: 'name4'},
{ title: 'title5', name: 'name5'},
]
});
table.column(1).search('Software Engineer')
.column(0).search('Bradley Greer').draw();
} );
The problem with this code is that it works on the column number (or index) and not on column name, however I have the column names on which I want to search.
Is there any way to search based on column name instead of index in datatables jquery?
Edit: Providing additional details to make sure I am able to present the question well.
So I have a datatable shown on UI and I am building a pivot table (using pivottable.js) in another tab using the datatable data.
On clicking the numbers in the pivot, I want the datatable data on the UI to be filtered so that it shows only those rows which are relevant to the number being clicked in pivot.
I am getting the column name and value corresponding to that number from pivot. I just need to search those column values in the datatable and show the filter the datatable accordingly.
As pointed in the example link that I shared, I am able to search through the data based on column index and the same is getting reflected on the UI.
What I am looking for is searching based on column name instead of column value.
For preventing a column being searched from table you have to add searchable:false. by default value of searchable & orderable is true.
var table = $('#example').DataTable({
"columns": [
{ title: 'title0', name: 'name0', "searchable": true},
{ title: 'title1', name: 'name1'},
{ title: 'title2', name: 'name2'},
{ title: 'title3', name: 'name3'},
{ title: 'title4', name: 'name4'},
{ title: 'title5', name: 'name5'},
]
});
no need to add below code unless you have server side data processing.
table.column(1).search('Software Engineer')
.column(0).search('Bradley Greer').draw();
Search a datatable using the column name
var table = $('#datatable-name').DataTable();
table.column('columnname:name').search("keyword").draw();
I'm planning to use Bootstrap Treeview where the Json is expected as below.
I need to dynamically add element to the "tree" based on respective input nodes
var tree = {};
tree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1",
nodes : [
{
text : "GrandChild 3"
}
]
},
{
text: "Grandchild 2",
nodes : [
{
text : "GrandChild 4"
}
]
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5"
}
];
I've tried array.reduce() but couldn't make that work.
Looking for some approach
Manually, you could do this:
alert(tree[0].nodes[0].nodes[0].nodes[0].text);// alerts "GrandChild 3"
// add a node array:
tree[0].nodes[0].nodes[0].nodes[0].nodes = [{
text: "GrandChild NEW First"
}];
console.dir(tree);
Shows:
Array[5]0: Object nodes: Array[2]0: Object nodes: Array[2]0: Object nodes: Array[1]0: Object nodes: Array[1]0: Object text: "GrandChild NEW First" _proto__: Object length: 1__proto__: Array[0]text: "GrandChild 3" _proto__: Object length: 1
Do same to array 1:
Array[5]
1: Object
nodes : Array[1]
text : "Parent 2"
tree[1].nodes = [{
text: "GrandChild NEW Second"
}];
Now you just need code to determine the depth of nodes and what to add (node or text or both) at that point.
EDIT If it makes it clearer, the last addition can also be done thus:
Add a new node array, then push a value into that
tree[1].nodes = [];
tree[1].nodes.push({
text: "GrandChild NEW Second"
});
Edit 2 Link to Plunkr
Because of the nature of the snippet editor, the code below will not work on the snippet editor, but in order to ensure that the code does not magically vanish from plunkr, I've included it below. All you need to do is include jquery, bootstrap's css file, the treeview css, and treeview js file.
Some Issues
This may just be because I have never used treeview before in my life, but if you have opened up anything on the treeview or selected something, by adding in the new element you erase any of that action. Going through it quickly I didn't see a way to simply rebuild the node list (our tree variable) from the current states. I attempted to pass a pre-defined nodeId to see if we could make the changes directly onto the parent tree variable by using the get[State] commands but the id seems to be generated by the rendering aspect and is not carried over. (to clarify: I gave parent 1 a node id of 1, but when I called a couple of calls on it, I got that it's node id was 0)
The id convention seems to start at the first element (nodeId=0). It first then goes through the children (if any) of that node, incrementing the nodeId as it goes. Theoretically it would be a simple enough script to go back and enumerate the nodeId's manually so that you can make state changes so that the re-render looks the same as before, minus a newly appended node somewhere.
var tree = [{
text: "Parent 1",
nodes: [{
text: "Child 1",
nodes: [{
text: "Grandchild 1",
nodes: [{
text: "GrandChild 3"
}]
}, {
text: "Grandchild 2",
nodes: [{
text: "GrandChild 4"
}]
}]
}, {
text: "Child 2"
}]
}, {
text: "Parent 2"
}, {
text: "Parent 3"
}, {
text: "Parent 4"
}, {
text: "Parent 5"
}];
$(document).ready(function() {
$('#test').treeview({
data: tree
});
$('button.btn-primary').on('click', function() {
tree.push({
text: 'Parent ' + (tree.length + 1)
});
$('#test').treeview({
data: tree
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<button class="btn btn-primary">Add Something</button>
<div id="test"></div>
Edit 1
After reading through the OP's question, I'm not 100% that the code below answers what they were looking for. I've asked for further clarification and will keep this answer here until I know more.
Original
I've got some code working on a code pen Here, but I will add it to the snippet editor.
var tree = [{
text: "Parent 1",
nodes: [{
text: "Child 1",
nodes: [{
text: "Grandchild 1",
nodes: [{
text: "GrandChild 3"
}]
}, {
text: "Grandchild 2",
nodes: [{
text: "GrandChild 4"
}]
}]
}, {
text: "Child 2"
}]
}, {
text: "Parent 2"
}, {
text: "Parent 3"
}, {
text: "Parent 4"
}, {
text: "Parent 5"
}];
function recursive_tree(data, tag, child_wrapper, level) {
var html = [];
//return html array;
level = level || 0;
child_wrapper = (child_wrapper != false) ? child_wrapper : 'ul';
$.each(data, function(i, obj) {
var el = $('<' + tag + '>');
el.html(obj.text);
if (obj.hasOwnProperty('nodes')) {
var wrapper = $('<' + child_wrapper + '>');
var els = recursive_tree(obj.nodes, tag, child_wrapper);
wrapper.append(els);
wrapper.appendTo(el);
}
html.push(el);
});
return html;
}
$(document).ready(function() {
var html = recursive_tree(tree, 'li', 'ul');
console.log(html);
$('#parent').append(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="parent"></ul>
What you're looking for is something called Recursion, and it's used a lot for things exactly like this. There tends to be a nested/self similar structure.
This should be enough for a basic idea of what to do, from here it's really change the html that gets created. I've never used Bootstrap Treeview, so I have no idea how it is setup HTML wise, otherwise I'd have this be a bit more exact.
I've written a sandbox of what I am talking about here: http://jsfiddle.net/smgd6z4k/51/
I'm new to AngularJS and I want to be able to take advantage of what is available.
I made a context menu and I would like to switch the context of the menu depending on which option has been clicked. I suppose this is an organization question.
I have a persistent "slider" which updates its contents based on what "option" button is clicked. I would like each option to populate the slider using html, so I can stylize specific menus.
To populate the "slider" should I:
1) Clear the slider and insert a directive that contains the links on click.
E.G. Clicking on "Option 1" clears the slider and inserts an option-1 directive, which contains all the links.
2) Store options html in a string within a hash table and map a click to an html string.
var opt1 = ["Opt 1, Sub 1"];
var opt2 = ["Opt 2, Sub 1", "Opt 2, Sub 2"];
var opt3 = ["Opt 3, Sub 1"];
var opt4 = ["Opt 4, Sub 1", "Opt 4, Sub 2"];
I have a terrible case table that changes the context by pointing to a different array, and then iterating through that array. Not ideal.
switch (e) {
case "Option 1":
display = opt1;
break;
case "Option 2":
display = opt2;
break;
case "Option 3":
display = opt3;
break;
case "Option 4":
display = opt4;
break;
default:
display = opt1;
break;
}
3) Other options?
$scope.menu.root = {
title: 'root',
items: [
{
title: 'Option 1',
items: [
{ title: 'Sub 1' }
]
},
{
title: 'Option 2',
items: [
{ title: 'Sub 1' },
{ title: 'Sub 2' }
]
},
{
title: 'Option 3',
items: [
{ title: 'Sub 1' }
]
},
{
title: 'Option 4',
items: [
{ title: 'Sub 1' },
{ title: 'Sub 2' }
]
}
]
};
$scope.menu.current = $scope.menu.root;
You can populate your slider with a for in the $scope.menu.current and change the current from root to one of the items. This allow you to have more levels and update the slider just by edit the $scope.menu.root object.
I have created a kendo.data.dataSource with success, and I am able to bind it to the KendoUI Grid on my page.
But when I try to dataSource.insert(0, [a : "b"]); it removes the data that was there previously.
My example code follows:
var tempSource = new kendo.data.DataSource({
data: [{"ID":1,"Name":"Cliente 1","NameID":"1 - Cliente 1"},{"ID":2,"Name":"Cliente 2","NameID":"2 - Cliente 2"}]
});
This is how I'm binding to the grid:
$("#association-grid").kendoGrid({
height: 99,
columns:
[
{
field: "ID",
title: "ID"
},
{
field: "Name",
title: "Name"
},
{
field: "NameID",
title: "NameID"
}
],
dataSource: tempSource
});
This is how I add a new item:
tempSource.insert(0, { ID: "John Smith", Name: "Product Description", NameID: "123 1st Street" });
If I perform the add before binding the data to the Grid, I lose the first two items that were originally on the dataSource object.
In summary:
I have a pre-created dataSource binded to a Grid. I want to be able to add a new item to the dataSource, and then refresh the Grid so that the new item appears.
Thanks,
VRC
try this:
dataSource.add({ name: "John Smith", description: "Product Description", address: "123 1st Street" });
var grid = $("#itemsGrid").data("kendoGrid");
for (var i = 0; i < data.length; i++) {
grid.dataSource.insert(data[i]);
}
inserting new record to grid datasource