Grid with many-to-many relationship

[Ben]

Dear Kendo Team,

I have a grid of with a row that contains several values for each item.  I would also like to be able to filter and group by that row but I haven't got that far yet because I can't even display the information.

The grid looks like so:

@( Html.Kendo().Grid<ProjectXMVC3.ViewModel.PersonnelIndexViewModel>()
        .Name("Personnel")
        .Columns(columns =>
        {
            columns.Bound(o => o.AssetId).Hidden();
            columns.Bound(o => o.Num).Hidden();
            columns.Bound(o => o.Name).Width(150);
            columns.Bound(o => o.Email).Width(200);
            columns.Bound(o => o.AssetSubTypeName).ClientTemplate("# var j = AssetSubType.length; for(var i = 0; i < j; i++){# #: AssetSubType[i] #  #}#");
            columns.Bound(o => o.DateBirth).Format("{0:d}").Width(100);
            columns.ForeignKey(o => o.NationalityId, (System.Collections.IEnumerable)ViewBag.NationalityId, "CountryId", "Country").Title("Nationality");
            columns.ForeignKey(o => o.PreferedAirport, (System.Collections.IEnumerable)ViewBag.PreferedAirport, "AirportId", "AirportName").Title("Prefered Airport");
            columns.ForeignKey(o => o.ContractorTypeId, (System.Collections.IEnumerable)ViewBag.ContractorTypeId, "ContractorTypeId", "ContractorDescrip").Title("Contractor Type");
            columns.Command(com =>
            {
                com.Custom("Details").Click("onPersonSelected");
                com.Edit();
                com.Custom("Block").Click("onBlocked");
                com.Destroy();
            }).Width(240);
        })
        .DataSource(d => d
            .Ajax()
            .Model(model => model.Id(p => p.AssetId))
            .Read(read => read.Action("Read_Personnel", "Personnel"))
            .Events(events => events.Error("error_handler"))
            .Update(update => update.Action("Personnel_Update", "Personnel"))
            .Destroy(destroy => destroy.Action("Personnel_Destroy", "Personnel"))
        )
        .Events(ev => { ev.DataBound("onDataBound"); ev.Edit("onEdit"); })
        .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("Person"))
 )

The problems occurs at the client template line which causes the grid to crash.  I can output the length, individual subtypes but as soon as it loops it crashes in a very terminal way. 

I've tried:

"# for(var i = 0; i <  AssetSubType.length;  i++){#  #: AssetSubType[i] #  #}#"
"# for(var i = 0; i <  AssetSubType.length;  i++){#  #= AssetSubType[i] #  #}#"

This works:

"# if(AssetSubType.length > 0){#  #: AssetSubType[0] #  #}#"

Any assistance would be very much appreciated.  Thanks in advance.

[Daniel]

Hello Ben,

You could use the approach demonstrated in this code-library and call an external template. The plus characters will be removed on the server due to some required escaping. 

Regards,
Daniel
Telerik

[Ben]

Hi Daniel,

That displays the correct data.  Editing it seems to be a problem.  I haven't got the Kendo Multi Select script included in the trial package (2012.3.1315.340) I downloaded and don't seem to be able to get the updated version with the wrapper which you have (2013.1.319.340). The latest link (below) goes to the 2012.3.1315.340 version.

http://www.kendoui.com/download/download-kendo.aspx?pid=1035&lict=1&utm_source=telerik&utm_medium=email&utm_campaign=kui2&term=redownloadtrial

As a result I'm using a ListBoxFor.  But I can't get that to bind to the data.  

The view model is has:  public IEnumerable<AssetSubTypeViewModel> AssetSubType { get; set; }

The ViewBag data passed is this:

ViewBag.AssetSubType = new MultiSelectList(db.AssetSubTypes.Where(x => x.UserId == compUserId && x.AssetTypeId == 1).Select(x => new { x.AssetSubTypeId, x.SubTypeDescript }), "AssetSubTypeId", "SubTypeDescript");

In the editor template I have this:
@Html.ListBoxFor(model => model.AssetSubType, ViewBag.AssetSubType as MultiSelectList)

I can get it to bind to AssetSubTypeId by adding that into the View Model.

Seems the data-bind element does not recognise AssetSubType as a valid value but does recognise the an IEnumerable<int> when passed as AssetSubTypeId.  The problem with this is it does not mark the grid as dirty when you update the multiselect list.

If I also wanted to upload a file as part of the editor template (in pop up) do you have examples of how to that or is that a new thread?

Thanks,

Ben

[Daniel]

Hello Ben,

It is possible to bind a select element to complex objects by using source binding but the list of items will need to be included in the Grid model. Binding to a collection of value types should work. In order to mark the field as dirty and send a request the item you could use the save event. I attached the code-library project modified to use a ListBox instead.

Regards,
Daniel
Telerik