剣道の編集者はjQueryのステップで作業していませんか？

Question

私はjQuery stepsをフォーム内で使用しています。 私はKendo Editorsを使って編集したいいくつかのモデルプロパティを持っています。

私は、次の（部分）コードを使用して、残りはjQueryウィザードのマークアップです：日付プロパティの

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 

    <div class="form-horizontal"> 
     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
     <div class="form-group"> 
      @Html.LabelFor(model => model.Start, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.Start, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.Start, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.End, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.End, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.End, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 

      @(Html.Kendo().DropDownListFor(x => x.RecurrenceRule) 
       .Name("recurrenceRule") 
       .DataTextField("Text") 
       .DataValueField("Value") 
       .BindTo(new List<SelectListItem> 
       { 
        new SelectListItem 
        { 
         Text = @"Nie", 
         Value = "Never" 
        }, 
        new SelectListItem 
        { 
         Text = @"Täglich", 
         Value ="Daily" 
        }, 
        new SelectListItem 
        { 
         Text = @"Monatlich", 
         Value ="monthly" 
        } 
       })) 
     </div> 


    </div> 





} 

何らかの理由で

、エディタ適切@(Html.Kendo().DropDownListFor(ながら表示されません。うまく働いています。 別の手順（ここには記載されていません）では、@(Html.Kendo().MultiselectFor(も正しく動作しません。 この問題の原因は何ですか？

更新：jQuery stepsのマークアップの外側、このコードは正常に動作します

ポジショニング。

@using (Ajax.BeginForm("Wizard_Submit", "Wizard", new 
{ 
    Area = "" 
}, new AjaxOptions 
{ 
    HttpMethod = "Post", 
    InsertionMode = InsertionMode.Replace 
}, new 
{ 
    id = "wizardSumbit" 
})) 
{ 

    ////0 
    <div id="wizard"> 
     <h3></h3> 
     <section> 
      <p></p> 

      @(Html.Kendo().DropDownListFor(x => x.SlRateBaseTypes) 
       .Name("slRateBaseTypes") 
       .DataTextField("Text") 
       .DataValueField("Value") 
       .BindTo(new List<SelectListItem> 
       { 
        new SelectListItem 
        { 
         Text = @"abc", 
         Value = ((int) SlRateBaseTypes.Course).ToString() 
        }, 
        new SelectListItem 
        { 
         Text = @"cde", 
         Value = ((int) SlRateBaseTypes.Leisure).ToString() 
        } 
       })) 
     </section> 

      @*//1*@ 
     <h3>Vorlage</h3> 
     <section> 
      <p>Wähle eine Vorlage aus</p> 

      @(Html.Kendo().DropDownListFor(x => x.OfferingTemplateId) 
       .Name("offeringTemplate") 
       .DataTextField("Text") 
       .DataValueField("Value") 
       .Events(x => x.Change("onOfferingTemplateChange")) 
       .DataSource(
         source => source 
           .Read(read => read.Url(Url.Action("Wizard_GetOfferingTemplates", "Wizard")).Data("getSlRateBaseTypesSelection").Type(HttpVerbs.Post)) 
           .ServerFiltering(true) 
       ) 
       .AutoBind(false)) 
      <div id="offeringTemplateDescription"></div> 
     </section> 


     @*//2*@ 
     <h3></h3> 
     <section> 
      <p></p> 
      <label for="optional"></label> 
      @(Html.Kendo().MultiSelectFor(x => x.SlRateBaseTypes) 
      .Name("selectOfferingRateTypes") 
      .Placeholder("") 
      .AutoClose(false) 
      .DataTextField("Text") 
      .DataValueField("Value") 
      .DataSource(
         source => source 
           .Read(read => read.Url(Url.Action("Wizard_GetPossibleOfferingRates", "Wizard")).Data("getSlRateBaseTypesSelection").Type(HttpVerbs.Post)) 
           .ServerFiltering(true) 
       ) 
      ) 



.. 
} 

開発者向けのオプションは以下の明らかにする：ここでは、ウィザードのための私のコードがある

「例外TypeError「プロパティ未定義の 『inspectKendoWidget』読み取りできません」：で未定義の のプロパティ 『inspectKendoWidget』を読み取ることができません：1 ：15"

アップデート2：

、これは、文書化日付ピッカーのためのhtml codeです：

<span class="k-widget k-datetimepicker k-header k-input" style="width: 100%;"> 
    <span class="k-picker-wrap k-state-default"><input data-val="true" data-val-date="The field Start must be a date." data-val-required="The Start field is required." id="Start" name="Start" type="text" value="01.01.0001 00:00" data-role="datetimepicker" class="k-input" role="combobox" aria-expanded="false" aria-disabled="false" style="width: 100%;" vk_15f93="subscribed"> 
    <span unselectable="on" class="k-select"> 
    <span class="k-link k-link-date" aria-label="Open the date view"> 
    <span unselectable="on" class="k-icon k-i-calendar" aria-controls="Start_dateview">< 
    /span> 
    </span> 
    <span class="k-link k-link-time" aria-label="Open the time view"> 
    <span unselectable="on" class="k-icon k-i-clock" aria-controls="Start_timeview"> 
    </span> 
    </span> 
</span> 
</span> 
</span> 

Answer 1

念のために誰もが気に：

あなたはjQuery stepscssファイル にいくつかのcss stylesを削除する必要があります - >変更へ：

.tabcontrol ul > li 
{ 
    display: block; 
    /*padding: 0;*/ 
} 

更新： また重要：実は基本的な問題は、私がインターネット上で見つけた別の投稿に従ってjquery.steps.jsファイルを変更することで解決されました：

- これは、レンダリング問題になる>この

function render(wizard, options, state) { 
    // Create a content wrapper and copy HTML from the intial wizard structure 
    var contentWrapperTemplate = "<{0} class=\"{1}\"></{0}>", 
     stepsWrapperTemplate = "<{0} class=\"{1}\">{2}</{0}>", 
     orientation = getValidEnumValue(stepsOrientation, options.stepsOrientation), 
     verticalCssClass = (orientation === stepsOrientation.vertical) ? " vertical" : "", 
     contentWrapper = $(contentWrapperTemplate.format(options.contentContainerTag, "content " + options.clearFixCssClass)), 
     stepsWrapper = $(stepsWrapperTemplate.format(options.stepsContainerTag, "steps " + options.clearFixCssClass, "<ul role=\"tablist\"></ul>")); 

    // Transform the wizard wrapper by wrapping the innerHTML in the content wrapper, then prepending the stepsWrapper 
    wizard.attr("role", "application").wrapInner(contentWrapper).prepend(stepsWrapper) 
     .addClass(options.cssClass + " " + options.clearFixCssClass + verticalCssClass); 

    //Now that wizard is tansformed, select the the title and contents elements 
    var populatedContent = wizard.find('.content'), 
     stepTitles = populatedContent.children(options.headerTag), 
     stepContents = populatedContent.children(options.bodyTag);