widget request "lokesh pretty checkbox"

[dmitry-kurmanov]

https://lokesh-coder.github.io/pretty-checkbox/#basic-checkbox

from the surveyjs/survey-creator#232

[tsv2013]

I've added pretty-checkbox custom widget basic implementation. It works for checkboxes and radiobuttons with limited set of options. The widget inner markup highly depends on the certain pretty-checkbox options. This makes common implementation of this widget too complex IMO.

[tjtaojiang]

@tsv2013, I can't make your version of the widget to work for my case. I am not sure what I miss.

I attached a simplified version of my code, "suyveyjs-form.html" and "surveyjs-form.js" here: surveyjs/survey-creator#232, to show how it works for my case.

Please advise.

[tsv2013]

@tjtaojiang Sorry for delay. I've added example how to integrate pretty-checkbox custom widget. It resides on our site - https://surveyjs.io/Examples/Library/?id=custom-widget-pretty-checkbox&platform=Angular2

As for your implementation of the custom widget - I cann't find binding between question value and the widget control.
I suggest you try to integrate our custom widgets pack into your application.
We'll provide you with the necessary support. Please feel free to contact us in case of any difficulties.

[tjtaojiang]

@tsv2013, binding by: row.value and row.text. In my simplified code, you can run it and see the result.

[tjtaojiang]

@tsv2013, I copy your sample code from your link above and click "Edit in Plunker", for some reason, I still can't make your code to work.

I attached a simplified version from my implementation here for you to see how it work for me:
surveyjs_widget_for_pretty_checkbox.zip.

To answer your previous concern, check row.value and row.text in the js, which I used for data binding.

I think my way has full control in term of custom widget. I just do not know if it will break some surveyjs process , like required filed property, etc. I will keep testing.

Any advise is much appreciated.

[tjtaojiang]

@tsv2013, I noticed a very big bug in your recent changes.

All other types are blocked from addCustomWidget, except "radiogroup" and "checkbox". In other words, in "isFit:", you can only see "radiogroup" and "checkbox" type, other types like "text" will be blocked.

I think you need to fix this issue.

[tsv2013]

@tjtaojiang On this page (https://surveyjs.io/Examples/Library/?id=custom-widget-pretty-checkbox&platform=Angular2) you can find the "Edit in Plunker" button. In this case our site creates a new "ready to run" plunk containing the current sample code.

E.g. after I clicked this button I've got the following plunk with the pretty-checkbox example for angular platform:
https://plnkr.co/edit/chHf8x?p=preview

It works for me ok: "radiogroup" and "checkbox" questions are displayed via the "pretty-checkbox" custom widget and choosen values are saved into survey results.

Does this plunk work for you?

[tsv2013]

@tjtaojiang In the sampe plunk - https://plnkr.co/edit/chHf8x?p=preview
the following lines from the index.html files are responsible for adding the "pretty-checkbox" custom widget functionality:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css"/>
<script src="https://unpkg.com/surveyjs-widgets"></script>

because of the code of our "pretty-checkbox" custom widget implementation is resides in the "https://unpkg.com/surveyjs-widgets" script.

[tsv2013]

@tjtaojiang I've also created a plunk with the code you sent me in the "surveyjs_widget_for_pretty_checkbox.zip" archive.

This is the link to the plunk with your code - https://plnkr.co/edit/e3uqCK?p=preview
I think we can use this plunk as a starting point for the further discussion.

Note that I've commented reference to our custom widgets package (in the index.html file) because you are using your own implementation of the "pretty-checkbox" custom widget:

    <!--<script src="https://unpkg.com/surveyjs-widgets@0.98.4/surveyjs-widgets.js" type="text/javascript"></script>-->

Could you check this plunk also?