Grid with many-to-many relationship

4 posts, 0 answers
  1. Ben
    Ben avatar
    2 posts
    Member since:
    Jun 2013

    Posted 14 Jun 2013 Link to this post

    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.
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 18 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Ben
    Ben avatar
    2 posts
    Member since:
    Jun 2013

    Posted 18 Jun 2013 Link to this post

    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
  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 20 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready