How to set inputType or cellType for specific column&row position in matrix dropdown

[cikcoh]

Are you requesting a feature, reporting a bug or asking a question?

asking a question

What is the current behavior?

able to set cellType only for the whole column

What is the expected behavior?

able to set cellType for specific column&row position

How would you reproduce the current behavior (if this is a bug)?

Provide the test code and the tested page URL (if applicable)

Tested page URL:

Test code

your_code_here

Specify your

• browser:
• browser version:
• surveyjs platform (angular or react or jquery or knockout or vue):
• surveyjs version:

[andrewtelnov]

@cikcoh You have to use survey.onMatrixCellCreated event. Here is the example.

Thank you, Andrew

[cikcoh]

Hi @andrewtelnov , thank you for the example, I already tried it but the event is not fired. does it only works with matrixdynamic? mine is using matrix dropdown. Even when I tried on your plunkr by replacing the type to matrixdropdown, it doesn't render correctly.

Here's my code sample:

  renderSurvey(question3){
    this.questionnarieModel = new Survey.Model(this.surveyJson);
    this.questionnarieModel.showQuestionNumbers = 'off';

    Survey.StylesManager.applyTheme('bootstrap');
    Survey.SurveyNG.render('surveyElement', {
      model: this.questionnarieModel
    });

    this.questionnarieModel.setValue('question3', question3);
    if(this.penyesuaianCounter > 0){
      this.questionnarieModel.setValue('question2', "item1");
    }else{
      this.questionnarieModel.setValue('question2', "item2");
    }
    this.questionnarieModel.onMatrixCellCreated.add(function(sender, options){
      //For the first column only
      console.log('onMatrixCellCreated', options); //EVENT DOES NOT FIRE
      if(options.row.index !== 0) return;
      if(options.column.name == "D8") {
        options.cellQuestion.inputType = "date";
      }
    });

    this.questionnarieModel.onComplete.add((result, options) => {
      this.loading.present('Memuatkan');
      console.log('form', result.data)
      const p3 = result.data;
      p3.tindakan = this.tindakan;
      this.updateSection(p3); 
    });
  }

Here's my json sample: export const part3 = { title: "Penyesuaian Kandungan", pages: [ { name: "SEKSYEN D : PENYESUAIAN ISI RUMAH", elements: [ { type: "panel", name: "panel1", elements: [ { type: "radiogroup", name: "question2", isRequired: true, requiredErrorText: "Sila jawab soalan berikut", title: "SEKSYEN C : TARAF PENYESUAIAN LUAR", choices: [ { value: "item1", text: "Untuk Penyesuaian - Isi Bhg. III Seksyen D (D8)" }, { value: "item2", text: "Bukan untuk Penyesuaian" } ] } ] }, { type: "matrixdropdown", name: "question3", title: "Seksyen D", columns: [ // { // name: "D3", // title: "(D3)", // cellType: "expression" // }, { name: "D4", title: "(D4) eDoc 2 (Banci)", minWidth: "250px" }, // { // name: "D5", // title: "(D5)", // cellType: "expression" // }, { name: "D6", title: "(D6) PLB2 (PLB)", minWidth: "250px" }, { name: "D7", title: "(D7) Perlu penyesuaian luar pejabat", cellType: "expression", minWidth: "50px" // choices: [ // { // value: "item1", // text: "Perlu penyesuaian luar pejabat " // } // ] }, { name: "D8", title: "(D8) Penyesuaian PLB", minWidth: "200px" }, { name: "D9", title: "(D9) Catatan", cellType: "comment", minWidth: "200px" } ], choices: [ 1, 2, 3, 4, 5 ], cellType: "text", rows: [ { value: "Row1", text: "1. Pertalian dengan KIR (Keterangan sahaja)" }, { value: "Row2", text: "2. Jantina" }, { value: "Row3", text: "3. Tarikh Lahir" }, { value: "Row4", text: "4. Kumpulan Etnik (Kod dan Keterangan)" }, { value: "Row5", text: "5. Kewarganegaraan" }, { value: "Row6", text: "6. Taraf Perkahwinan" }, { value: "Row7", text: "7. Agama" } ] } ] } ], showQuestionNumbers: "off", completeText: { default: "Selesai", en: "Complete" }, completedHtml: "<p>Terima kasih kerana telah menyelesaikan survei ini!</p>" }

[andrewtelnov]

@cikcoh Missed the second question. Here is the example for dropdown matrix.

Thank you, Andrew