This is a migrated thread and some comments may be shown as answers.

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

0 Answers 217 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Georgi
Top achievements
Rank 2
Georgi asked on 04 Jan 2014, 09:29 AM
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 ?


No answers yet. Maybe you can help?

Tags
ListView
Asked by
Georgi
Top achievements
Rank 2
Share this question
or