Modify cell questions/editors in matrix dynamically/on the fly

[andrewtelnov]

Add two events that make possible to have different questions/editors in one column for different rows. The cellType/questionType will be the same, but visible, choices and other properties maybe different and based on values of others columns in the row. Two events:

    /**
     * The event is fired for every cell created in Matrix Dymic and Matrix Dropdown questions.
     * options.question - the matrix question
     * options.cell - the matrix cell
     * options.cellQuestion - the question/editor in the cell. You may customize it, change it's properties, like choices or visible.
     * options.rowValue - the value of the current row. To access the value of paticular column use: options.rowValue["columnValue"]
     * options.column - the matrix column object
     * options.columName - the matrix column name
     * options.row - the matrix row object
     * @see onMatrixCellValueChanged
     * @see QuestionMatrixDynamicModel
     * @see QuestionMatrixDropdownModel
     */
    public onMatrixCellCreated: Event<(sender: SurveyModel, options: any) => any, any> = new Event<(sender: SurveyModel, options: any) => any, any>();
    /**
     * The event is fired when cell value is changed in Matrix Dymic and Matrix Dropdown questions.
     * options.columName - the matrix column name
     * options.value - a new value
     * options.row - the matrix row object
     * getCellQuestion(columnName) - the function that returns the cell question by column name.
     * @see onMatrixRowAdded
     * @see QuestionMatrixDynamicModel
     * @see QuestionMatrixDropdownModel
     */
    public onMatrixCellValueChanged: Event<(sender: SurveyModel, options: any) => any, any> = new Event<(sender: SurveyModel, options: any) => any, any>();

[andrewtelnov]

Here is a demo on plunker: http://plnkr.co/edit/eCNxoNUjNylXebBlEuDX?p=preview

[brydko]

@andrewtelnov there is a strange behaviour of onMatrixCellCreated event as described at the end of #384 thread.

Also there is a detailed description of the issue as well as the plunk which demonstrates the isuue.

[andrewtelnov]

@Kuhax yes, we will take a look at it.

Thank you, Andrew

[cikcoh]

Hi, I have a matrix dropdown question but upon inspecting, onMatrixCellCreated is not fired on the first time after rendering.

but fired on MatrixCellValueChanged event

this.questionnarieModel.onMatrixCellValueChanged.add((survey, options) => { console.log('onMatrixCellValueChanged', options); if(options.columnName === "D8" && options.row.rowName === "Row3"){ options.question.cellType = "date"; //onMatrixCellCreated fired after this line, BUT only for columnName: "D9"?? } });

besides that, options.question.cellType = "date"; doesn't really change the cellType. Can you please advise me on how to do that?

I only want to set the cellType to "date" for column index 0-3 for row index 2 only.

below is my survey json. 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>" }