Why my JqGrid is shrinking while i change the question type? - jqgrid

Question

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.
function QuestionTypeChoice() {
if($("#dropdownQuestionType").val()=="Option")
{
$(".GridDiv").show();
}
else
{
$(".GridDiv").hide();
}
$("#tblSurveyOption").jqGrid({
type: "GET",
url: "/Survey/GetSurveyOptions",
datatype: "json",
async: false,
postData: {
questionId: $('#SurveyQuestionsId').val(),
},
colNames: [
"Id", "SurveyQuestionId", "Sequence", "Option", "Description"
],
colModel: [
{ key: true, name: "SurveyOptionId", index: "SurveyOptionId", editable: false, hidden: true },
{ key: false, name: "SurveyQuestionId", index: "SurveyQuestionId", editable: false, hidden: true },
{ key: false, name: "Sequence", index: "Sequence", editable: true, width: 10 },
{ key: false, name: "OptionValue", index: "OptionValue", editable: true, width: 40 },
{ key: false, name: "Description", index: "Description", editable: true, width: 50 },
],
pager: jQuery("#divSurveyOption"),
rowNum: -1,
scroll: 0,
height: $(window).innerHeight() - 450,
width: '100%',
viewrecords: true,
caption: "Question List Options",
emptyrecords: "No records",
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
autowidth: true,
loadonce: false,
gridview: true,
multiselect: false,
autoencode: true,
ajaxGridOptions: { cache: false },
gridComplete: function () { },
ondblClickRow: function () { }
}).navGrid("#divSurveyOption", { edit: false, add: true, del: true, search: false, refresh: false },
{},
{
// add options
zIndex: 100,
url: "/Survey/CreateOption",
mtype: 'Post',
closeOnEscape: true,
closeAfterAdd: true,
width: 400,
reloadAfterSubmit: true,
serializeEditData: function (data) {
data["SurveyQuestionId"] = $("#SurveyQuestionsId").val();
return $.param(data);
},
beforeSubmit: function (posdata, obj) {
if ($('#Sequence').val() == '' || $('#Sequence').val() == undefined) {
return [false, "Please enter a sequence"];
}
else if ($('#OptionValue').val() == '' || $('#OptionValue').val() == undefined) {
return [false, "Please enter a option"];
}
else if ($('#Description').val() == '' || $('#Description').val() == undefined) {
return [false, "Please enter a description"];
}
else if (CheckSequence(posdata.Sequence)) {
return [false, "Sequence number already exists"];
}
else {
return [true, ""];
}
},
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: "/Survey/DeleteOption?questionId=" + $('#SurveyQuestionsId').val(),
closeOnEscape: true,
closeAfterDelete: true,
recreateForm: true,
msg: "Are you sure you want to delete this?",
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 = $("#tblSurveyOption").jqGrid("getCol", "Sequence");
if (data != null && data.length > 0 && data.indexOf(sequence) != -1) {
return true;
}
else {
return false;
}
}
function ReloadOptionGrid() {
$("#tblSurveyOption").jqGrid('clearGridData');
//Reload grid trigger
$("#tblSurveyOption").setGridParam(
{
url: "/Survey/GetSurveyOptions" + "?questionId=" + $('#SurveyQuestionsId').val()
}).trigger("reloadGrid");
}