Kendo Grid - ASP MVC не отображает раскрывающийся список

Я разрабатываю проект с ASP MVC 5, пользовательским интерфейсом Kendo и некоторыми слоями, но не могу понять, как отобразить раскрывающийся список внутри редактируемой сетки, я следовал этому примеру:

Редактирование сетки/пользовательский редактор

Однако у меня возникли серьезные проблемы, поскольку раскрывающийся список никогда не отображается, он отображает два текстовых поля.

пример

Кроме того, если я запускаю пример Foreign Key column:

Столбец Grid/ForeignKey

У меня другой результат с числовым вверх-вниз:

Пример 2

Кроме того, я протестировал этот пример из StackOverflow, и результатом являются либо два текстовых поля, либо числовое значение вверх-вниз (это зависит от того, связываю ли я столбец или использую столбец внешнего ключа):

выпадающий список в сетке кендо не работает

Это мой код на бизнес-уровне, у меня есть эти классы для возврата категорий из базы данных:

using Test.DB.Operations;
using System.Collections.Generic;
using System.Linq;

namespace Test.Business
{
    public class Category
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }

    public class CategoryData
    {
        public static List<Category> GetCategories()
        {
            var catData = DatabaseService.GetEntities<DB.Category>().ToList();

            return (from cData in catData select new Category() { ID = cData.ID, Name = cData.Name }).ToList();
        }
    }
}

Позже, в моем слое MVC, контроллер заполняет представление некоторыми методами, подобными этим:

using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using Test.Business;
using Test.Classes;
using Test.MVC.Classes;
using Test.MVC.Models;
using System;
using System.Collections.Generic;
using System.Web.Mvc;

namespace Test.MVC.Controllers
{
    public class OrganizationDetailsController : Controller
    {
        public ActionResult Index(string ID)
        {
            PopulateCategories();

            if (!string.IsNullOrEmpty(ID))
            {
                var model = new OrganizationsModel();
                try
                {
                    model.hasError = false;
                    model.messageBox = null;
                }
                catch (Exception ex)
                {
                    model.hasError = true;
                    model.messageBox = new Tuple<string, string>("Error", "Please report it to the team");
                }
                return View(model);
            }
            else
            {
                return View();
            }
        }    

        public ActionResult OrganizationDetails_Read([DataSourceRequest]DataSourceRequest request, string ID)
        {
            try
            {
                var data = OrganizationDetailsData.GetOrganizationDetails(ID);
                DataSourceResult result = data.ToDataSourceResult(request);
                return Json(result);
            }
            catch (Exception ex)
            {
                return null;
            }
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult OrganizationDetails_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]<OrganizationDetails> oDetails)
        {
            return null;
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult OrganizationDetails_Create([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<OrganizationDetails> oDetails)
        {
            return null;
        }

        private void PopulateCategories()
        {
            var dataContext = CategoryData.GetCategories();

            ViewData["categories"] = dataContext;
            ViewData["defaultCategory"] = dataContext[0];
        }
    }
}

Модель выглядит следующим образом:

using Test.Business;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

namespace Test.MVC.Models
{
    public class OrganizationsModel
    {
        public Tuple<string, string> messageBox;
        public bool hasError;
    }
}

Наконец, в View у меня есть этот код для Kendo Grid:

@(Html.Kendo().Grid<Test.Business.OrganizationDetails>()
    .Name("gridDetails")
    .Columns(columns =>
    {
        columns.Bound(b => b.Name);
        columns.Bound(b => b.NumberOfEmployees);
        //columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "ID", "Name").Title("Categories").EditorTemplateName("dropdownTemplate");
        columns.Bound(b => b.Category).ClientTemplate("#=Category.Name#");
        columns.Bound(p => p.Telephone);
        columns.Bound(p => p.Address);
    })
    .ToolBar(toolBar =>
    {
        toolBar.Create();
        toolBar.Save();
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Sortable()
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
        .Model(model =>
        {
            model.Id(p => p.ID);
            model.Field(p => p.ID).Editable(false);
            model.Field(p => p.Category).DefaultValue(ViewData["defaultCategory"] as Test.Business.Category);
        })
        .PageSize(20)
        .Read(read => read.Action("OrganizationDetails_Read", "OrganizationDetails").Data("LoadParams"))
        .Create(create => create.Action("OrganizationDetails_Create", "Grid"))
        .Update(update => update.Action("Organization_Update", "Grid"))
    )
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
)

<input type="hidden" id="orgID" value="1" />

<script id="dropdownTemplate" type="text/x-kendo-template">
    @(Html.Kendo().DropDownListFor(m => m)
        .Name("myDropDown")
        .DataValueField("ID")
        .DataTextField("Name")
        .BindTo((System.Collections.IEnumerable)ViewData["categories"])
    )
</script>

<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

    function LoadParams() {
        var id = $("#orgID").val();
        return { ID: id }
    }
</script>

Однако он никогда не работает так, как должен. Кто-нибудь сталкивался с этой проблемой? И как вам это удалось? Спасибо за ваши идеи.


person Federico Navarrete    schedule 08.03.2017    source источник


Ответы (1)


Для реализации ForeignKey():

вам нужно поместить «dropdownTemplate» в файл cshtml в Views/Shared/EditorTemplates. Вы не можете использовать x-kendo-template, потому что вы не используете инициализацию javascript... вы используете помощники бритвы. Что, вероятно, происходит с вами, так это то, что вы указываете несуществующий EditorTemplate (нет cshtml в Shared/EditorTemplates), поэтому он просто ломается.

Или вы можете вообще не использовать EditorTemplateName(), и Kendo будет автоматически использовать EditorTemplate в Views/Shared/EditorTemplates/GridForeignKey.cshtml.

Для реализации "ClientTemplate":

Если вы посмотрите на полный исходный код примера «Редактирование сетки / пользовательский редактор» (в примерах, которые устанавливаются с Kendo MVC), EditorTemplate указывается с использованием UIHint в модели. то есть (используя ваши имена классов)

public class OrganizationDetails
{
    ...

   [UIHint("ClientCategory")]
    public CategoryViewModel Category {get; set;}
}

Затем в Views/Shared/EditorTemplates должен быть файл ClientCategory.cshtml, содержащий бритву для реализации вашего редактора.

В примерах кендо ClientCategory.cshtml содержит:

@model Kendo.Mvc.Examples.Models.CategoryViewModel

@(Html.Kendo().DropDownListFor(m => m)
    .DataValueField("CategoryID")
    .DataTextField("CategoryName")
    .BindTo((System.Collections.IEnumerable)ViewData["categories"])
)
person The Dread Pirate Stephen    schedule 08.03.2017
comment
Спасибо за ответ! Я не знал об UIHint, его вообще нет на его веб-странице, возможно, они должны предоставить его или как-то объяснить. Я почти уверен, что это связано с ProductViewModel, который не является частью примера, я не мог найти его раньше. Спасибо за разъяснения! - person Federico Navarrete; 08.03.2017