Drawer Questions

[Patrick]

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?

[Tsvetomir]

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

[Russell]

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]

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]

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]

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]

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]

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]

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]

Thank you for the clarification. Our site looks fantastic with the drawer control. I'm very pleased.

[Tsvetomir]

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.