All AJAX Content Loaded programmatically without opening each item

[John]

I'm using a PanelBar with MVC extensions to have about 5 grids on the screen (grids are AJAX content in each PanelBar item - from partial view).
I also have two dropdowns at the top of the page (companies & locations) where locations cascades from companies. When the cascade event on the location happens, I want to reload all 5 grids at once and not wait for the user to open each panelbar.  In addition, I want to show the count of items in the grid in the text of the panel bar (e.g. "Transmission Errors (25)" where "Transmission Errors" is the text of the panelbar item and 25 is the number of items in the grid). When the grid is loading the count in the panelbar item text should be "--" to indicate loading.

I've got the dropdownlists working (for the most part - that's a different post) and am subscribing to the cascade event and am updating each panelbar item's href (ul>li>a.k-link) to have the appropriate company and location query strings.

Now, how do I force each panelbar to go get that content from the server without programmatically opening each panelbar?  In other words, I want each PanelBar item to get its AJAX content while having each PanelBar remain closed.

For now, I'll hold off on my question about updating the text of the panelbar item (with the grid data total count) until I get past this issue.

Thanks,
--John

[Vladimir Iliev]

Hi John,

You can refresh the panelBar items using the "reload" method described in the widget API:

• PanelBar: reload method

Also you can use the "contentLoad" event of the panelBar or the "dataBound" event of the nested grid widgets to find the closest ".k-item > .k-link" item and modify it's text (with grid rows count) using jQuery. 

Regards,
Vladimir Iliev
Telerik

 

 

[John]

Hi Vladimir,

In the view, I am creating the panelBar but not specifying the content because I need to load the content once the two dropdowns have been loaded.  Once the two dropdowns are loaded, I use the IDs from each of them in the URL to get the Partial View Result (via AJAX post) and then I want to put in the paneBar item.

Here is the MVC code in the view:

@(Html.Kendo().PanelBar()
        .Name("panelbar")
        .ExpandMode(PanelBarExpandMode.Multiple)
        .Items(panelbar =>
            {
                foreach (var panel in Model.Panels)
                {
                    panelbar.Add()
                        .Text(panel.Key)
                        .HtmlAttributes(new { id = panel.Value.Id, url = panel.Value.Url });
                }
            })
        .Deferred()
)

The location change (second drop down that cascades from company) is hooked up to this function:

function locationChange() {
    var payToVendorId = $("#companies").data("kendoDropDownList").value();
    var vendorId = $("#locations").data("kendoDropDownList").value();
    // now go through and update all the grids (one in each panelbar item) to get the approriate data
    $("#panelbar-wrapper>ul>li").each(function () {
        var that = this;
        var url = $(this).attr("url");
        var a = getHrefLocation(url);
        $.ajax({
            type: "POST",
            url: a.pathname,
            data: { gridType: getQueryVariable("gridType", a.search), payToVendorId: payToVendorId, vendorId: vendorId }
        }).done(function (msg) {
            console.log("Data Saved: ");
            $(that).html(msg);
        }).fail(function (jqXhr, textStatus) {
            console.log("Request failed: " + textStatus);
        });
    });
}

I realize that since I'm using .html(), it is replacing the entire contents within the <li> with the result from the AJAX POST PartialViewResult.  Please advise what I'm doing incorrectly so I can get the PartialViewResults to properly load in the panelBar items.

Thanks,
--John

[John]

I've resolve the issue. I set some initial text for each panelBar item (i.e. "Loading") and then in the change event of the location dropdown, check to see if the grid is there - if not, create it via the AJAX call to get the Partial View, otherwise, do a dataSource.read() to refresh it. The read has a data function specified which will get the company and location from the dropdown.