Pass Id from Textbox to Grid Inside the same Popup Window

[nur amalina]

Hello,
I would like to ask about to grid inside the 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

01.function SaveAndGetNextQuestion(quizId, questionId) {
02.
03.
04.       //alert('Quiz ID: ' + quizId + '\nQuestion ID: ' + questionId);
05.
06.           _url = "@Url.Action("", "QuizQUestion")",
07.           isCreateOperation = questionId == null;
08.           if (isCreateOperation)
09.           _url = _url + "/Create";
10.           else
11.           _url = _url + "/Edit";
12.           $.ajax({
13.           method: "POST",
14.           url: _url,
15.           data: {
16.           QuizId: quizId,
17.           Id: questionId,
18.           Question: $("#Question").val(),
19.           QuestionTypeId: $("#QuestionTypeId").val(),
20.           //QuestionNumber: Ques
21.           }
22.           }).done(function (response) {
23.               console.log("respond", response);
24.               if (response.IsSucceeded == true) {
25.                   console.log(response)
26.           $("#questionWin").data("kendoWindow").close();
27.                   if (isCreateOperation !== null) {
28.
29.           //Ajax request to Get Guestions for Quiz
30.           //Open question window
31.           //e.preventDefault();
32.           var questionTemplate = kendo.template($("#NextQuestionTemplate").html());
33.
34.           $.ajax({
35.           method: "GET",
36.           url: "@Url.Action("GetQuestionByQuizId", "QuizQuestion")",
37.               data: { QuizId: quizId }
38.           })
39.           .done(function (question) {
40.
41.           var questionWnd = $("#questionWin").data("kendoWindow");
42.               questionData = { QuizId: quizId, Id: questionId };
43.           if (question == null) {
44.           // Create Mode
45.
46.           questionWnd.content(questionTemplate(questionData));
47.           }
48.           else { // Edit Mode
49.           questionWnd.content(questionTemplate(questionData));
50.           }
51.           questionWnd.center().open();
52.           }).fail(function (msg) {
53.           result.html("Oops! operation is failed");
54.           result.show();
55.           })
56.           }
57.    }
58.           else {
59.           // display Error messages
60.           var ul = $("<ul />");
61.           $.each(response.Message, function (index, item) {
62.           ul.append($("<li />").html("<span>" + item + "</span>"));
63.           });
64.           var status = $(".result-status");
65.           status.append(ul);
66.           status.addClass("text-danger");
67.           }
68.           }).fail(function (msg) {
69.           result.html("Oops! operation is failed");
70.           result.show();
71.           });
72.           return questionId;
73.
74.

 

 

 

This is my view inside the popup window

01.<script type="text/x-kendo-template" id="NextQuestionTemplate">
02.    <div class="form-group">
03.        <!--Question Type-->
04.        <div class="col-md-10">
05.            <div class="k-edit-label col-md-2">
06.                <label for="QuestionTypeId">Quiz Type</label>
07.            </div>
08.            <div class="editor-field col-md-6">
09.                @(Html.Kendo().DropDownList()
10.                                                                                .DataTextField("Name")
11.                                                                                .DataValueField("Id")
12.                                                                                .DataSource(source =>
13.                                                                                {
14.                                                                                    source.Read(read =>
15.{
16.        read.Action("GetQuestionTypeList", "ListService");
17.});
18.                                                                                })
19.                                                                                .Name("QuestionTypeId").ToClientTemplate()
20.
21.
22.                )
23.            </div>
24.        </div>
25.
26.
27.
28.
29.        <!--Question-->
30.        <div class="col-md-10">
31.            <div class="k-edit-label col-md-2">
32.                <label for="QuestionId"> Question </label>
33.            </div>
34.            <div class="editor-field col-md-6">
35.                <textarea class="k-textbox"
36.                          data-val="true"
37.                          id="Question"
38.                          name="Question" rows="5" cols="50">#= data.Question #</textarea>
39.            </div>
40.            <br />
41.        </div>
42.        <br />
43.
44.        <div class="col-md-11">
45.            @(Html.Kendo().Grid<Optivolve.ERP.BusinessModel.Learning.QuizAnswerViewModel>
46.                ()
47.                .Name("answerGrid")
48.                .Columns(columns =>
49.                {
50.                   // columns.Bound(p => p.IsCorrectAnswer);
51.                    columns.Bound(p => p.Answer).Width(100);
52.
53.
54.                    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
55.                })
56.               .ToolBar(toolbar => toolbar.Create())
57.                                                                                                    .Editable(editable => editable.Mode(GridEditMode.InLine))
58.                                                                                                    .Pageable()
59.                                                                                                    .Sortable().AutoBind(false)
60.                                                                                                    .DataSource(dataSource => dataSource
61.                                                                                                            .Ajax()
62.                                                                                                            .Model(model => { model.Id(p => p.Id); })
63.                                                                                                            .ServerOperation(true)
64.                                                                                                        .Create(update => update.Action("Create", "QuizAnswer"))
65.                                                                                                        .Read(read => read.Action("Read", "QuizAnswer"))
66.                                                                                                        .Update(update => update.Action("Edit", "QuizAnswer"))
67.                                                                                                        .Destroy(update => update.Action("Delete", "QuizAnswer")
68.                                                                                                    )).ToClientTemplate()
69.            )
70.        </div>
71.        <!--Button-->
72.        <div class="col-md-10 text-center" style="margin-top:10px">
73.            <button class="k-button k-button-icontext" id="btn_back" onclick="Back(#=data.QuizId# , #=data.Id#)">Back</button>
74.            <button class="k-button k-button-icontext" id="btn_nextQuestion" onclick="SaveAndGetNextQuestion(#= data.QuizId #, #= data.Id #)">Next</button>
75.            <button class="k-button k-button-icontext" id="btn_finish" onclick="Finish()">Finish</button>
76.        </div>
77.
78.    </div>
79.
80.</script>

[nur amalina]

You may refer the images here

[nur amalina]

You may refer the images here.

[Preslav]

Hi Nur,

I am afraid that based on the provided information, I cannot understand the issue. I assume that there was a problem with the attaching process of the pictures.

Having said that, could you please reattach them again? If this is not doable, you could upload them to any public picture sharing hosting and post the URLs here.

I look forward to your reply.


Regards,
Preslav
Progress Telerik