How to add a div element with id in gridstack widget using knockout.js? - html

Question

I have used http://troolee.github.io/gridstack.js/demo/knockout.html. Now, I want to add my own div elements with id in these widgets. The div elements added to the different widgets will be different based on some conditions. How to do that using knockout.js?

Answer 1

ok not real familiar with this add in. however I started here on codepen.
maybe this can help you get started. http://codepen.io/anon/pen/wJqdBW?editors=0110
so if you hit view source on the original link you sent the widgets were like this.
var widgets = [
{x: 0, y: 0, width: 2, height: 2},
{x: 2, y: 0, width: 4, height: 2},
{x: 6, y: 0, width: 2, height: 4},
{x: 1, y: 2, width: 4, height: 2}
];
but you want to add a widget inside of a widget. so I made a function widget. that has another add widget inside of it
function widget(x,y,width,height){
var self = this;
this.x = ko.observable(x);
this.y = ko.observable(y);
this.width = ko.observable(width);
this.height = ko.observable(height);
this.innerwidgets = ko.observableArray()
this.addNewWidget = function () {
var mywidget = new widget(
0,
0,
Math.floor(1 + 3 * Math.random()),
Math.floor(1 + 3 * Math.random())
)
self.innerwidgets.push(mywidget);
};
}
so now widgets becomes
var widgets = [];
widgets.push(new widget(0,0,2,2));
so now your template changes to put the add button and also adds another foreach loop for your inner widgets.
'<button data-bind="click: addNewWidget">Add inner Div</button>',
'<div class="grid-stack" data-bind="foreach: innerwidgets">',
'<p>New Element</p>',
'</div>',