Dropdown populate on parent grid records saved

4 posts, 0 answers
  1. Victor
    Victor avatar
    4 posts
    Member since:
    Sep 2013

    Posted 11 Nov 2013 Link to this post

    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
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 13 Nov 2013 Link to this post

    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!
  3. Victor
    Victor avatar
    4 posts
    Member since:
    Sep 2013

    Posted 13 Nov 2013 Link to this post

    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
  4. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 18 Nov 2013 Link to this post

    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!
Back to Top