asp.net-mvc-5kendo-gridkendo-windowkendo-contextmenu

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


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>




}

Solution

  • $(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