search

surveyjs / custom-widgets

The collection of custom widgets for SurveyJS: Survey Library and Survey Creator :package:
https://surveyjs.io
MIT License
79 stars 78 forks source link

(Custom) Widget (sortablejs) doesn't work (mostly) #149

Open MartinLichtblau opened 5 years ago

MartinLichtblau commented 5 years ago

Using widgets is a pain using angular2, both with the widgets library and custom widgets. At least for me trying to integrate sortablejs and barrating. I looked into all examples and found that creating a custom widget gives you more control, yet this doesn't work either.

Why is this error happening only on first load and disappears after reloading (F5) and then successfully showing sortablelist? Error: Cannot find template with ID survey-widget-sortablelist Full Error Log:

Message: Unable to process binding "if: function(){return koCurrentPage }"
Message: Unable to process binding "template: function(){return { name:'survey-page',data:koCurrentPage,afterRender:koAfterRenderPage} }"
Message: Unable to process binding "template: function(){return { name:'survey-rows',data:$data} }"
Message: Unable to process binding "foreach: function(){return { data:rows,as:'row'} }"
Message: Unable to process binding "if: function(){return row.visible }"
Message: Unable to process binding "foreach: function(){return { data:row.elements,as:'question',afterRender:row.koAfterRender} }"
Message: Unable to process binding "if: function(){return question.isVisible }"
Message: Unable to process binding "template: function(){return { name:question.koElementType,data:question,afterRender:$parent.koElementAfterRender} }"
Message: Unable to process binding "template: function(){return { name:question.koTemplateName(),data:question,afterRender:question.koQuestionAfterRender} }"
Message: Cannot find template with ID survey-widget-sortablelist ; Zone: angular ; Task: Promise.then ; Value: ViewWrappedError Error: Error in :0:0 caused by: Unable to process binding "if: function(){return koState() =="running" }"
Message: Unable to process binding "if: function(){return koCurrentPage }"
Message: Unable to process binding "template: function(){return { name:'survey-page',data:koCurrentPage,afterRender:koAfterRenderPage} }"
Message: Unable to process binding "template: function(){return { name:'survey-rows',data:$data} }"
Message: Unable to process binding "foreach: function(){return { data:rows,as:'row'} }"
Message: Unable to process binding "if: function(){return row.visible }"
Message: Unable to process binding "foreach: function(){return { data:row.elements,as:'question',afterRender:row.koAfterRender} }"
Message: Unable to process binding "if: function(){return question.isVisible }"
Message: Unable to process binding "template: function(){return { name:question.koElementType,data:question,afterRender:$parent.koElementAfterRender} }"
Message: Unable to process binding "template: function(){return { name:question.koTemplateName(),data:question,afterRender:question.koQuestionAfterRender} }"
Message: Cannot find template with ID survey-widget-sortablelist
    at ViewWrappedError.ZoneAwareError (http://127.0.0.1:5200/static/node_modules/zone.js/dist/zone.js:992:33)
    at ViewWrappedError.BaseError [as constructor] (http://127.0.0.1:5200/static/node_modules/@angular/core/bundles/core.umd.js:1239:20)
    at ViewWrappedError.WrappedError [as constructor] (http://127.0.0.1:5200/static/node_modules/@angular/core/bundles/core.umd.js:1297:20)
    at new ViewWrappedError (http://127.0.0.1:5200/static/node_modules/@angular/core/bundles/core.umd.js:6167:20)
    at CompiledTemplate.proxyViewClass.DebugAppView._rethrowWithContext (http://127.0.0.1:5200/static/node_modules/@angular/core/bundles/core.umd.js:12385:27)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://127.0.0.1:5200/static/node_modules/@angular/core/bundles/core.umd.js:12358:22)
    at ViewRef_.detectChanges (http://127.0.0.1:5200/static/node_modules/@angular/core/bundles/core.umd.js:9377:24)
    at RouterOutlet.activate (http://127.0.0.1:5200/static/node_modules/@angular/router/bundles/router.umd.js:5058:46)
    at ActivateRoutes.placeComponentIntoOutlet (http://127.0.0.1:5200/static/node_modules/@angular/router/bundles/router.umd.js:4337:20)
    at ActivateRoutes.activateRoutes (http://127.0.0.1:5200/static/node_modules/@angular/router/bundles/router.umd.js:4304:30)
    at eval (http://127.0.0.1:5200/static/node_modules/@angular/router/bundles/router.umd.js:4240:62)
    at Array.forEach (<anonymous>)
    at ActivateRoutes.activateChildRoutes (http://127.0.0.1:5200/static/node_modules/@angular/router/bundles/router.umd.js:4240:33)
    at ActivateRoutes.activateRoutes (http://127.0.0.1:5200/static/node_modules/@angular/router/bundles/router.umd.js:4287:26)
    at eval (http://127.0.0.1:5200/static/node_modules/@angular/router/bundles/router.umd.js:4240:62)

Of course I prefer to use the widgets library. But with it no widgets shows up and no error is thrown; so it's impossible to get it to work.

tsv2013 commented 5 years ago

Have you seen this repo - https://github.com/surveyjs/surveyjs_angular_cli ? It demonstrates custom widgets integration with Angular 2+