Dropdown populate on parent grid records saved

[Victor]

Hi 

I have two different grid on the same tabstrip. (Not a hierarchical grid)

I want to load second grid based on the first grid records in a second grid dropdown.

Is there any other good way to populate second grid dropdown when the first grid has new record added or edited?

At the moment, I am refresing the dropdown value on the drop down event. But it takes some time and it doesnt look good to wait untill open event is completed.

Victor

[Petur Subev]

Hello Victor,

Could you please share some code so we can get a better idea of your current setup and what exactly you have tried? Based on what event you want to refresh that DropDownList in the second Grid, or how is the DDL related to the records in the first grid, please share more details.

Kind Regards,
Petur Subev
Telerik

[Victor]

Hi Petur

Here is the code.

@(Html.Kendo().Grid<TeachingStaffCostViewModel>()
                .Name("gridTeachingStaffCost")
                .Columns(columns =>
                {
                    columns.ForeignKey(c => c.TeachingStaffCostTypeId, (IEnumerable)ViewData["teachingstaff"], "Value", "Text");

                    columns.Bound(p => p.NoOfHours).Title("No of Hours").ClientFooterTemplate("Total Hours: #= kendo.format('{0:n2}', sum) #").Format("{0:n2}").HtmlAttributes(new { @class = "ob-right" }).FooterHtmlAttributes(new { @class = "ob-right" }).Width(200);
                    columns.Bound(p => p.Amount).Title("Rate($) / Hour").Format("{0:c2}").HtmlAttributes(new { @class = "ob-right" }).FooterHtmlAttributes(new { @class = "ob-right" }).Width(200);
                    columns.Bound(p => p.TotalAmount).Title("Teaching Cost($)").HtmlAttributes(new { @class = "ob-right" }).ClientTemplate("#= kendo.format('{0:c2}', NoOfHours * Amount)#").ClientFooterTemplate("Total: <span id='TeachingTotal'> #= kendo.format('{0:c2}', sum)# </span>").FooterHtmlAttributes(new { @class = "ob-right" }).Width(200);
                    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
                })

                .ToolBar(toolbar => toolbar.Create())
                .Editable(editable => editable.Mode(GridEditMode.InLine).Enabled(true))
                .Sortable()
                .Filterable()
                .Events(events => events.DataBound("ebesskendo.onDataBound_MakeReadonly").DataBound("ebess.offeringcost.onDataBound").Edit("ebess.offeringcost.onStaffEdit").Save("ebess.offeringcost.onTeachingStaffSave").Remove("ebess.offeringcost.onRemove"))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    //Do not Remove ServerOpetaion(false) statement. It is required to do the Aggregate value caluclate automaticallly on Edit and Delete.
                    .ServerOperation(false)
                    .Events(events => events.Error("ebess.offeringcost.error_handler"))
                    .Aggregates(agg =>
                    {
                        agg.Add(p => p.TotalAmount).Sum();
                        agg.Add(p => p.NoOfHours).Sum();
                    })
                    .Model(model =>
                    {
                        model.Id(p => p.OfferingCostId);
                        model.Field(p => p.Amount).DefaultValue(0);
                        model.Field(p => p.TotalAmount).DefaultValue(0);
                        model.Field(r => r.TeachingStaffCostTypeId).DefaultValue(ViewData["default_teachingstaff"]);
                    })
                    .Read(read => read.Action("TeachingStaffCost_Read", "Offering", new { selectedTab = ClassificationEnum.TeachingStaffCost, offeringId = ViewBag.OfferingId }))
                    .Create(update => update.Action("TeachingStaffCost_Create", "Offering", new { selectedTab = ClassificationEnum.TeachingStaffCost, offeringId= ViewBag.OfferingId  }))
                    .Update(update => update.Action("TeachingStaffCost_Update", "Offering", new { selectedTab = ClassificationEnum.TeachingStaffCost}))
                    .Destroy(destroy => destroy.Action("TeachingStaffCost_Delete", "Offering"))
                 )

@(Html.Kendo().Grid<TeachingStaffOnCostStaffCostViewModel>()
                .Name("gridOnCost")
                .Columns(columns =>
                {
                    columns.ForeignKey(c => c.OnCostParentId, (IEnumerable)ViewData["offeringoncost"], "Value", "Text").Title("Related Teaching Staff");
                    columns.ForeignKey(c => c.OnCostCostTypeId, (IEnumerable)ViewData["oncost"], "Value", "Text").Width(200);
                    columns.Bound(p => p.NoOfHours).Title("No of Hours").ClientFooterTemplate("Total Hours: #= kendo.format('{0:n2}', sum) #").Format("{0:n2}").HtmlAttributes(new { @class = "ob-right" }).FooterHtmlAttributes(new { @class = "ob-right" }).Width(200);
                    columns.Bound(p => p.Amount).Title("On-Cost (%)").Format("{0:n2}").HtmlAttributes(new { @class = "ob-right" }).Width(200);
                    columns.Bound(p => p.TotalAmount).Title("Total ($)").ClientTemplate("#= kendo.format('{0:c2}', ebess.offeringcost.calculate1(data))#").ClientFooterTemplate("Total: <span id='OnCostTotal'> #= kendo.format('{0:c2}', sum)#  </span>").Width(200).Format("{0:c2}").HtmlAttributes(new { @class = "ob-right" }).FooterHtmlAttributes(new { @class = "ob-right" });
                    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
                })

                .ToolBar(toolbar => toolbar.Create())
                .Editable(editable => editable.Mode(GridEditMode.InLine).Enabled(true))
                .Sortable()
                .Filterable()
                .Events(events => events.DataBound("ebesskendo.onDataBound_MakeReadonly").DataBound("ebess.offeringcost.onDataBound").Edit("ebess.offeringcost.onStaffEdit").Save("ebess.offeringcost.onCostStaffSave"))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    //Do not Remove ServerOpetaion(false) statement. It is required to do the Aggregate value caluclate automaticallly on Edit and Delete.
                    .ServerOperation(false)
                    .Events(events => events.Error("ebess.offeringcost.error_handler"))
                    .Aggregates(agg =>
                    {
                        agg.Add(p => p.TotalAmount).Sum();
                        agg.Add(p => p.NoOfHours).Sum();
                    })
                    .Model(model =>
                    {
                        model.Id(p => p.OfferingCostId);
                        model.Field(p => p.Amount).DefaultValue(0);
                        model.Field(p => p.TotalAmount).DefaultValue(0);
                        model.Field(r => r.OnCostCostTypeId).DefaultValue(ViewData["default_oncostparent"]);
                        model.Field(r => r.OnCostParentId).DefaultValue(ViewData["default_oncostparent"]);
                    })
                    .Read(read => read.Action("TeachingStaffOnCost_Read", "Offering", new { selectedTab = ClassificationEnum.OnCost, offeringId = ViewBag.OfferingId }))
                    .Create(update => update.Action("TeachingStaffOnCost_Create", "Offering", new {selectedTab = ClassificationEnum.OnCost, offeringId = ViewBag.OfferingId }))
                    .Update(update => update.Action("TeachingStaffOnCost_Update", "Offering", new {selectedTab = ClassificationEnum.OnCost }))
                    .Destroy(destroy => destroy.Action("TeachingStaffOnCost_Delete", "Offering"))
                 )
            )

OnCostParentId column on second grid is the records from the first grid. 

To populate this dropdown here is what i do on the dropdown_open event.

//populate the latest teaching staff details when the OnCostParentId dropdown is open.

    offeringcost.dropdownlist_open = function (e) {

        if (e.sender._optionID == "OnCostParentId_option_selected") {

 

            //Fetch the records again just in case to make sure always latest data

            var url = "/Planning/Offering/GetTeachingStaffDataForOnCost";

            var data = { "offeringId": offeringId };

            $.getJSON(url, data, function (data) {

            }).done(

                function (data) {

                    console.log(data);

                    e.sender.setDataSource(data);

                    e.sender.refresh();

                }

            );

 

        }

    };

which does the job and refresh the dropdown with the latest value entered in the first grid. But when i select this new value somehow it looses the dropdown value for that item. So i can not save the record for the second grid. 

Let me know if you need more details.


Regards
Victor

[Petur Subev]

Hello Victor,

How the foreign key collection is displayed is based on the rowTemplate. The rowTemplate is generated when the Grid is initialized (based on the values that you passed to the foreign key columns) and you cannot re-generated it on the fly, you will need to re-initialized the Grid. 

Kind Regards,
Petur Subev
Telerik