0

So, I am trying to do a kendoToolBar with knockout-kendo. I've noticed that the k-overflow-wrapper div gets put at the bottom of the html, so the overflow items are completely out of "knockout" context, and thus none of the bindings work.

I'm at a bit of a loss on how to solve this problem. I don't know of a way to transfer the context programmatically, and I tried to move the k-overflow-wrapper div back into context programmatically, and that is causing the whole toolbar to disappear for some reason. I'm not sure if that would be a viable solution anyways.

<div id="populationPanelIcons" class="panel-icons" data-bind="kendoToolBar:
                {
                    items: [
                        { id: 'addReportingPopulation', overflow: 'never', type: 'button', spriteCssClass: 'add-button', attributes: { 'title': 'Add Reporting Population', 'data-bind': 'click: addReportingPopulation, css:{ disabled: !auth().canCreate() || isMultiEdit() }, enable: auth().canCreate()' } },
                        { id: 'editReportingPopulation', overflow: 'never', type: 'button', spriteCssClass: 'edit-button', attributes: { 'title': 'Edit Reporting Population', 'data-bind': 'click: editReportingPopulation, css: { disabled: !auth().canUpdate() || isMultiEdit() || isNull(activeItem()) }, enable: auth().canUpdate() && !isNull(activeItem())' } },
                        { id: 'deleteReportingPopulation', overflow: 'never', type: 'button', spriteCssClass: 'delete-button', attributes: { 'title': 'Delete Reporting Population(s)', 'data-bind': 'click: deletePopulation, css: { disabled: !auth().canDelete() || isNull(activeItem())  || !canDelete() }, enable: auth().canDelete() && !isNull(activeItem())' } },
                        { id: 'copyReportingPopulation', overflow: 'always', text: 'Copy ', type: 'button', spriteCssClass: 'copy-button', attributes: { 'title': 'Copy Reporting Population', 'data-bind': 'click: copyReportingPopulation, css: { disabled: !auth().canCreate() || isMultiEdit() || isNull(activeItem()) }, enable: auth().canCreate() && !isNull(activeItem())' } },
                        { id: 'populationRecycleIcon', overflow: 'always', type: 'button', text: 'Recycle', spriteCssClass: 'recycle-button', attributes: { 'title': 'Refreshes all population filters for a project in analytics. (Only needed in certain circumstances)', 'data-bind': 'click: recyclePopulations, css: { disabled: !auth().canUpdate() || isMultiEdit()}, enable: auth().canUpdate()' } },
                        { id: 'importReportingPopulations', overflow: 'always', type: 'button', text: 'Import', spriteCssClass: 'import-all-button',  attributes: { 'title': 'Import Reporting Population', 'data-bind': 'click: importReportingPopulations, css: { disabled: isMultiEdit()}' } },
                        { id: 'exportReportingPopulations', overflow: 'always', type: 'button', text: 'Export',  spriteCssClass: 'export-all-button', attributes: { 'title': 'Export Reporting Population(s)', 'data-bind': 'click: exportReportingPopulations'} }
                    ], overflowOpen: function(e) {
                        window.test(e);
                    }}">
            </div>

self.test = function (e) {

        var toMove = $('.k-overflow-container[data-uid=' + e.sender.uid + ']');         

        if (toMove.length) {
            $(e.sender.element).parent().appendTo(toMove.detach());
        };          

    };
Tony
  • 1
  • 1
  • Moving the toolbar back in to the binding context _after_ knockout has applied its bindings won't help you. I'd suggest trying to widen your binding context to include the toolbar. And make sure you're not calling `applyBindings` before you've finished altering the DOM. – user3297291 Jun 01 '16 at 07:20
  • Unfortunately that wouldn't work because it puts the toolbar at very bottom of html and thus there isn't just getting it to be inside one context. It nests down a lot with a few with: bindings. It is fairly complex pages... I think I'm just going to have to give up on using the kendo toolbar with its current implementation and roll something of my own. – Tony Jun 01 '16 at 19:33
  • Have you tried, instead of the `appendTo` line, to manually apply bindings using `ko.applyBindings(viewmodel, e.sender.element)` ? – user3297291 Jun 02 '16 at 09:44

0 Answers0