jqGrid внутри модального диалогового окна jQuery скрывает сообщения об ошибках - PullRequest
Новая
       7

jqGrid внутри модального диалогового окна jQuery скрывает сообщения об ошибках

2 голосов
/ 24 февраля 2012

В моем представлении ASP.Net MVC 3 у меня есть всплывающее окно, где мне нужно выбрать клиента из списка. Я использую jqGrid в качестве своей таблицы, но проблема в том, что диалоговое окно с ошибкой, которое выскакивает jqGrid (например, «пожалуйста, выберите строку» перед редактированием ошибки), находится позади диалогового окна jQuery.

Как я могу установить z-индекс в предупреждающих сообщениях jqGrid?

HTML: 

<div id="@(Model.PassedCustomerType)SearchPopUp" style="display:none;z-index:1;">
    <table id="jqgCustomersList" cellpadding="0" cellspacing="0"></table> 
    <div id="jqgCustomersPaging"></div> 
</div>

диалоговое окно jquery 

$("#@(Model.PassedCustomerType)Search").click(function () {
    $("#@(Model.PassedCustomerType)SearchPopUp").dialog({ width: 900, height: 400, position: "center", modal: true, zindex: 1, title: 'Select @Model.DisplayPassedCustomerType' });
});

и jqGrid 

$('#jqgCustomersList').jqGrid({
    //url from wich data should be requested
    url: '@Url.Action("GetCustomers")',
    ondblClickRow: function (rowid) {
        jQuery(this).jqGrid('editGridRow', rowid,
            { url: '@Url.Action("UpdateCustomer")', recreateForm: true, closeAfterEdit: true, closeOnEscape: true, reloadAfterSubmit: false });
    },
    //type of data
    datatype: 'json',
    //url access method type
    mtype: 'POST',
    //columns names
    colNames: ['New WO',
            'Details',
            'CustomerID_Key',
            'Customer ID',
            'AddressID',
            'Type',
            'Company',
            'First',
            'Last',
            'Address',
            'Address2',
            'City',
            'St',
            'Zip',
            'Email',
            'Phone',
            'Fax',
            'Cell'
            ],
    //columns model
    colModel: [
                { name: 'NewWO', index: 'NewWO', hidden: true },
                { name: 'Details', index: 'Details', hidden: true },
                { name: 'CustomerID_Key', index: 'CustomerID_Key', hidden: true, editable: true, editrules: { edithidden: false} },
                { name: 'CustomerID', index: 'CustomerID', align: 'left', width: '50px', editable: false },
                { name: 'AddressID', index: 'AddressID', hidden: true, editable: true, editrules: { edithidden: false} },
                { name: 'CustomerType', index: 'CustomerType', align: 'left', width: '50px', editable: true, edittype: 'select', editoptions: { value: "Builder:Builder;HomeOwner:Home Owner"} , editrules: { required: true, edithidden:true}, hidden: true },
                { name: 'CompanyName', index: 'Address.CompanyName', align: 'left', width: '50px', editable: true, edittype: 'text', editoptions: { maxlength: 50 }, editrules: { required: false} },
                { name: 'FirstName', index: 'Address.FirstName', align: 'left', width: '55px', editable: true, edittype: 'text', editoptions: { maxlength: 50 }, editrules: { required: true} },
                { name: 'LastName', index: 'Address.LastName', align: 'left', width: '55px', editable: true, edittype: 'text', editoptions: { maxlength: 50 }, editrules: { required: true} },
                { name: 'Address1', index: 'Address.Address1', align: 'left', width: '90px', editable: true, edittype: 'text', editoptions: { maxlength: 50 }, editrules: { required: true} },
                { name: 'Address2', index: 'Address.Address2', align: 'left', width: '90px', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 50 }, editrules: { required: false, edithidden: true} },
                { name: 'City', index: 'Address.City', align: 'left', width: '65px', editable: true, edittype: 'text', editoptions: { maxlength: 50 }, editrules: { required: true} },
                { name: 'State', index: 'Address.State', align: 'left', width: '12px', editable: true, edittype: 'text', editoptions: { maxlength: 50 }, editrules: { required: true} },
                { name: 'Zip', index: 'Address.Zip', align: 'left', width: '28px', editable: true, edittype: 'text', editoptions: { maxlength: 50 }, editrules: { required: true} },
                { name: 'EmailAddress', index: 'Address.EmailAddress', align: 'left', width: '90px', editable: true, edittype: 'text', editoptions: { maxlength: 50 }, editrules: { required: true} },
                { name: 'Phone', index: 'Address.Phone', align: 'left', width: '100px', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 50 }, editrules: { required: true, edithidden: true} },
                { name: 'Fax', index: 'Address.Fax', align: 'left', width: '100px', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 50 }, editrules: { required: false, edithidden: true} },
                { name: 'Cell', index: 'Address.Cell', align: 'left', width: '100px', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 50 }, editrules: { required: false, edithidden: true} },
            ],
    //pager for grid
    pager: $('#jqgCustomersPaging'),
    //number of rows per page
    rowNum: 10,
    //initial sorting column
    sortname: 'CustomerID',
    //initial sorting direction
    sortorder: 'asc',
    //we want to display total records count
    viewrecords: true,
    //grid height
    height: '100%',
    width: 880
});
$('#jqgCustomersList').jqGrid('filterToolbar', {
    //we want filters to be returned the same way as with advanced searching
    stringResult: true
});
$('#jqgCustomersList').jqGrid('navGrid', '#jqgCustomersPaging',
        { add: true, del: false, edit: true, search: false },
        { url: '@Url.Action("UpdateCustomer", "Customers")', closeAfterEdit: true, closeOnEscape: true },
        { url: '@Url.Action("InsertCustomer", "Customers")', closeAfterAdd: true, closeOnEscape: true });

1 Ответ

5 голосов
/ 24 февраля 2012

Вы можете использовать alertzIndex параметр navGrid , который в настоящее время еще не задокументирован.Это значение по умолчанию 950, но значение по умолчанию для параметра zIndex диалогового окна jQuery UI: 1000 (см. документацию ): 

$('#jqgCustomersList').jqGrid('navGrid', '#pager',
    {cloneToTop: true, alertzIndex: 1005 });

, поэтому в вашемесли это может быть 

$('#jqgCustomersList').jqGrid('navGrid', '#jqgCustomersPaging',
    { del: false, search: false, alertzIndex: 1005 },
    { url: '@Url.Action("UpdateCustomer", "Customers")', closeAfterEdit: true, closeOnEscape: true },
    { url: '@Url.Action("InsertCustomer", "Customers")', closeAfterAdd: true, closeOnEscape: true });
...