2013-05-14 51 views
1

我想把一個NumericTextBox放到Kendo模板中。如何將Kendo控件放入Kendo模板?

下面是代碼:

<script type="text/x-kendo-template" id="clone-wizard-template"> 
    <p>Bitte wählen Sie, wie viele Male Sie möchten <br />die Aktionsgruppe fortschreiben: 
    </p> 

     @(Html.Kendo().NumericTextBox() 
      .Name("custom") 
      .Value(10) 
      .ToClientTemplate()) 


    <br /> 
/*some other lines*/ 
</script> 

這是奇怪的渲染成這樣:

<script type="text/x-kendo-template" id="clone-wizard-template"> 
    <p>Bitte wählen Sie, wie viele Male Sie möchten <br />die Aktionsgruppe fortschreiben: 
    </p> 

     <input class="k-input" id="custom" name="custom" type="number" value="10" /><script> 
    jQuery(function(){jQuery("\#custom").kendoNumericTextBox({});}); 
<\/script> 


    <br /> 
/*some other lines*/ 

</script> 

我不能從那裏來</script>標記明白...

我m使用此代碼將模板加載到模態窗口中:

 editAktionsgruppen.kendoWindow = $("<div />").kendoWindow({ 
      title: "Bestätigen", 
      resizable: false, 
      visable: false, 
      modal: true 
     }).html($("#clone-wizard-template").html()).data("kendoWindow"); 

這不是在模板中輸入控件的正確方法嗎?

+0

什麼是模板被加載到?一個網格?一個彈出窗口?我會將html添加到模板中,然後在模板加載時用jQuery初始化它... – 2013-05-14 15:03:24

+0

@尼爾,哦,是的,我錯過了這個信息!我將它加載到模態窗口中。我在問題中增加了更多細節。 – Anelook 2013-05-14 15:10:26

回答

3

,我可能會寫這樣的:

var popUpWindow = $("<div />").kendoWindow({ 
    title: "Bestätigen", 
    resizable: false, 
    content: { 
     template: kendo.toString($('#clone-wizard-template').html()) 
    }, 
    visable: false, 
    modal: true 
}); 

//add kendo validation to popup window 
$('#my-form').kendoValidator(); 

//initialise the numeric textbox (you could specify a class on the input and find 
//by that instead instead of using an id) 
$('#NumInput').kendoNumericTextBox(); 

//wire-up an ok/submit button 
$(popUpWindow).find('.t-button').on('click', function() { 
var validator = $('#my-form').data('kendoValidator'); 

    if(valiator.validate()) 
    { 
    // do stuff 
    } 
}); 

//show the window 
$(popUpWindow).data('kendoWindow').center().open(); 

然後在客戶端模板:

<script type="text/x-kendo-template" id="clone-wizard-template"> 
<form id="my-form"> 
     <p>Bitte wählen Sie, wie viele Male Sie möchten <br />die Aktionsgruppe fortschreiben: 
     </p> 

     <input id="NumInput" name="NumInput" type="number" required data-required-msg="number required" /> 

     <br /> 
    /*some other lines*/ 
    <button type="button" class="t-button">my button</button> 
</form> 
    </script>