Kendo Menu and Partial View URL Routing

2 posts, 0 answers
  1. Ori
    Ori avatar
    3 posts
    Member since:
    Jul 2016

    Posted 30 Mar Link to this post

    I have here a MENU which would show partial views as the content. The function openPatientDetails is a switch statement that basically just adds a class to those divs that I want to hide and removes the class to those divs that I want to show. So every time I click from the Menu which adds/removes the hidden class, I also need the url to change without reloading the browser and every time I click back or forward it should go to the partial view that I am supposed to be. I tried the history.pushState but it's so static because I need to do it for all of the tabs. Is there any way to solve this issue?

    <div class="panel-body">
        <div id="row_menu" class="row" style="margin-top: -15px;">
            @(Html.Kendo().Menu()
                    .Name("Menu_PatientDetails")
                    .Items(items =>
                    {
                        items.Add().Text("Patient Information").Selected(true).Enabled(false);
                        items.Add().Text("Insurance").Enabled(false);
                        items.Add().Text("Visits").Enabled(false);
                        items.Add().Text("Notes").Enabled(false);
                        items.Add().Text("Documents").Enabled(false);
                    })
                    .Events(e=>e.Select("openPatientDetails"))
            )
        </div>
     
        <div id="PatientInformationPanel">
            @Html.Action("ShowPatientInformation", "Patient")
        </div>
     
        <div id="PatientInsurancePanel" class="hidden">
            @Html.Action("ShowPatientInsurance", "Patient")
        </div>
     
        <div id="PatientYearPanel" class="hidden">
            @Html.Action("ShowPatientYear", "Patient")
        </div>
     
        <div id="CasesPanel" class="hidden">
            @Html.Action("ShowPatientCases", "Patient")
        </div>
        <div id="PatientDocumentPanel" class="hidden">
            @Html.Action("ShowPatientDocuments", "Patient")
        </div>
    </div>

     

    function openPatientDetails(e) {
         $(e.item).addClass("k-state-selected");
         $("#PatientInformationPanel").removeClass("hidden");
         $("#PatientInsurancePanel").addClass("hidden");
         $("#PatientYearPanel").addClass("hidden");
         $("#CasesPanel").addClass("hidden");
         $("#PatientDocumentPanel").addClass("hidden");
    }

     

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1326 posts

    Posted 03 Apr Link to this post

    Hello Ori,

    I am not sure how the issue you are facing is related to the Menu and its functionality. The Menu items have an Action method: 
    .Action("Construction", "Home");
    that allows the specified action in the controller to be called. That's the built-in Menu functionality with regard to calls to the server. What result (view) will the called action return would depend on the specific scenario and application logic. The same is valid for routing and browser history, which are not related to the Menu's configuration, API or features.

    Regards,
    Ivan Danchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top