0
Answer

Pass Id from Textbox to Grid Inside the same Popup Window

nur rosli

nur rosli
6y
1.7k
1
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
  1. function SaveAndGetNextQuestion(quizId, questionId) {  
  2. //alert('Quiz ID: ' + quizId + '\nQuestion ID: ' + questionId);  
  3. _url = "@Url.Action("", "QuizQUestion")",  
  4. isCreateOperation = questionId == null;  
  5. if (isCreateOperation)  
  6. _url = _url + "/Create";  
  7. else  
  8. _url = _url + "/Edit";  
  9. $.ajax({  
  10. method: "POST",  
  11. url: _url,  
  12. data: {  
  13. QuizId: quizId,  
  14. Id: questionId,  
  15. Question: $("#Question").val(),  
  16. QuestionTypeId: $("#QuestionTypeId").val(),  
  17. //QuestionNumber: Ques  
  18. }  
  19. }).done(function (response) {  
  20. console.log("respond", response);  
  21. if (response.IsSucceeded == true) {  
  22. console.log(response)  
  23. $("#questionWin").data("kendoWindow").close();  
  24. if (isCreateOperation !== null) {  
  25. //Ajax request to Get Guestions for Quiz  
  26. //Open question window  
  27. //e.preventDefault();  
  28. var questionTemplate = kendo.template($("#NextQuestionTemplate").html());  
  29. $.ajax({  
  30. method: "GET",  
  31. url: "@Url.Action("GetQuestionByQuizId", "QuizQuestion")",  
  32. data: { QuizId: quizId }  
  33. })  
  34. .done(function (question) {  
  35. var questionWnd = $("#questionWin").data("kendoWindow");  
  36. questionData = { QuizId: quizId, Id: questionId };  
  37. if (question == null) {  
  38. // Create Mode  
  39. questionWnd.content(questionTemplate(questionData));  
  40. }  
  41. else { // Edit Mode  
  42. questionWnd.content(questionTemplate(questionData));  
  43. }  
  44. questionWnd.center().open();  
  45. }).fail(function (msg) {  
  46. result.html("Oops! operation is failed");  
  47. result.show();  
  48. })  
  49. }  
  50. }  
  51. else {  
  52. // display Error messages  
  53. var ul = $("<ul />");  
  54. $.each(response.Message, function (index, item) {  
  55. ul.append($("<li />").html("<span>" + item + "</span>"));  
  56. });  
  57. var status = $(".result-status");  
  58. status.append(ul);  
  59. status.addClass("text-danger");  
  60. }  
  61. }).fail(function (msg) {  
  62. result.html("Oops! operation is failed");  
  63. result.show();  
  64. });  
  65. return questionId;  
This is my view inside the popup window
  1. <script type="text/x-kendo-template" id="NextQuestionTemplate">  
  2. <div class="form-group">  
  3. <!--Question Type-->  
  4. <div class="col-md-10">  
  5. <div class="k-edit-label col-md-2">  
  6. <label for="QuestionTypeId">Quiz Type</label>  
  7. </div>  
  8. <div class="editor-field col-md-6">  
  9. @(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. </div>  
  22. </div>  
  23. <!--Question-->  
  24. <div class="col-md-10">  
  25. <div class="k-edit-label col-md-2">  
  26. <label for="QuestionId"> Question </label>  
  27. </div>  
  28. <div class="editor-field col-md-6">  
  29. <textarea class="k-textbox"  
  30. data-val="true"  
  31. id="Question"  
  32. name="Question" rows="5" cols="50">#= data.Question #</textarea>  
  33. </div>  
  34. <br />  
  35. </div>  
  36. <br />  
  37. <div class="col-md-11">  
  38. @(Html.Kendo().Grid<Optivolve.ERP.BusinessModel.Learning.QuizAnswerViewModel>  
  39. ()  
  40. .Name("answerGrid")  
  41. .Columns(columns =>  
  42. {  
  43. // columns.Bound(p => p.IsCorrectAnswer);  
  44. columns.Bound(p => p.Answer).Width(100);  
  45. columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);  
  46. })  
  47. .ToolBar(toolbar => toolbar.Create())  
  48. .Editable(editable => editable.Mode(GridEditMode.InLine))  
  49. .Pageable()  
  50. .Sortable().AutoBind(false)  
  51. .DataSource(dataSource => dataSource  
  52. .Ajax()  
  53. .Model(model => { model.Id(p => p.Id); })  
  54. .ServerOperation(true)  
  55. .Create(update => update.Action("Create", "QuizAnswer"))  
  56. .Read(read => read.Action("Read", "QuizAnswer"))  
  57. .Update(update => update.Action("Edit", "QuizAnswer"))  
  58. .Destroy(update => update.Action("Delete", "QuizAnswer")  
  59. )).ToClientTemplate()  
  60. )  
  61. </div>  
  62. <!--Button-->  
  63. <div class="col-md-10 text-center" style="margin-top:10px">  
  64. <button class="k-button k-button-icontext" id="btn_back" onclick="Back(#=data.QuizId# , #=data.Id#)">Back</button>  
  65. <button class="k-button k-button-icontext" id="btn_nextQuestion"onclick="SaveAndGetNextQuestion(#= data.QuizId #, #= data.Id #)">Next</button>  
  66. <button class="k-button k-button-icontext" id="btn_finish"onclick="Finish()">Finish</button>  
  67. </div>  
  68. </div>  
  69. </script>
Next Recommended Forum