如何将Kendo控件放入Kendo模板?

时间:2013-05-14 15:00:58

标签: asp.net-mvc razor kendo-ui

我正在尝试将NumericTextBox放入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>

我无法理解从何而来&lt; / script&gt;标签......

我正在使用以下代码将模板加载到模态窗口中:

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

这不是在模板中输入控件的正确方法吗?

1 个答案:

答案 0 :(得分: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>