This is a migrated thread and some comments may be shown as answers.

Dropdown populate on parent grid records saved

3 Answers 33 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Victor
Top achievements
Rank 1
Victor asked on 11 Nov 2013, 11:57 PM
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

3 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 13 Nov 2013, 02:10 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Victor
Top achievements
Rank 1
answered on 13 Nov 2013, 11:24 PM
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
0
Petur Subev
Telerik team
answered on 18 Nov 2013, 09:14 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Victor
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Victor
Top achievements
Rank 1
Share this question
or