DEVHIDE
Login Or Sign up

Need to open a kendo UI modal window upon clicking an option in the context menu

1.2k Views Asked by At

I am creating a context menu for kendo ui grid on my MVC view. The context menu will contain Add, Edit , Delete li items. Clicking the Add option would open the mvc razor view as modal. Same is the case with edit and delete. I know that kendo provides kendo.window to open as modal. How do I call that from the context menu. Do I need to create the modal window or the kendo.Window in a partial view. Could somebody share a relevant example so that I get some direction. The closest example I saw was using Kendo MVC controls. I am looking for examples using kendoui jquery.

View

@Html.Partial("~/Views/Admin/_AdminMenu.cshtml");


<div id="grid" class="grids"></div>

<div id="accessDiv" style=" width 100%; height 100%; background-color #fff;">
    <label>Enter access key</label>
    <input type="text" />
    <input type="button" title="Enter" value="Enter" />
</div>

<ul id="contextMenu">
    <li>Add</li>
    <li class="k-separator"></li>
    <li>Edit</li>
    <li class="k-separator"></li>
    <li>Delete</li>
</ul>

@section scripts{

<script>

    $(document).ready(function () {


        var requests = [
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ranjit Ravindranath Menon", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
              { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ranjit Ravindranath Menon", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }
        ];

        var requestDataSource = new kendo.data.DataSource({ data: requests, pageSize: 20, sort: { field: "requestId", dir: "asc" } });
        requestDataSource.read();

        $("#grid").kendoGrid({
            dataSource: requestDataSource,
            columns: [
                { field: "requestId", title: "Request", width:"110px" },
                { field: "activity", title: "Activity", width: "110px" },
                { field: "team", title: "Team", width: "110px" },
                { field: "priority", title: "Priority", width: "110px" },
                { field: "customer", title: "Customer", width: "130px" },
                { field: "custId", title: "Cust ID", width: "120px" },
                { field: "primeBL", title: "Prim BL", width: "120px" },
                { field: "salesOffice", title: "Sales Office", width: "140px" },
                { field: "createdDate",title: "Created", width: "120px" },
                { field: "requiredBy", title: "Required By", width: "140px" },
                { field: "createdBy", title: "Created By", width: "140px" },
                { field: "withName", title: "With", width: "110px" },
                { field: "status", title: "Status", width: "100px" }
                //{ command: ["edit", "destroy"], width: "250px" }
            ],

            scrollabe:false,
            pageable: true,
            sortable:true,
            //groupable: true,
            filterable: true,
            editable: "inline",
            reorderable: true

        });


        $("#contextMenu").kendoContextMenu({
            target: "#grid",
            alignToAnchor: false
        });


        var accessWindow = $("#accessDiv").kendoWindow({
            actions: {}, /*from Vlad's answer*/
            draggable: true,
            height: "300px",
            modal: true,
            resizable: false,
            title: "Access",
            width: "500px",
            visible: false /*don't show it yet*/
        }).data("kendoWindow").center().open();

        accessWindow.data("kendoWindow").center();
        accessWindow.data("kendoWindow").open();


    });

</script>




}
asp.net-mvc-5 kendo-grid kendo-window kendo-contextmenu
Original Q&A
1

There are 1 best solutions below

6
On BEST ANSWER 

$(document).ready(function () {


        var requests = [
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ranjit Ravindranath Menon", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
              { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ranjit Ravindranath Menon", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" },
            { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }
        ];

        var requestDataSource = new kendo.data.DataSource({ data: requests, pageSize: 20, sort: { field: "requestId", dir: "asc" } });
        requestDataSource.read();

        $("#grid").kendoGrid({
            dataSource: requestDataSource,
            columns: [
                { field: "requestId", title: "Request", width:"110px" },
                { field: "activity", title: "Activity", width: "110px" },
                { field: "team", title: "Team", width: "110px" },
                { field: "priority", title: "Priority", width: "110px" },
                { field: "customer", title: "Customer", width: "130px" },
                { field: "custId", title: "Cust ID", width: "120px" },
                { field: "primeBL", title: "Prim BL", width: "120px" },
                { field: "salesOffice", title: "Sales Office", width: "140px" },
                { field: "createdDate",title: "Created", width: "120px" },
                { field: "requiredBy", title: "Required By", width: "140px" },
                { field: "createdBy", title: "Created By", width: "140px" },
                { field: "withName", title: "With", width: "110px" },
                { field: "status", title: "Status", width: "100px" }
                //{ command: ["edit", "destroy"], width: "250px" }
            ],

            scrollabe:false,
            pageable: true,
            sortable:true,
            //groupable: true,
            filterable: true,
            editable: "inline",
            reorderable: true

        });


        $("#contextMenu").kendoContextMenu({
            target: "#grid",
            alignToAnchor: false,
            select : function(e){
                var selected = e.item;
            if($(selected).text() == 'Add' || $(selected).text() == 'Edit'){
               var accessWindow = $("#accessDiv").kendoWindow({
                      actions: {}, /*from Vlad's answer*/
                      draggable: true,
                      height: "300px",
                      modal: true,
                      resizable: false,
                      title: "Access",
                      width: "500px",
                      visible: false /*don't show it yet*/
                  }).data("kendoWindow").center().open();

                  accessWindow.data("kendoWindow").center();
                  accessWindow.data("kendoWindow").open();
              }   
            }
        });


        


    });
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css"/>

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
    
    <div id="grid" class="grids"></div>

<div id="accessDiv" style=" width 100%; height 100%; background-color #fff;">
    <label>Enter access key</label>
    <input type="text" />
    <input type="button" title="Enter" value="Enter" />
</div>

<ul id="contextMenu">
    <li>Add</li>
    <li class="k-separator"></li>
    <li>Edit</li>
    <li class="k-separator"></li>
    <li>Delete</li>
</ul>

Try this.

Here is the doc link : http://docs.telerik.com/kendo-ui/api/javascript/ui/contextmenu#events-select

    $("#contextMenu").kendoContextMenu({
                target: "#grid",
                alignToAnchor: false,
                select: function(e) {
                     var selectedItem = e.item; // check this item is add or edit and then open the kendo window
                 if($(selectedItem).text() == 'Add' || $(selectedItem).text() == 'Edit'){
                     var accessWindow = $("#accessDiv").kendoWindow({
                     actions: {}, /*from Vlad's answer*/
                     draggable: true,
                     height: "300px",
                     modal: true,
                     resizable: false,
                     title: "Access",
                     width: "500px",
                     visible: false /*don't show it yet*/
                     }).data("kendoWindow").center().open();

                     accessWindow.data("kendoWindow").center();
                     accessWindow.data("kendoWindow").open();
}
                }
    });

For loading the content in Kendo window. you can use the content option in kenod window

Here is the demo : http://demos.telerik.com/kendo-ui/window/ajax

Related Questions in ASP.NET-MVC-5

Related Questions in KENDO-GRID

Related Questions in KENDO-WINDOW

Related Questions in KENDO-CONTEXTMENU

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Popular Questions

Copyright © 2021 Jogjafile Inc.