Error when trying to use kendo ddl inside listview edit template mvc

1 posts, 0 answers
  1. Georgi
    Georgi avatar
    12 posts
    Member since:
    Jun 2012

    Posted 04 Jan 2014 Link to this post

    Hello,

    Using the mvc extensions I have a grid with details row. In the details row I have a listview with editor template like this:

    Grid:

    @(Html.Kendo().Grid<PromotionModel>()
          .Name("Promotions")
          .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model =>
                        {
                            model.Id(promotion => promotion.PromotionID);
                            model.Field(promotion => promotion.PromotionID).Editable(false);
                            model.Field(promotion => promotion.Clicks).Editable(false);
                            model.Field(promotion => promotion.Impressions).Editable(false);
                            model.Field(promotion => promotion.WebsiteID).DefaultValue(1);
                        })
            .Read(read => read.Action("PromotionsRead", "Promotions", new { Area = "Administration" }))
            .Create(create => create.Action("PromotionsCreate", "Promotions", new { Area = "Administration" }))
            .Update(update => update.Action("PromotionsUpdate", "Promotions", new { Area = "Administration" }))
            .Destroy(destroy => destroy.Action("PromotionsDestroy", "Promotions", new { Area = "Administration" }))
            .Events(events => events.Error("OnError")) // Handle the "error" event
           )
          .ClientDetailTemplateId("details-template")
          .Columns(columns =>
          {
              columns.Bound(x => x.PromotionID);
              columns.Bound(x => x.Title);
              columns.Bound(x => x.PromotionType);
              columns.ForeignKey(x => x.WebsiteID, (System.Collections.IEnumerable)ViewData["Websites"], "WebsiteID", "Name");
              columns.Bound(x => x.ProductCode);
              columns.Bound(x => x.Clicks);
              columns.Bound(x => x.Impressions);
              columns.Bound(x => x.IsVisible);
              columns.Command(commands =>
              {
                  commands.Edit();
                  //commands.Destroy();
                  commands.Custom("Delete").Click("confirmDelete");
              }).Title("Commands").Width(200);
          })
          .ToolBar(toolbar => toolbar.Create())
          .Editable(editable => editable.Mode(GridEditMode.PopUp).DisplayDeleteConfirmation(false))
          .Pageable()
          .Events(e => e.Edit("OnEdit"))
          .Sortable()
          .Groupable()
          .ColumnMenu()
          .Filterable()
    )


    Grid details template:

    <script id="details-template" type="text/x-kendo-template">
        <div class="demo-section">
            @(Html.Kendo().ListView<PromotionTranslationModel>()
            .Name("ListView_#=PromotionID#")
            .ClientTemplateId("translationTemplate")
            .TagName("div")
            .DataSource(ds => ds
                .Model(m => m.Id("RecordID"))
                .PageSize(3)
                .Create(create => create.Action("PromotionTranslationsCreate", "PromotionTranslations", new { Area = "Administration", promotionID = "#=PromotionID#" }))
                .Read(read => read.Action("PromotionTranslationsRead", "PromotionTranslations", new { Area = "Administration", promotionID = "#=PromotionID#" }))
                .Update(update => update.Action("PromotionTranslationsUpdate", "PromotionTranslations", new { Area = "Administration", promotionID = "#=PromotionID#" }))
                .Destroy(destroy => destroy.Action("PromotionTranslationsDestroy", "PromotionTranslations", new { Area = "Administration", promotionID = "#=PromotionID#" }))
            )
            .Pageable()
            .Editable(editable => editable.TemplateName("PromotionTranslationEditTemplate"))
            .ToClientTemplate()
            )
        </div>
    </script>

    ListView template:

    <script type="text/x-kendo-tmpl" id="translationTemplate">
        <div class="product-view k-widget">
            <div class="edit-buttons">
                <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
                <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
            </div>
            <dl>
                <dt>Text</dt>
                <dd>#:Text#</dd>
                <dt>Image URL</dt>
                <dd>#:ImageSource#</dd>
                <dt>Language</dt>
                <dd>#:LanguageID#</dd>
            </dl>
        </div>
    </script>



    ListView editor template:


    @model BusinessObjects.Models.PromotionTranslationModel
    @using Kendo.Mvc.UI;
    <div class="translation-view">
        <dl>
            <dt>Text</dt>
            <dd>
                @(Html.EditorFor(p => p.Text))
                <span data-for="Text" class="k-invalid-msg"></span>
            </dd>
            <dt>Image URL</dt>
            <dd>
                @(Html.EditorFor(p => p.ImageSource))
                <span data-for="ImageSource" class="k-invalid-msg"></span>
            </dd>
            <dt>Language</dt>
            <dd>
                @*@(Html.EditorFor(p => p.LanguageID))*@
                @(Html.Kendo().DropDownList()
                          .Name("color")
                          .DataTextField("Text")
                          .DataValueField("Value")
                          .BindTo(new List<SelectListItem>() {
                              new SelectListItem() {
                                  Text = "Black",
                                  Value = "1"
                              },
                              new SelectListItem() {
                                  Text = "Orange",
                                  Value = "2"
                              },
                              new SelectListItem() {
                                  Text = "Grey",
                                  Value = "3"
                              }
                          })
                          .Value("1")
                )
                <span data-for="LanguageID" class="k-invalid-msg"></span>
            </dd>
        </dl>
        <div class="edit-buttons">
            <a class="k-button k-button-icontext k-update-button" href=""><span class="k-icon k-update"></span>Save</a>
            <a class="k-button k-button-icontext k-cancel-button" href=""><span class="k-icon k-cancel"></span>Cancel</a>
        </div>
    </div>
    In the ListView editor template when I try to add a kendo dropdown list I get a jquery error
    "Uncaught SyntaxError: Unexpected token ILLEGAL "

    However if I use the default editor "@(Html.EditorFor(p => p.LanguageID))" it does work fine. What can be the cause of that ?


Back to Top