2017-02-07 6 views
0

Ich bin neu in Kendo UI. Ich habe einen div im HTML:Wie füge ich ein neues Textfeld in das Div ein, wenn ich auf Kendo-Taste klicke?

<div id="newlabel"></div> 

In diesem div, ich mithilfe von kendo UI button einen neuen label mit zunehmender Zahl hinzufügen?

@(Html.Kendo().Button() 
    .Name("button name") 
    .HtmlAttributes(new { type = "button", 
          @class = "k-primary", 
          id = "NewButton", 
          param = "newlabel", 
          style = "height:1.9em;font-size:11px;margin-top:8px;"}) 
    .Content(NEW BUTTON") 
    .Events(ev => ev.Click("Addlabel"))) 
+0

Ich bin verwirrt durch die Frage, die Sie hier stellen. Wie im Titel fragen Sie, wie Sie eine neue Textbox hinzufügen können, wenn Sie auf eine Schaltfläche klicken. In der Frage danach fragen Sie, wie Sie eine Bezeichnung hinzufügen können. Kannst du nur klären, worum es eigentlich geht? –

+0

sry für die Verwirrung, eigentlich muss ich beide Textbox zusammen mit Label in der div hinzufügen. Das Skript befand sich in einer separaten Datei. So, wie die div-ID an das Javascript übergeben wird, um die Beschriftung und das Textfeld zur Laufzeit anzuhängen. –

Antwort

0

ich habe eine einfache Demo bereit für Sie hier zu testen: http://dojo.telerik.com/orOKI/3

Dies verwendet im Grunde das gleiche Setup wie der MVC Wrapper.

Alles, was Sie brauchen würde, zu tun, ist ein @Data_target = add "{YourDivIDHere}" in die html wie so Attribute:

.HtmlAttributes(new { type = "button", 
          @class = "k-primary", 
          @Data_target="MyDivHere", 
          id = "NewButton", 
          param = "newlabel", 
          style = "height:1.9em;font-size:11px;margin-top:8px;"}) 

Dies wird dann laden ein data-target Attribut auf Taste so können Sie dann ziele auf das richtige containing div. (Es bedeutet auch, können Sie die div ändern, wenn Sie zu einem späteren Zeitpunkt wollen

dann die Funktion I addItems erstellt haben wir folgendes:.

function addItems(e) 
       { 

       var target = $(e.sender.element[0]).data("target"); 
       $('#' + target).append('<div class="form-group"> 
       <label class="col-md-2 form-label">I\'m a label</label> 
       <div class="col-md-10"> 
       <input type="textbox" class="form-control" /> 
       </div></div>'); 


       } 

All dies tut, ist es, die Daten-Zielattribut erhalten Wenn dies das einzige Element auf der Seite ist, das dieses spezifische Datenattribut verwendet, könnten Sie das direkt aufrufen, anstatt die Schaltflächenstruktur zu navigieren, um die ID zu erhalten.

Dann ist alles, was ich mache, ein Etikett und eine Textbox anzuhängen zum div und dass es.

Wenn Sie weitere Informationen benötigen oder Ihre Anforderungen ein wenig mehr als das sind, dann lassen Sie mich.

Hinweis Sie könnten immer eine kendo template verwenden, die es einfacher macht, in der Zukunft zu bearbeiten.

+0

danke, zum Beispiel! –

0

Wenn Sie eine label innerhalb des div zur Laufzeit platzieren möchten, können Sie jQuery, wie so verwenden:

$("<label id='testLabel'>Test</label>").appendTo("#newlabel"); 

Sie können den Inhalt des label wieder ändern jQuery verwenden, etwa so:

$("#testLabel").text(number); 
Verwandte Themen