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

Drawer Questions

1 Answer 189 Views
Drawer
This is a migrated thread and some comments may be shown as answers.
Patrick
Top achievements
Rank 1
Patrick asked on 18 Sep 2019, 06:54 PM

1. No load from content?  is that planned.

2. if I try .Content(@<text>@Html.Action("getCompanyForm", "Companies")</text>) it fails spectacularly.  pushes the content out of the content container completely and puts it below the content below the container "outside" in the dom.  I was hoping that i could change the content dynamically by loading a different partial view with a specific parameter.

3. Cannot configure so that it doesn't shrink to icons by default?

1 Answer, 1 is accepted

Sort by
1
Tsvetomir
Telerik team
answered on 20 Sep 2019, 11:12 AM

Hi Patrick,

The Kendo UI Drawer's content configuration accepts an HTML string. If you would like to load the content from a partial view, you would have to make use of the jquery.ajax() request.

1. Set the content to an empty element:

.Content("<div id='drawerContainer'></div>")


2. In the document.ready load the view in the content:

$(function (e) {
    $.ajax({
        url: "/Home/MyCustom",
        method: 'GET',
        success: function (result) {
            $('#drawerContainer').html(result);
        }
    });
});


3. Return the partial view:

public ActionResult MyCustom()
{
    return PartialView("GridPartialView");
}

As per not allowing it to collapse by default, simply subscribe to the Change event of the Drawer and prevent the execution:

function onHide(e) {
    e.preventDefault();
}

This way, it would close only if the user clicks on the "sandwich" icon. 

As per the LoadContentFrom functionality, I would recommend that you submit a feature request at our public Feedback portal at:

https://feedback.telerik.com/kendo-jquery-ui

Let me know in case additional assistance is required.

 

Best regards,
Tsvetomir
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Russell
Top achievements
Rank 1
Iron
Iron
commented on 16 Sep 2021, 10:12 PM | edited

This is great. I have that working, now I want to go to each different partial view by clicking the drawer. How do I get the drawer name for "onItemClick" (sorry if my js is wrong, I'm rusty):

 

        function onItemClick(e) {
            var drawer = $("#naviDrawer").data("kendoDrawer");
            /*magic js that gets the name here*/
            var drawerName = $("#naviDrawer").data("kendoDrawer").MagicNameFunction();
            var nextUrl = 'index';
            if(drawerName == 'blueWidgets')
            {
                nextUrl = 'blueWidgetPartial'
            }
            $.ajax({
                url: nextUrl,
                method: 'GET',
                success: function (result) {
                    $('#drawerContainer').html(result);
                }
            });
            
            if(!e.item.hasClass("k-drawer-separator")){
                e.sender.drawerContainer.find("#drawer-content > div").addClass("hidden");
                e.sender.drawerContainer.find("#drawer-content").find("#" + e.item.find(".k-item-text").attr("data-id")).removeClass("hidden");
            }
        }
Russell
Top achievements
Rank 1
Iron
Iron
commented on 17 Sep 2021, 05:13 AM

This seems to work:

        function onItemClick(e) {
            var drawerName = e.item.find(".k-item-text").attr("data-id");
            var nextUrl = 'index';
            if(drawerName == 'blueWidgets')
            {
                nextUrl = 'blueWidgetPartial'
            }
            $.ajax({
                url: nextUrl,
                method: 'GET',
                success: function (result) {
                    $('#drawerContainer').html(result);
                }
            });
            
            if(!e.item.hasClass("k-drawer-separator")){
                e.sender.drawerContainer.find("#drawer-content > div").addClass("hidden");
                e.sender.drawerContainer.find("#drawer-content").find("#" + e.item.find(".k-item-text").attr("data-id")).removeClass("hidden");
            }
        }
Tsvetomir
Telerik team
commented on 17 Sep 2021, 06:44 AM

Hi Russell, indeed, you could use that approach to gather the id of the widget. Alternatively, you could access it as follows:

e.sender.element.attr("id")

Russell
Top achievements
Rank 1
Iron
Iron
commented on 17 Sep 2021, 10:19 PM | edited

That syntax doesn't work for me?

I tried

var itm = e.sender.element.attr("data-id");

and

var itm = e.sender.element.attr("id");

Tsvetomir
Telerik team
commented on 20 Sep 2021, 11:23 AM

Hi, Russell, the syntax appear to be correct. I have tested it out in the following Dojo: https://dojo.telerik.com/ETEfESEh. Can you confirm that the drawer's ID is alerted when an item is clicked?
Russell
Top achievements
Rank 1
Iron
Iron
commented on 23 Sep 2021, 01:31 AM

Sorry for the delay. Your example code returns the name of the control (drawer), not the name of which drawer was clicked? I need to know the drawer name so I can call the correct partial view? I used the data-id just because that's the way the example code did it. If there is a better way I am interested (e.g. use an `id` on the `li` item of the drawer template?)
Tsvetomir
Telerik team
commented on 23 Sep 2021, 11:39 AM

Thank you for sharing that under "drawer" you have meant a single item of the actual Drawer widget. Since you would like to access the exact item, the approach with the ID attribute would be most suitable. At present, the e.item would return only the markup for the drawer item, therefore, you would still have to find needed information with additional JavaScript logic. 
Russell
Top achievements
Rank 1
Iron
Iron
commented on 23 Sep 2021, 04:28 PM

Thank you for the clarification. Our site looks fantastic with the drawer control. I'm very pleased.
Tsvetomir
Telerik team
commented on 24 Sep 2021, 08:29 AM

Hi, Russell, I am happy to hear that you find the drawer control useful and suitable for your scenario. Sharing feedback regarding any of our products or support services is greatly appreciated. If there is any other feedback, feel free to share it. 
Tags
Drawer
Asked by
Patrick
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Share this question
or