Rendering View in a Modal Popup

[Sudeshna23Member]

Hi,

Is it possible to render view in a modal popup(jqxwindow). Kindly provide with an example. The modal popup opens on click of a cell in a jqxgrid.

[Peter StoevKeymaster]

Hi Sudeshna23,

You can take a look at this help topic: popupediting.htm.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Sudeshna23Member]

Hi,

I had already gone through the example posted by you. Though I could open the modal popup from the grid,
I was unable to render a view in it. However I have solved the problem now. Following is the code snippet.

      var urlRedirectEdit = '@Url.Action("Edit","User")';
        var urlRedirectDelete = '@Url.Action("Delete","User")';
        var urlGetUsers = '@Url.Action("GetUsers","User")';
var buttonClickEdit = function (event, row) {
    // open the popup window when the user clicks a button.
    id = event.target.id;
    var value = $("#jqxgrid").jqxGrid('getcellvalue', id, 'UserID');
    var offset = $("#jqxgrid").offset();
    $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.right) + 60, y: parseInt(offset.top) + 20} });
    $("#popupWindow").jqxWindow('setContent', 'Loading...');
    alert(urlRedirectEdit + '/' + value);
    var jqxhr = $.get(urlRedirectEdit + '/' + value, function (data) {
        //alert(data);
        $("#popupWindow").jqxWindow('setContent', data);
    })
                                          .success(function (data) {
                                              // alert("Success");
                                          })
                                          .error(function () {// alert("Failure");
                                          })
                                          .complete(function () {// alert("Complete");
                                          });
    $("#popupWindow").jqxWindow('show');
}
var buttonClickDelete = function (event, row) {
    // open the popup window when the user clicks a button.
    id = event.target.id;
    var value = $("#jqxgrid").jqxGrid('getcellvalue', id, 'UserID');
    var offset = $("#jqxgrid").offset();
    $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.right) + 60, y: parseInt(offset.top) + 20} });
    $("#popupWindow").jqxWindow('setContent', 'Loading...');
    var jqxhr = $.get(urlRedirectDelete + '/' + value, function (data) {
        //alert(data);
        $("#popupWindow").jqxWindow('setContent', data);
    })
                                          .success(function (data) {
                                              // alert("Success");
                                          })
                                          .error(function () {// alert("Failure");
                                          })
                                          .complete(function () {// alert("Complete");
                                          });
    $("#popupWindow").jqxWindow('show');
}
var GetQueryStringParams = function (sParam) {
    var sPageURL = window.location.search.substring(1);
    // alert(sPageURL);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) {
            return sParameterName[1];
        }
    }
}
$(document).ready(function () {
   // alert(GetQueryStringParams('userid'));
    var source = {
        datatype: "json",
        datafields: [{ name: 'UserID' }, { name: 'UserName' },
               { name: 'ParentUserID' }, { name: 'FirstName' }, { name: 'LastName' }, { name: 'City' },
               { name: 'Phone' }, { name: 'Email' }, { name: 'UserIsActive', type: 'bool' }, { name: 'UserCreatedOn', type: 'date' },
                { name: 'UserLastModifiedOn', type: 'date'}],
        url: urlGetUsers,
        data: { userid: GetQueryStringParams('userid') },
        contentType: "application/json; charset=utf-8",
        id: 'UserID'
    };
    var dataAdapter = new $.jqx.dataAdapter(source, {
        downloadComplete: function (data, status, xhr) { },
        loadComplete: function (data) { },
        loadError: function (xhr, status, error) { }
    });
    var editrow = -1;
    var deleterow = -1;
    $("#jqxgrid").jqxGrid({
        width: 1100,
        source: dataAdapter,
        theme: 'darkblue',
        filterable: true,
        sortable: true,
        pageable: true,
        selectionmode: 'singlerow',
        groupable: true,
        enabletooltips: true,
        autoshowfiltericon: true,
        columns: [{ text: 'UserID', datafield: 'UserID', width: 50 },
                { text: 'UserName', datafield: 'UserName', width: 150 },
                { text: 'ParentUserID', datafield: 'ParentUserID', width: 50 },
                { text: 'FirstName', datafield: 'FirstName', width: 150 },
                { text: 'LastName', datafield: 'LastName', width: 150 },
                { text: 'City', datafield: 'City', width: 120 },
                { text: 'Phone', datafield: 'Phone', width: 120 },
                { text: 'Email', datafield: 'Email', width: 120 },
                { text: 'UserIsActive', columntype: 'checkbox', datafield: 'UserIsActive', width: 100 },
                { text: 'UserCreatedOn', datafield: 'UserCreatedOn', columntype: 'datetimeinput', width: 100, cellsformat: 'D' },
                { text: 'UserLastModifiedOn', datafield: 'UserLastModifiedOn', columntype: 'datetimeinput', width: 100, cellsformat: 'D' },
                { text: 'Edit', datafield: 'Image', width: 60, cellsrenderer: function (row) {
                    return '<a href="#" onClick="buttonClickEdit(event)" width="20" height="20"><img id="' + row + '"  style="margin-left: 5px;" height="20" width="20" src="../Content/images/Edit.png"/></a>';
                }
                },
                { text: 'Delete', datafield: 'Image', width: 60, cellsrenderer: function (row) {
                    return '<a href="#" onClick="buttonClickDelete(event)" width="20" height="20"><img  id="' + row + '" style="margin-left: 5px;" height="20" width="20" src="../Content/images/Delete.png"/></a>';
                }
                }
                ]
    });
    $('#clearfilteringbutton').jqxButton({ height: 25, theme: 'darkblue' });
    $('#filterbackground').jqxCheckBox({ checked: true, height: 25, theme: 'darkblue' });
    $('#filtericons').jqxCheckBox({ checked: false, height: 25, theme: 'darkblue' });
    // clear the filtering.
    $('#clearfilteringbutton').click(function () {
        $("#jqxgrid").jqxGrid('clearfilters');
    });
    // show/hide filter background
    $('#filterbackground').bind('change', function (event) {
        $("#jqxgrid").jqxGrid({ showfiltercolumnbackground: event.args.checked });
    });
    // show/hide filter icons
    $('#filtericons').bind('change', function (event) {
        $("#jqxgrid").jqxGrid({ autoshowfiltericon: !event.args.checked });
    });
    // initialize the popup window and buttons.
    $("#popupWindow").jqxWindow({ width: 500, height: 1300, resizable: true, theme: 'darkblue', isModal: true, autoOpen: false, modalOpacity: 0.01 });
    $("#popupWindow1").jqxWindow({ width: 250, height: 500, resizable: true, theme: 'darkblue', isModal: true, autoOpen: false, modalOpacity: 0.01 });
});

In the buttonclickEdit and buttonClickDelete events I have rendered the view using
var jqxhr = $.get(urlRedirectEdit + ‘/’ + value, function (data) {
//alert(data);
$(“#popupWindow”).jqxWindow(‘setContent’, data);
})

[Author]

Posts