title: Why my JqGrid is shrinking while i change the question type?
body: <p>My Question Type contains options: Option, Textual and Value. I have added a functionality in JavaScript that whenever I choose Option in Question Type I get table below the form.  When I am retrieving data directly from the database with Question Type = Option then it is showing table that is fine but when I change my Question Type from Textual or Value to Option for other data, then JqGrid is getting shrinked automatically.
  <a href="https://i.stack.imgur.com/v8NTB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v8NTB.png" alt="enter image description here" /></a></p>
  <pre><code> function QuestionTypeChoice() {
                  if($(&quot;#dropdownQuestionType&quot;).val()==&quot;Option&quot;)
                      {
                          $(&quot;.GridDiv&quot;).show();
                      }
                  else
                      {
                           $(&quot;.GridDiv&quot;).hide();
                      }
                  $(&quot;#tblSurveyOption&quot;).jqGrid({
                  type: &quot;GET&quot;,
                  url: &quot;/Survey/GetSurveyOptions&quot;,
                  datatype: &quot;json&quot;,
                  async: false,
                  postData: {
                      questionId: $('#SurveyQuestionsId').val(),
                  },
                  colNames: [
                     &quot;Id&quot;, &quot;SurveyQuestionId&quot;, &quot;Sequence&quot;, &quot;Option&quot;, &quot;Description&quot;
                  ],
                  colModel: [
                      { key: true, name: &quot;SurveyOptionId&quot;, index: &quot;SurveyOptionId&quot;, editable: false, hidden: true },
                      { key: false, name: &quot;SurveyQuestionId&quot;, index: &quot;SurveyQuestionId&quot;, editable: false, hidden: true },
                      { key: false, name: &quot;Sequence&quot;, index: &quot;Sequence&quot;, editable: true, width: 10 },
                      { key: false, name: &quot;OptionValue&quot;, index: &quot;OptionValue&quot;, editable: true, width: 40 },
                      { key: false, name: &quot;Description&quot;, index: &quot;Description&quot;, editable: true, width: 50 },
                  ],
                  pager: jQuery(&quot;#divSurveyOption&quot;),
                  rowNum: -1,
                  scroll: 0,
                  height: $(window).innerHeight() - 450,
                  width: '100%',
                  viewrecords: true,
                  caption: &quot;Question List Options&quot;,
                  emptyrecords: &quot;No records&quot;,
                  jsonReader: {
                      root: &quot;rows&quot;,
                      page: &quot;page&quot;,
                      total: &quot;total&quot;,
                      records: &quot;records&quot;,
                      repeatitems: false
                  },
                  autowidth: true,
                  loadonce: false,
                  gridview: true,
                  multiselect: false,
                  autoencode: true,
                  ajaxGridOptions: { cache: false },
                  gridComplete: function () { },
                  ondblClickRow: function () { }
              }).navGrid(&quot;#divSurveyOption&quot;, { edit: false, add: true, del: true, search: false, refresh: false },
                  {},
                  {
                      // add options
                      zIndex: 100,
                      url: &quot;/Survey/CreateOption&quot;,
                      mtype: 'Post',
                      closeOnEscape: true,
                      closeAfterAdd: true,
                      width: 400,
                      reloadAfterSubmit: true,
                      serializeEditData: function (data) {
                          data[&quot;SurveyQuestionId&quot;] = $(&quot;#SurveyQuestionsId&quot;).val();
                          return $.param(data);
                      },
                      beforeSubmit: function (posdata, obj) {
                          if ($('#Sequence').val() == '' || $('#Sequence').val() == undefined) {
                              return [false, &quot;Please enter a sequence&quot;];
                          }
                          else if ($('#OptionValue').val() == '' || $('#OptionValue').val() == undefined) {
                              return [false, &quot;Please enter a option&quot;];
                          }
                          else if ($('#Description').val() == '' || $('#Description').val() == undefined) {
                              return [false, &quot;Please enter a description&quot;];
                          }
                          else if (CheckSequence(posdata.Sequence)) {
                              return [false, &quot;Sequence number already exists&quot;];
                          }
                          else {
                              return [true, &quot;&quot;];
                          }
                      },
                      afterComplete: function (response) {
                          if (response.responseText) {
                              var isSuccess = response.responseText.split('~')[0];
                              if (isSuccess == '1') {
                                  toastr.success(response.responseText.split('~')[1]);
                              } else {
                                  toastr.error(response.responseText.split('~')[1]);
                              }
                          }
                      }
                  },
                  {
                      // delete options
                      zIndex: 100,
                      url: &quot;/Survey/DeleteOption?questionId=&quot; + $('#SurveyQuestionsId').val(),
                      closeOnEscape: true,
                      closeAfterDelete: true,
                      recreateForm: true,
                      msg: &quot;Are you sure you want to delete this?&quot;,
                      afterComplete: function (response) {
                          if (response.responseText) {
                              var isSuccess = response.responseText.split('~')[0];
                              if (isSuccess == '1') {
                                  toastr.success(response.responseText.split('~')[1]);
                              } else {
                                  toastr.error(response.responseText.split('~')[1]);
                              }
                          }
                      }
  
                  });
          ReloadOptionGrid();
      }
  
      function CheckSequence(sequence) {
          var data = $(&quot;#tblSurveyOption&quot;).jqGrid(&quot;getCol&quot;, &quot;Sequence&quot;);
          if (data != null &amp;&amp; data.length &gt; 0 &amp;&amp; data.indexOf(sequence) != -1) {
              return true;
          }
          else {
              return false;
          }
      }
  
      function ReloadOptionGrid() {
          $(&quot;#tblSurveyOption&quot;).jqGrid('clearGridData');
  
          //Reload grid trigger
          $(&quot;#tblSurveyOption&quot;).setGridParam(
          {
              url: &quot;/Survey/GetSurveyOptions&quot; + &quot;?questionId=&quot; + $('#SurveyQuestionsId').val()
          }).trigger(&quot;reloadGrid&quot;);
      }
  </code></pre>