Q: Google Visualization : How do I perform check/uncheck with google visualization table associated checkbox? Problem:
I am unable to perform the check and uncheck action with google visualization table associated checkbox. The checkboxes are generated dynamically based on the query value.(0/1)
Code:
function drawQuestions(queryResponse, table_container_id) {
            if (queryResponse.isError()) {
                alert('Error in query: ' + queryResponseData.getMessage() + ' ' + queryResponseData.getDetailedMessage());
                return;
            }
            var questionBankResponse = queryResponse.getDataTable();
            if (questionBankResponse.getNumberOfRows() === 0) {
                alert('Empty rows in query: ' + );
                return;
            }
            var questionDataTable = new google.visualization.DataTable();
            questionDataTable.addColumn('string', '');
            questionDataTable.addColumn('string', '');
            questionDataTable.addColumn('string', '');
            var questionDataTableRow = new Array();
            var rowCounter;
            var questionHeader = questionBankResponse.getValue(0, 0);
            for (rowCounter = 0; rowCounter < questionBankResponse.getNumberOfRows() ; rowCounter++) {
                var count = 0 * 1;
                var chbQuestion;
                var questionId = questionBankResponse.getValue(rowCounter, 2);
                var questionName = questionBankResponse.getValue(rowCounter, 3);
                var answerValue = questionBankResponse.getValue(rowCounter, 4);
                var answerOthers = questionBankResponse.getValue(rowCounter, 5);
                if (answerValue === null)
                    answerValue = 0;
                if (answerValue.toString() === "1") {
                    chbQuestion = "<input type=\"checkbox\"" + " id=\"" + questionId + "\" checked=\"true\" />";
                }
                else {
                    chbQuestion = "<input type=\"checkbox\"" + " id=\"" + questionId + "\" />";
                }
                if (isNaN(answerOthers))
                    txtAnswerOthers = "<input type=\"text\"" + "size=\"100\" id=\"" + questionId + "\"" + " value='" + answerOthers + "' name='" + answerOthers + "' />";
                else
                    txtAnswerOthers = null;
                questionDataTableRow[count++] = chbQuestion;
                questionDataTableRow[count++] = questionName;
                questionDataTableRow[count++] = txtAnswerOthers;
                questionDataTable.addRow(questionDataTableRow);
            }
            for (rowCounter = 0; rowCounter < questionDataTable.getNumberOfRows() ; rowCounter++) {
                questionDataTable.setProperty(rowCounter, 0, "style", "width:30px");
                questionDataTable.setProperty(rowCounter, 1, "style", "width:100%");
            }
            var tableObject = new google.visualization.Table(document.getElementById(table_container_id));
            tableObject.draw(questionDataTable, { allowHtml: true, 'cssClassNames': cssClasses, width: '100%', sort: 'disable' });

Issue: Checkbox state has not been changed before and after the click.




Referred: Previous answer reference

A: Finally, I developed a solution for this. Here it is.
First, draw the table using google visualization API then draw the checkbox using HTML dom.
function handleQuestionsSqlQueryResponse(dataQueryQuestionsResponse) {
            if (dataQueryQuestionsResponse.isError()) {
                alert('Error in query: ' + dataQueryQuestionsResponse.getMessage() + ' ' + dataQueryQuestionsResponse.getDetailedMessage());
                return;
            }
            var dtQuestions = dataQueryQuestionsResponse.getDataTable();
            var intNoOfRows = dtQuestions.getNumberOfRows();
            for (intRowCounter = 0; intRowCounter < intNoOfRows ; intRowCounter++) {
                var tblQuestions = new google.visualization.DataTable();
                tblQuestions.addColumn('string', '');
                tblQuestions.addColumn('string', '');
                var arrQuestions = new Array();
                var strQuestionSection = dtQuestions.getValue(intRowCounter, 0);
                var strQuestionDetails = dtQuestions.getValue(intRowCounter, 1);
                if (strQuestionSection !== null && strQuestionDetails !== null) {
                    arrQuestions = strQuestionDetails.split(";");
                    for (var intRowIterator = 0; intRowIterator < arrQuestions.length; intRowIterator++) {
                        var intCount = 0 * 1;
                        var tblQuestionsRow = new Array();
                        var strQuestionNo = arrQuestions[intRowIterator].split("|")[0];
                        var strQuestionName = arrQuestions[intRowIterator].split("|")[1];
                        tblQuestionsRow[intCount++] = strQuestionName;
                        if (strQuestionName === "Other / Unknown? Please Describe:") {
                            tblQuestionsRow[intCount++] = "<input type=\"text\"" + "size=\"30\" id=\"" + strQuestionNo + "Others" + "\"" + " value='' name='" + strQuestionNo + "' disabled />";
                        } else {
                            tblQuestionsRow[intCount++] = null;
                        }
                        tblQuestions.addRow(tblQuestionsRow);
                    }
                    var tableObject = new google.visualization.Table(document.getElementById(strQuestionSection));
                    tableObject.draw(tblQuestions, { allowHtml: true, 'cssClassNames': cssClasses, width: '100%', sort: 'disable' });
                }
            }
            for (intRowCounter = 0; intRowCounter < intNoOfRows ; intRowCounter++) {
                var intQuestionValue = 0;
                var strQuestionSection = dtQuestions.getValue(intRowCounter, 0);
                var strQuestionDetails = dtQuestions.getValue(intRowCounter, 1);
                var tblContainer = document.getElementById(strQuestionSection);
                var tblReference = tblContainer.getElementsByTagName('TBODY')[0];
                arrQuestions = strQuestionDetails.split(";");
                for (var intRowIterator = 0; intRowIterator < arrQuestions.length; intRowIterator++) {
                    var tblRow = tblReference.rows[intRowIterator];
                    var tblCheckBox = tblRow.insertCell(0);
                    var strQuestionNo = arrQuestions[intRowIterator].split("|")[0];
                    if (strQuestionNo !== null) {
                        tblCheckBox.innerHTML = "<input type=\"checkbox\"" + " id=\"" + strQuestionNo + "\" name=\"" + strQuestionNo + "\" value=\"" +
                                                        intQuestionValue + "\" onchange=\"doCheckOrUnCheck('" + strQuestionNo + "');\" />";
                    }
                }
            }

        }

