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

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?

Find the gridstack source code and modify it to add a div. You should add more information because it's not clear what you're asking. — Jason Spake, Mar 14 '17 at 15:18
I want to add a div element inside the widgets created by the gridstack and the div element should have an id. The added div element should be different for different gridstack widgets i.e. no two gridstack widget would have the same div element. — manish choudhary, Mar 15 '17 at 06:00

score 0 · Answer 1 · answered Mar 14 '17 at 15:51

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>',

Thanks @Bryan Dellinger for the response. Instead of adding a widget inside the outer widget, I want to put a div element inside the outer widget and the div element should also have an id. I have to use this div element(inside the outer widget) to create some charts. — manish choudhary, Mar 15 '17 at 07:38

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

1 Answers1