1

I have two models with relationship "Many to Many", Books, Authors, and their context Library. All source files included correctly. Cannot set selected Authors to the cell(because row is null, so model cannot be set). There is using InCell editor. I will be glad to any ideas)

UPD: new error occurred when I add a new line

Unable to get property 'map' of undefined or null reference

Index.cs.html:(error in change function, second error in dataBound function)

 @{
    ViewBag.Title = "Home Page";
}
@(Html.Kendo().Grid<ManyToMany.Models.ViewModel>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(e => e.BookId).Visible(false);
                    columns.Bound(e => e.Pages);
                    columns.Bound(e => e.Genre);
                    columns.Bound(e => e.Publisher);
                    columns.Bound(e => e.Authors).ClientTemplate(

                         Html.Kendo().MultiSelect().Name("multi#=BookId#")
                            .DataTextField("AuthorName")
                            .DataValueField("AuthorId")
                            .BindTo((IEnumerable<ManyToMany.Models.Author>)ViewData["authors"]) /*TaskSecond.Models.ViewModel*/
                            .Events(e => e.Change("change"))
                            .ToClientTemplate().ToHtmlString()
                        );
                    columns.Command(command => command.Destroy()).Width(150);

                })
                .ToolBar(toolbar =>
                {
                    toolbar.Create();
                    toolbar.Save();
                })
                .Editable(editable => editable.Mode(GridEditMode.InCell))
                                                    .Pageable()
                                                    .Filterable()
                .Events(e => e.DataBound("dataBound"))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Batch(true)
                .Model(model =>
                {
                    model.Id(p => p.BookId);
                    model.Field(p => p.Pages).DefaultValue(0);
                    model.Field(p => p.Genre).DefaultValue(0);
                    model.Field(p => p.Publisher).DefaultValue("");
                    model.Field(p => p.Authors).DefaultValue(
                        ViewData["defaultAuthors"] as ManyToMany.Models.Author);
                })
                    .PageSize(5)
                     .Read(read => read.Action("Books_Read", "Grid"))
        .Create(create => create.Action("Books_Create", "Grid"))
         .Update(update => update.Action("Books_Update", "Grid"))
        .Destroy(destroy => destroy.Action("Books_Destroy", "Grid"))
                    .ServerOperation(false))
)

<script type="text/javascript">
    function dataBound(e) {
        var grid = this;
        grid.tbody.children().each(function () {
            var dataitem = grid.dataItem(this),
                row = $(this);
            eval(row.find("script").html());
            var multiSelect = $(this).find("select").data("kendoMultiSelect");
            //here
            multiSelect.value(dataitem.Authors.map(function (i) { return i.AuthorId }));
        });
    }

    function change(e) {
//error is here
        var row = this.element.closest("tr"),
            model = $("#grid").data("kendoGrid").dataItem(row);
        model.set("Authors", this.dataItems());
    }

</script>

ViewModel.cs:

 public class ViewModel
{
    public ViewModel()
    {
        Authors = new List<Author>();
    }
    public int BookId { get; set; }

    public string BookName { get; set; }

    public int Pages { get; set; }

    public Genre Genre { get; set; }

    public string Publisher { get; set; }
    [UIHint("AuthorsEditor")]
    public List<Author> Authors { get; set; }
}

1 Answer 1

0

Try using - this.select() instead of this.element.closest in the change() javascript function. You may need to refine the below code to suit your requirements, but it would give you idea of what to change when you debug through:

var row = this.select();
if (row.length > 0 )
{
    selectedRow = e.sender.select();
    var item = e.sender.dataItem(selectedRow);
}
4
  • 1
    Thank you for your answer) Console says: Object doesn't support property or method 'select'. Interesting behaviour, I think it can be a problem with data binding.
    – Vlad
    Feb 23, 2018 at 10:43
  • I think this may be an issue of some required javascript missing or not loaded properly
    – Nirman
    Feb 23, 2018 at 11:00
  • Maybe, then I'll go check it out
    – Vlad
    Feb 23, 2018 at 11:05
  • but I dunno how can it be, because I updated my project to telerik project with all required files.
    – Vlad
    Feb 23, 2018 at 11:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.