Master-Detail DefaultValue in Detail FK

[Spyros]

Hi!
I am building a Master-Detail with KendoGrids.

My problem is that when I create a new record in the Detail Grid I want the DefaultValue of the ForeignKey column to be set with the value of the PrimaryKey of the Master Grid.

My Grids are the following:

Master

@(Html.Kendo().Grid<ModelApp.Models.Tickets>()

.Name("ticketgrid")

.Columns(columns =>

    {

 

        columns.Bound(p => p.TicketID).Title("ID").Width(100);

        columns.ForeignKey(p => p.CustomerID, (System.Collections.IEnumerable)ViewData["customers"], "CustomerID", "CustomerName").Title("Customer").Width(200) ;

        columns.ForeignKey(p => p.AreaOfBusinessID, (System.Collections.IEnumerable)ViewData["areaofbusinesses"], "AreaOfBusinessID", "AreaOfBusiness1").Title("AreaOfBusiness").Width(100);

        columns.Bound(p => p.OccurredOn).Title("Occured").Format("{0:yyyy-MM-dd}").Width(150);

        columns.ForeignKey(p => p.SeverityID, (System.Collections.IEnumerable)ViewData["severities"], "SeverityID", "Severity1").Title("Severity").Width(100);

        columns.ForeignKey(p => p.AssigneeID, (System.Collections.IEnumerable)ViewData["assignees"], "AssigneeID", "AssigneeName").Title("Assignee").Width(100);

        columns.ForeignKey(p => p.TicketStatusID, (System.Collections.IEnumerable)ViewData["ticketstatuses"], "TicketStatusID", "TicketStatus1").Title("Status").Width(100);

        columns.Bound(p => p.UserID).Title("User").Width(100);

        columns.Bound(p => p.DateRegistered).Title("Registered").Format("{0:yyyy-MM-dd}").Width(150);

})

    .ClientDetailTemplateId("ticketdetailTemplate")

.DataSource(dataSource =>

    dataSource

.Ajax()

    //.Filter(filter => filter.Add(e => e.CustomerID).IsEqualTo(CustomerID))

.Model

(model=>{

    model.Id(p => p.TicketID);

    model.Field(p=>p.TicketID).Editable(false);

    model.Field(p => p.CustomerID);

    model.Field(p => p.AreaOfBusinessID);

    model.Field(p => p.OccurredOn);

    model.Field(p => p.SeverityID);

    model.Field(p => p.AssigneeID);

    model.Field(p => p.TicketStatusID);

    model.Field(p => p.UserID);

    model.Field(p => p.DateRegistered).DefaultValue(DateTime.Now);

     

})

.Read(read => read.Action("Index","Ticket"))

.Create(create => create.Action("Create", "Ticket"))

.Update(update => update.Action("Edit", "Ticket"))

//.Destroy(destroy => destroy.Action("Delete", "Ticket"))       

        )

        .Pageable()

        .Navigatable()

        .Selectable()

        .Sortable()

        .Editable(editing => editing.Mode(GridEditMode.InCell))

        .ToolBar(toolbar =>

        {

            toolbar.Create();

            toolbar.Save();

        })

         

 

 )

Detail (the column I want is in bold)

<script id="ticketdetailTemplate"  type="text/kendo-tmpl">

    @(Html.Kendo().Grid<ModelApp.Models.TicketsDetails>()

            .Name("ticketdetailgrid")

            .Columns(columns =>

            {

                columns.Bound(o => o.TicketsDetailID).Title("ID").Width(100);

                columns.Bound(o => o.TicketID).Title("Ticket").Width(150); //

 

                columns.ForeignKey(o => o.CustomerContactID, (System.Collections.IEnumerable)ViewData["customercontacts"], "CustomerContactID", "CustomerContactName").Title("CustomerContact").Width(150) ;

                columns.ForeignKey(o => o.TicketsDetailsViaID, (System.Collections.IEnumerable)ViewData["ticketsdetailsvia"], "TicketsDetailsViaID", "TicketsDetailsVia1").Title("Via").Width(100) ;

 

                columns.Bound(o => o.TicketsDetailsDesciption).Title("Description").Width(300);

                columns.Bound(o => o.TicketsdetailsNotes).Title("Notes").Width(200);

                columns.Bound(o => o.UserID).Title("User").Width(100);

                columns.Bound(o => o.DateTimeStart).Format("{0:yyyy-MM-dd hh:mm}").Title("Start").Width(150);

                columns.Bound(o => o.DateTimeFinish).Format("{0:yyyy-MM-dd hh:mm}").Title("Finish").Width(150);

                columns.Bound(o => o.DateRegistered).Format("{0:yyyy-MM-dd hh:mm}").Title("Registered").Width(150);

                 

            })

            .DataSource(dataSource => dataSource

                .Ajax()

                .Model

                (model =>

                {

                    model.Id(q => q.TicketsDetailID);

                    model.Field(q => q.TicketsDetailID).Editable(false);

//I want the DefaultValue here

                    model.Field(q => q.TicketID); 



                    model.Field(q => q.CustomerContactID);

                    model.Field(q => q.TicketsDetailsDesciption);

                    model.Field(q => q.TicketsdetailsNotes);

                    model.Field(q => q.UserID);

                    model.Field(q => q.DateTimeStart).DefaultValue(DateTime.Now);

                    model.Field(q => q.DateTimeFinish).DefaultValue(DateTime.Now);

                    model.Field(q => q.DateRegistered).DefaultValue(DateTime.Now);

             

 

                })

                .Read(read => read.Action("TicketsDetailsRead", "Ticket", new { ticketID = "#=TicketID#" }))

                .Update(update => update.Action("TicketsDetailsEdit", "Ticket"))

                .Create(update => update.Action("TicketsDetailsCreate", "Ticket", new { ticketID = "#=TicketID#" }))

            )

            .Pageable()

            .Sortable()

            .Editable(editing => editing.Mode(GridEditMode.InCell))

        .ToolBar(toolbar =>

        {

            toolbar.Create();

            toolbar.Save();

        })

                .ToClientTemplate()

    )

</script>

Thanx in advance

[Vladimir Iliev]

Hi Spyros,

 
Basically to achieve the desired behavior you should use the Edit event of the child grid to find the master grid current record ID and set it in the "TicketIDmodel" field of the child grid. Please check the example below:

Define Edit event in the child grid:

.Events(e => e.Edit("onEdit"))

onEdit function:

function onEdit(e)
{
    //check if model is new
    if (e.model.isNew()) {
        //Find parent grid current row
        parentRow = $(e.container).closest(".k-detail-row").prev();
        //find parent grid
        grid = parentRow.closest("[data-role=grid]").data("kendoGrid");
        //get the parent grid row DataItem
        parentDataItem = grid.dataItem(parentRow);
        //set the parent grid dataItem field value to current ForeignKeyColumn field
        e.model.set("TicketID", parentDataItem.TicketID);
    }
}

Kind Regards,
Vladimir Iliev
the Telerik team

[Spyros]

Thank you Vladimir! It worked like a charm!

[Milehigh JT]

Still works in 2021. Wish it were in MVC, but Javascript does the job.

[Nikolay]

Hi Milehigh,

Indeed, this is not coming out of the box and as it is a specific scenario it requires a custom JS logic in the Edit event handler.