Pass Id from Textbox to Grid Inside the same Popup Window

Question

Hello,

 

I would like to ask about passing the ID to Kendo grid inside the same kendo popup window. I have a popup window where it contain;

 

1. Input textbox to set the question.

2. Grid to set the answers (multiple choice).

 

(Refer Add Question.PNG)

 

 

Both are from the different tables in database And the tables are connected using QuizQuestionId inside the Answer Table.

 

(Refer Question.PNG) and (Refer Answer Table.PNG)

 

My problem is, I cannot add the answer inside because I dont have the QuizQuestionId (because I dont add the question yet into the database since both question and answer are inside the same window)

 

However, when I click Next button, I can save my question

 

My question is is there any way to solve my problem ?

 

Please let me know if you have any question about this.

 

Thank you.

 

This is my next button function

function SaveAndGetNextQuestion(quizId, questionId) {
//alert('Quiz ID: ' + quizId + '\nQuestion ID: ' + questionId);
_url = "@Url.Action("", "QuizQUestion")",
isCreateOperation = questionId == null;
if (isCreateOperation)
_url = _url + "/Create";
else
_url = _url + "/Edit";
$.ajax({
method: "POST",
url: _url,
data: {
QuizId: quizId,
Id: questionId,
Question: $("#Question").val(),
QuestionTypeId: $("#QuestionTypeId").val(),
//QuestionNumber: Ques
}
}).done(function (response) {
console.log("respond", response);
if (response.IsSucceeded == true) {
console.log(response)
$("#questionWin").data("kendoWindow").close();
if (isCreateOperation !== null) {
//Ajax request to Get Guestions for Quiz
//Open question window
//e.preventDefault();
var questionTemplate = kendo.template($("#NextQuestionTemplate").html());
$.ajax({
method: "GET",
url: "@Url.Action("GetQuestionByQuizId", "QuizQuestion")",
data: { QuizId: quizId }
})
.done(function (question) {
var questionWnd = $("#questionWin").data("kendoWindow");
questionData = { QuizId: quizId, Id: questionId };
if (question == null) {
// Create Mode
questionWnd.content(questionTemplate(questionData));
}
else { // Edit Mode
questionWnd.content(questionTemplate(questionData));
}
questionWnd.center().open();
}).fail(function (msg) {
result.html("Oops! operation is failed");
result.show();
})
}
}
else {
// display Error messages
var ul = $("<ul />");
$.each(response.Message, function (index, item) {
ul.append($("<li />").html("<span>" + item + "</span>"));
});
var status = $(".result-status");
status.append(ul);
status.addClass("text-danger");
}
}).fail(function (msg) {
result.html("Oops! operation is failed");
result.show();
});
return questionId;

This is my view inside the popup window

<script type="text/x-kendo-template" id="NextQuestionTemplate">
<div class="form-group">
<!--Question Type-->
<div class="col-md-10">
<div class="k-edit-label col-md-2">
<label for="QuestionTypeId">Quiz Type</label>
</div>
<div class="editor-field col-md-6">
@(Html.Kendo().DropDownList()
.DataTextField("Name")
.DataValueField("Id")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetQuestionTypeList", "ListService");
});
})
.Name("QuestionTypeId").ToClientTemplate()
)
</div>
</div>
<!--Question-->
<div class="col-md-10">
<div class="k-edit-label col-md-2">
<label for="QuestionId"> Question </label>
</div>
<div class="editor-field col-md-6">
<textarea class="k-textbox"
data-val="true"
id="Question"
name="Question" rows="5" cols="50">#= data.Question #</textarea>
</div>
<br />
</div>
<br />
<div class="col-md-11">
@(Html.Kendo().Grid<Optivolve.ERP.BusinessModel.Learning.QuizAnswerViewModel>
()
.Name("answerGrid")
.Columns(columns =>
{
// columns.Bound(p => p.IsCorrectAnswer);
columns.Bound(p => p.Answer).Width(100);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable().AutoBind(false)
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => { model.Id(p => p.Id); })
.ServerOperation(true)
.Create(update => update.Action("Create", "QuizAnswer"))
.Read(read => read.Action("Read", "QuizAnswer"))
.Update(update => update.Action("Edit", "QuizAnswer"))
.Destroy(update => update.Action("Delete", "QuizAnswer")
)).ToClientTemplate()
)
</div>
<!--Button-->
<div class="col-md-10 text-center" style="margin-top:10px">
<button class="k-button k-button-icontext" id="btn_back" onclick="Back(#=data.QuizId# , #=data.Id#)">Back</button>
<button class="k-button k-button-icontext" id="btn_nextQuestion"onclick="SaveAndGetNextQuestion(#= data.QuizId #, #= data.Id #)">Next</button>
<button class="k-button k-button-icontext" id="btn_finish"onclick="Finish()">Finish</button>
</div>
</div>
</script>