Custom widgets in matrixdynamic

[brydko]

Hello, my intention is to embed select2tagbox in matrixdynamic. Is there any generic way to do so?

Using JQuery I'm trying to override the 'cellType' property of matrixdropdownbase class

JsonObject.metaData.addClass("matrixdropdownbase", [ ..... { name: "cellType", default: "dropdown", choices: ["dropdown", "checkbox", "radiogroup", "text", "comment"] } ..... ],

with select2tagbox property (as mentioned in the select2tagbox example) but I'm not sure if it'll work.

Is this feasible ?

[andrewtelnov]

@Kuhax Do you want to replace a checkbox by select2tag widget?

Thank you,
Andrew

[brydko]

@andrewtelnov I was thinking about overriding any of the default choices available for matrixdynamic: ["dropdown", "checkbox", "radiogroup", "text", "comment"]. I thought that implementation-wise dropdown was the simpliest to be overriden by select2tag (since the latter extends dropdown). However, in the end my goal is to be able to add a select2tag column to matrixdynamic.

If you can provide an option to replace a checkbox by select2tag that would be fantastic.

[andrewtelnov]

@Kuhax I think we have to make a demo. Probably, I am not sure, we will have to modify the library to be able to do it.
I am adding the demo into our TODO list. If I don't comeback on the next week, please ping me.
Do you have a deadline?

Thank you,
Andrew

[brydko]

@andrewtelnov a demo sounds good. As of today I don't have an urgent deadline, I'm on "when it's done" mode. Certainly it would be nice to have this feature implemented.

[nategasm]

@andrewtelnov Is it also possible to add a demo on using the jqueryUI datepicker in matrixdynamic? I can't seem to get this to work as well.

[andrewtelnov]

@nategasm Yes, we will make it work as well.

Thank you,
Andrew

[nategasm]

I've noticed this enhancement was added in the new version but the datepicker still isn't working as intended. What happens is when you add additional rows and change the date, it will only change the date of the first row. A similar (but maybe separate) issue also happens when you have more than one datepicker field in the survey, in this case it will only update the first datepicker field even if you change the 2nd.

In general the datepicker widget I find is very buggy and fiddly to use with surveyjs especially when you have a lot of them in a survey. It would be great if there were a built in/native datepicker question type.

[tsv2013]

@nategasm I've just tested jQueryUI DatePicker in the matrixdymanic question. The problem was in the widget-datepicker id attrubute that has being used in the template and used as selector for jQuery widget creation.
After changed to the css class, multiple DatePickers work ok for me in matrixdymanic. Can you check this plunk: http://plnkr.co/edit/KDQZBx3zvJTtprzpQvd4?p=preview ?
If it's ok for you, I'll update corresponding example.

[brydko]

@tsv2013 DatePickers as shown in the plunk look good to me.

However, I was unable to make select2tagbox work in matrixdynamic.

[tsv2013]

@Kuhax ok, I'll add select2tagbox in the sample plunk.

[tsv2013]

@Kuhax I've updated the http://plnkr.co/edit/KDQZBx3zvJTtprzpQvd4?p=preview plunk with select2. Can you check it?

[nategasm]

@tsv2013 I've had a look at your plunk and it works great thank you.
I'm now trying to use the dateFormat (dd/mm/yyyy) property with matrixdynamic but it does not seem to be working fully.
Check my fiddle: https://jsfiddle.net/mo2pg19h/1/
It works fine for the first textbox but it seems to get the day/month/year mixed up in the matrix when you try to change it.

[tsv2013]

@nategasm This code:

Survey.JsonObject.metaData.addProperty("text", {
	  name: "dateFormat",
	  default: "dd/mm/yy",
	  choices: ["dd/mm/yy", "mm/dd/yy", "yy-mm-dd", "d M, y", "d MM, y", "DD, d MM, yy", "'day' d 'of' MM 'in the year' yy"]
	});

adds properties for ordinary questions only and doesn't affect inner matrix questions. We need to discuss it with @andrewtelnov.

[brydko]

@tsv2013 I have checked the plunk and it works flawlessly. Thanks

[tsv2013]

@nategasm I've updated your fiddle to make it work - https://jsfiddle.net/mo2pg19h/3/

I've added declaration for a new property for matrix column:

	Survey.JsonObject.metaData.addProperty("matrixdropdowncolumn", {
	  name: "dateFormat",
	  default: "dd/mm/yy",
	  choices: ["dd/mm/yy", "mm/dd/yy", "yy-mm-dd", "d M, y", "d MM, y", "DD, d MM, yy", "'day' d 'of' MM 'in the year' yy"]
	});

And added onMatrixCellCreated event handler to pass property value from column options to the created cell:

  survey.onMatrixCellCreated.add(function(model, options) {
		if(options.column.cellType === 'text'  ) {
    	options.cellQuestion.dateFormat = options.column.dateFormat;
    }
  });

Does it fit your needs?

[andrewtelnov]

@nategasm If you are using your own editor. You may add the dateFormat property into Editor as:
SurveyQuestionEditorDefinition.definition["matrixdropdowncolumn@text"].properties.push("dateFormat");

PS: We are using dev version. I have added onMatrixCellCreated event just yesterday. We will release a new version in few days.

Thank you,
Andrew

[nategasm]

@tsv2013 Thanks, that seems to work, but I have updated the fiddle again with another issue where the values aren't saved when you switch between pages: https://jsfiddle.net/mo2pg19h/4/

[tsv2013]

@nategasm Thank you for the fiddle. I'll take a look.

[tsv2013]

@nategasm I guess the thing was in the following code:

	    if (question.name === 'textDate') {
	      convertDate = new Date();
              widget.datepicker('setDate', convertDate);
	    }

It is executed for the question with 'textDate' name only and hence only for one quetion in the survey. And thst's why initial values were not being set on the second page.

I've commented the code above and added the following line:
question.valueChangedCallback();
Please check the updated fiddle: https://jsfiddle.net/mo2pg19h/5/

[nategasm]

@tsv2013 That seems to almost work, but there are still some really weird issues in that fiddle.
Here is one example with exact steps:
On page 1 fill out the first matrix row completely
Add a second row, fill in 1st column, then 2nd column.
After filling 2nd column, the date value of the first row is cleared.
If you continue changing the values on the 2nd row, it will then sometimes change the values on the 1st row.

Another example:
Fill out 1 row of matrix on page 1.
Go to page 2 and fill out 1 matrix row.
Go back to page 1 and the date value is gone.

[tsv2013]

I've changed value change subscription to the native jQuery DatePicker event (http://api.jqueryui.com/datepicker/#option-onSelect):

	    //widget.on("change", function(e) {
	    //  question.value = $(this).val();
	    //});
	    var widget = $(el).find('.widget-datepicker').datepicker({
	      dateFormat: question.dateFormat,
              onSelect: function(dateText) {
                question.value = dateText;
              }
	    });

After these changes the updated fiddle https://jsfiddle.net/mpy52s1u/3/ works ok for me :)
Can you check it?

[nategasm]

@tsv2013 Everything finally works fine now. Thanks so much! Would probably help others if you updated the surveyjs.org datepicker example to use the same properties.

[tsv2013]

I've update examples on the surveyjs.org.

[brydko]

@tsv2013 I have a small issue with a rendering condition of select2tagbox. In your plunk the condition is isFit : function(question) { return question.name === 'subject'; },

I would prefer it to be like isFit : function(question) { return question["renderAs"] === 'select2tagbox'; }, which does not work right now as it is with matrixdynamic.

[tsv2013]

@Kuhax This had been discussed in this comment above #384 (comment)

"renderAs" custom property is not set for cell questions. You can do it on the onMatrixCellCreated event handler to pass property value from column options to the created cell:

  survey.onMatrixCellCreated.add(function(model, options) {
		if(options.column.cellType === 'dropdown'  ) {
    	options.cellQuestion.renderAs = options.column.renderAs ;
    }
  });

The column property should be declared as

	Survey.JsonObject.metaData.addProperty("matrixdropdowncolumn", {
	  name: "renderAs",
	  default: "default",
	  choices: ["default", "select2tagbox"]
	});

And for the certain cloumn you can set the "renderAs" ptoperty to the "select2tagbox".

[brydko]

@tsv2013 I have tried your suggestions on this plunk but it just won't work. Do you mind check this out, please ?

Thanks in advance.

[tsv2013]

@Kuhax Sure. It's very strange - in this case onMatrixCellCreated event fires too late - after cell controls have been created. I need to check our sources.

[tsv2013]

@Kuhax we've discussed this with @andrewtelnov and decided to pass properties from column description to the cell quesion. I'll implement it ASAP.

[brydko]

@tsv2013 thank you very much. I'm really looking forward to this.

[tsv2013]

@Kuhax I've added necessary code in our core library and updated dev version on our cdn - you can check the plunk: http://plnkr.co/edit/HZgXdp?p=preview
Fix will be available in the nearest update.

[brydko]

@tsv2013 thanks. I have checked it out and it works as expected now. However I've found another issue with rendering previously saved results. Please take a look at this plunk Notice that on line 100 I am trying to load a previously saved survey. In the first question there are 3 answers ("English: British and World Literature","Math: Practical Math","someOtherValue"). Notice that "someOtherValue" was introduced manually and was saved correctly. However it won't appear on the survey afterwards.

It seems that custom values (which are not in the list) are not rendered by default.

[brydko]

@tsv2013 after some tinkering I think the issue lays in line 69

$el.select2({tags: "true", data: question.visibleChoices.map(function(choice) { return { id: choice.value, text: choice.text }; })});

Looks like question.visibleChoices.map leaves out custom values and takes only ones that exist in the list.

Is there any other other way to assign all the values to data ?

Thanks

[tsv2013]

Hi @Kuhax I've slightly modified the plunk, now it takes the "other values" in account in the choicesChangedCallback. Can you check it?

[brydko]

@tsv2013 I have just modified select2 widget in my survey following your suggestions and it worked straight away. Custom values (or tags) are now saved and rendered correctly.

Thanks for your help.

[tsv2013]

@Kuhax Glad to hear it!

[brydko]

@tsv2013 I have found one issue with rendering of saved results. Take a look an this plunk I have added "value" and "text" to the options. When a survey is rendered with saved values, both values and text appear in the select2 widget.

[tsv2013]

@Kuhax I've fixed it in this plunk. You can check it.
Ive patched choicesChangedCallback function:

        question.choicesChangedCallback = function() {
            var choices = question.visibleChoices.map(function(choice) {
                return { id: choice.value, text: choice.text };
              });
            (question.value || []).forEach(function(valueItem) {
              if(choices.filter(function(choice) { return choice.text === valueItem || choice.id === valueItem; }).length === 0) {
                choices.push({ id: valueItem, text: valueItem });
              }
            });
            $el.select2({
              tags: "true",
              data: choices
            });
        }

Now choices is filtered not be text only, but by id also.

[brydko]

@tsv2013 I have tried it and it works perfectly. Maybe it's a good idea to document this feature because it's pretty cool.

Thanks !

[jack-handley]

I've found an issue with my application where I'm trying to use a custom widget within a dynamic matrix. It seems to also exist in the plunk mentioned above (plunk) so thought you might be able to offer some advice.

If you have multiple rows in the dynamic matrix and then click the remove button on the first row the last row gets removed. Other rows will do the same, always removing the last row. Interestingly, the correct element in the dynamic matrix data array is removed i.e. the data is correct but the display is wrong.

I've seen this issue in IE and Firefox. Any help would be greatly appreciated.

[dmitry-kurmanov]

@Kichi93, hello! I've created separate issue for this problem. #549

[dmitry-kurmanov]

@andrewtelnov, @tsv2013 Do we need to add final plnkr into site's examples?

[ashygk]

Hi, i am able to add datepicker with custom widgets that use jquery but im not able to use icon trigger for datepicker. could you please help me out on the same.

[SaharDastitash]

Hello @andrewtelnov , Does the date type input have a specific attribute to set that it's textbox show the current date as a default value instead of mm/dd/yyyy ? I tried couple of times setting it's value or placeholder to NOW with jquery but none of them worked, Please Advice. Thanks

[andrewtelnov]

@SaharDastitash Here is the code:

survey.onMatrixCellCreated.add(function(sender, options){
  if(options.columnName == "Date") {
    if(options.cellQuestion.isEmpty()) {
      var month = new Date().getMonth().toString();
      if(month.length < 2) month = '0' + month;
      var day = new Date().getDate().toString();
      if(day.length < 2) day = '0' + day;
      options.cellQuestion.value = new Date().getFullYear() + '-' + month + '-' + day;
    }
  }
});

Please create a seperate issue.

Thank you,
Andrew

[SaharDastitash]

@andrewtelnov This is actually what I meant?

Please find the new Issue in below link:
#1299