jQuery in einer Kendo Inline-Vorlage

Question

Ist es möglich, jQuery innerhalb einer inline Vorlage laufen zu lassen?

Hier ist, was ich versuche zu erreichen. Ich habe eine Inline-Vorlage, die ein Formular enthält, das der Benutzer ausfüllt, um es an meinen Controller zurückzusenden. Ich habe eine Reihe von Optionsfeldern auf dem Formular. Wenn sie auf das letzte Optionsfeld klicken, muss mein Textfeld angezeigt werden und für die Formularübermittlung benötigt werden.

Hier ist der Code, der das Fenster aufruft, der die Vorlage verwendet:

function onRejectClick(e) { 
    e.preventDefault(); 

    var dataItem = this.dataItem($(e.currentTarget).closest("tr")); 
    var wnd = $("#Reject").data("kendoWindow"); 

    wnd.content(rejectTemplate(dataItem)); 
    wnd.center().open(); 
} 

Hier ist meine Vorlage:

<script type="text/x-kendo-template" id="rejectTemplate"> 
<div id="reject-container"> 
    @using (Html.BeginForm("RejectConcern", "Filter", FormMethod.Post, new { @id = "rejectConcern", @style = "width:100%", @class = "k-content" })) 
    { 
     @Html.AntiForgeryToken() 
     <input type="hidden" id="id" name="id" value="#= data.id #" /> 
     <table> 
      <tr> 
       <td valign="top"> 
        <label>Reason</label> 
       </td> 
       <td> 
        <label> 
         @Html.RadioButton("reasonForRejection", "NotQuestion", false, new { @id = "reasonForRejection" })Concern is not a question and will not be answered 
        </label> 
        <label> 
         @Html.RadioButton("reasonForRejection", "Inappropriate", false, new { @id = "reasonForRejection" })Concern contains inappropriate language and will not be answered 
        </label> 
        <label> 
         @Html.RadioButton("reasonForRejection", "Irrelevant", false, new { @id = "reasonForRejection" })Concern is not relevant to our business/operation and will not be answered 
        </label> 
        <label> 
         @Html.RadioButton("reasonForRejection", "Personal", false, new { @id = "reasonForRejection" })Concern is about an individual, a specific group, or area and will not be answered 
        </label> 
        <label> 
         @Html.RadioButton("reasonForRejection", "Other", false, new { @id = "reasonForRejection" })Other 
        </label> 
       </td> 
      </tr> 
      <tr> 
       <td> </td> 
       <td> 
       @Html.TextArea("answer", 
        new 
        { 
         @id = "answer", 
         @name = "answer", 
         @class = "k-textbox", 
         @placeholder = "Enter the reason for rejection here.", 
         @validationmessage = "The reason for rejection is required.", 
         @style = "width: 600px; min-width:600px; max-width:69%; height:200px", 
         @maxlength = "1000" 
        } 
       ) 
       </td> 
      </tr> 
      <tr> 
       <td> </td> 
       <td> 
        <div class="actions"> 
         <button type="submit" id="rejectConcernButton" class="k-button">Submit</button> 
        </div> 
       </td> 
      </tr> 
     </table> 
    } 
</div> 
</script> 

Wie kann ich jQuery verwenden, um die Antwort TextArea- Feld zu zeigen/verstecken und es machen abhängig davon, ob der letzte Radio Button aktiviert ist oder nicht? Wenn jQuery nicht möglich ist, kann dies über normales JavaScript erfolgen?

Answer 1

Wenn in Javascript getan werden kann, kann es in diesem Fall in jQuery erfolgen. Ich meine, wenn Sie einen JavaScript-Code verwenden könnten, könnten Sie auch einen jQuery-Code verwenden. Ich empfehle Ihnen, ein Ereignis im Hauptelement des Widgets festzulegen. Jedes Widget hat eine Eigenschaft namens element, die Ihnen das Haupt-HTML-Element des Widgets gibt. Also, wenn Sie ein Ereignis in allen Radio-Box in Ihrem Widget setzen, können Sie die Vorlage generierte Inhalte manipulieren, zum Beispiel:

$($("#listView").data("kendoListView").element).on('change', 'input[type="radio"]', function() { }); 

Demo

Ich bin nicht sicher, was Widget Sie verwenden , aber ich habe in dieser Demo ListView verwendet.