EVOLUTION-NINJA

Edit File: training_plan.php

<?php echo view('includes/faculty_header'); ?>

<div class="row my_header">
        <h3 style="padding-bottom:10px;border-bottom:2px dashed #468662;margin-bottom:20px; font-weight: bold;">ADD TRAINING PLAN</h3>
        <a href="javascript:history.back()" class="btn btn-primary" style="float:right; margin-right: 50px;">Back</a>

<div class="form-group">
                    <label class="control-label col-sm-4">Select Category Name</label>
                    <div class="col-sm-8" name="subject">
                        <select class="form-control" name="domain_id" id="category_list" required>
                            <option value="">Select Category</option>
                            <?php if ($domain) {
                                foreach ($domain as $val) { ?>
                                    <option value="<?php echo $val->domain_id ?>"><?php echo $val->domain_name; ?></option>
                            <?php }
                            } ?>
                        </select>
                    </div>
                </div>

<div class="form-group">
                    <label class="control-label col-sm-4">Select Subject Name</label>
                    <div class="col-sm-8" name="subject">
                        <select class="form-control" name="sub_domain_id" id="sub_domains" required>
                            <option value="">Select Subject</option>

</select>
                    </div>
                </div>

<div class="form-group" id="chapter">
                    <label class="control-label col-sm-4">Select Chapter</label>
                    <div class="col-sm-8">
                        <select class="form-control" name="chapter[]" required>
                            <option value="">Select Chapter</option>
                        </select>
                    </div>
                </div>

<div class="form-group">
                    <label class="control-label col-sm-4">Session Time</label>
                    <div class="col-sm-8 timepicker1">
                        <input id="timepicker1" name="session_time" type="text" class="form-control add_time" placeholder="HH:MM" required="" />
                    </div>
                </div>

<div class="form-group" style="padding-top:10px;">

<div class=" row view_faculty" style="margin-left:30%;">
                                <div class="col-sm-6">
                               <center><button type="submit" class="btn btn-primary submit">Submit</button></center>
                                </div>
                                <div class="col-sm-6">
                           <button type="button" id="cancel" class="btn btn-danger center-block cancel cancel_1">Cancel</button>
                            </div>
                            </div>
                </div>

</form>

</div>

<div id="jaytab" style="margin-top:3%" class="grid">
        <table id="list2"></table>
        <div id="pager2"></div>
        <div id="dialogSelectRow" title="Warning" style="display:none">
            <p>Please select row</p>
        </div>
    </div>
    
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Update Training Plan</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="update_training_plan">

<div class="form-group">
                            <label class="control-label col-sm-4">Select Category Name</label>
                            <div class="col-sm-8" name="subject">
                                <select class="form-control" name="domain_id" id="edit_category_list" required>
                                    
                                </select>
                            </div>
                        </div>

<div class="form-group">
                            <label class="control-label col-sm-4">Select Subject Name</label>
                            <div class="col-sm-8" name="subject">
                                <select class="form-control sub_domain_list" id="sub_domain_list" name="sub_domain_id" required>
                                    <option value="">Select Subject</option>

</select>
                            </div>
                        </div>

<div class="form-group" id="modal_chapter">
                            <label class="control-label col-sm-4">Select Chapter</label>
                            <div class="col-sm-8">
                                <select class="form-control" name="chapter[]" required>
                                    <option value="">Select Chapter</option>
                                </select>
                            </div>
                        </div>

<div class="form-group">
                            <label class="control-label col-sm-4">Session Time(HH:MM)</label>
                            <div class="col-sm-8">
                                <input id="timepicker2" name="session_time" type="text" class="form-control session_time" required="" />
                            </div>
                        </div>

<div class="form-group" style="padding-top:10px;">
                            <div class="col-sm-offset-4 col-sm-8">
                                <button type="submit" class="btn btn-primary submit update_submit">Update</button>
                            </div>
                            
                        </div>

</form>
                </div>

</div>
        </div>
    </div>

</div>

$('#timepicker2').timepicki({
            start_time: ["00", "00"],
            show_meridian: false
        });
        $('#timepicker1').timepicki({
            start_time: ["00", "00"],
            show_meridian: false
        });

$('#add_training_plan').submit(function(e) {
            e.preventDefault();

formdata = new FormData($(this)[0]);

$(".submit").attr('disabled', 'disabled');
            $(".submit").text("Submitting...");

var session_time = $('.add_time').val();
            if (session_time != '00:00') {

$.ajax({

type: 'post',
                    url: '<?php echo site_url('add_training_plans') ?>',
                    data: formdata,

contentType: false,
                    processData: false,

success: function(response) {
                        //   response=jQuery.parseJSON(response);
                        console.log(response);

//grid

CallGrid();

function CallGrid(access_rights_global, access_result_global) {
            jQuery("#list2").jqGrid({

url: "<?php echo site_url('get_session_list') ?>",
                mtype: "get",
                datatype: "json",
                colNames: ['ID', 'Action','Category', 'Subject', 'Duration'],
                colModel: [{
                        name: 'training_plan_id',
                        index: 'training_plan_id',
                        width: 10,
                        hidden: true,
                        editable: false,
                        key: true
                    },
                    {
                        name: 'sub_domain_id',
                        index: 'sub_domain_id',
                        width: 55,
                        align: 'center',
                        hidden: true,
                        editable: false
                    },
                    // {
                    //     name: '',
                    //     index: '',
                    //     width: 20,
                    //     align: 'center',
                    //     hidden: true,
                    //     editable: false
                    // },
                    {
                        name: 'domain_name',
                        index: 'domain_name',
                        editable: false,
                        align: 'center',
                        width: 400
                    },
                    {
                        name: 'sub_domain',
                        index: 'sub_domain',
                        editable: false,
                        align: 'center',
                        width: 400
                    },
                    {
                        name: 'total_duration',
                        index: 'total_duration',
                        align: 'center',
                        editable: false,
                        width: 300
                    },
                ],

rowNum: 20,
                rowTotal: 2000,
                rowList: [20, 30],
                rownumbers: true,
                //rownumWidth: 60,
                pager: "#pager2",
                sortname: 'id',
                viewrecords: true,
                gridview: true,
                //autowidth: true,
                sortorder: "asc",
                shrinkToFit: true,
                loadonce: true,
                caption: "Training Plan List",

subGrid: true,

subGridRowExpanded: function(subgrid_id, row_id) {
                    var sub_domain_ids = $('#list2').jqGrid('getCell', row_id, 'sub_domain_id');
                    var training_plan_id = $('#list2').jqGrid('getCell', row_id, 'training_plan_id');
                    var subgrid_table_id;
                    subgrid_table_id = subgrid_id + "_t";
                    jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");

// CallQuestionGrid(row_id);
                    jQuery("#" + subgrid_table_id).jqGrid({
                        url: "<?php echo site_url('chpater_wise_training_plans'); ?>/" + sub_domain_ids,
                        datatype: "json",
                        colNames: ['SI', 'Action', 'Chapter', 'Session Time', 'Added Date', 'Approval Status'],
                        colModel: [{
                                name: 'training_plan_id',
                                index: 'training_plan_id',
                                width: 50,
                                hidden: true,
                                editable: false,
                                key: true
                            },
                            {
                                name: '',
                                index: '',
                                search: false,
                                width: 20,
                                align: 'center',
                                editable: false,
                                formatter: function(cellvalue, options, rowObject) {
                                    var retVal = "";
                                    var retVal = '<a data-toggle="tooltip" title="Edit" class="edit" onclick="edit(' + rowObject.training_plan_id + ')" material_id="' + rowObject.training_plan_id + '" href="javascript:void(0);"><span class="glyphicon glyphicon-edit"></span></a> <a data-toggle="tooltip" title="Delete" onclick="Delete(' + rowObject.training_plan_id + ')"; class="delete' + rowObject.training_plan_id + '" href="javascript:void(0);"><span class="glyphicon glyphicon-trash"></span></a>';
                                    return retVal;
                                }
                            },
                            {
                                name: "chapters",
                                index: "chapters",
                                align: 'center',
                                width: 65
                            },
                            {
                                name: "session_time",
                                index: "session_time",
                                align: 'center',
                                width: 40
                            },
                            {
                                name: "created_at",
                                index: "created_at",
                                align: 'center',
                                width: 40
                            },
                            {
                                name: 'approval_status',
                                index: 'approval_status',
                                align: 'center',
                                editable: false,
                                width: 40
                            },

],
                        height: 'auto',
                        autowidth: true,
                        shrinkToFit: true,
                        rowNum: 20,
                        sortname: 'num',
                        sortorder: "asc",
                        loadonce: true,

}).navGrid('#' + subgrid_table_id + '', {
                        edit: false,
                        add: false,
                        del: false,
                        search: false
                    });
                }

});
            $("#list2").jqGrid("setLabel", "rn", "SL");
            $("#list2").jqGrid('filterToolbar', {
                searchOperators: false,
                stringResult: true,
                searchOnEnter: false,
                defaultSearch: "cn"
            }); //for multisearch code,remove if not required

$("#list2").jqGrid('navGrid', '#pager2', {
                    edit: false,
                    add: false,
                    del: false,
                    search: false,
                    refreshstate: "current"
                }, {}, {}, {}, {
                    sopt: ['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
                    closeOnEscape: true,
                    multipleSearch: true,
                    closeAfterSearch: true,
                    closeAfterDelete: true,
                    closeAfterEdit: true
                },

);

}

});

function Delete(id) {
        var type = "post";
        swal({

title: "Are you sure?",
                text: "You will not be able to recover this data !",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, delete it!",
                cancelButtonText: "No, cancel plz!",
                closeOnConfirm: false,
                closeOnCancel: false
            },
            function(isConfirm) {

if (isConfirm) {

$(".sweet-alert").hide();
                    $(".sweet-overlay").hide();
                    $('.delete' + id + '').text('Deleting..');
                    $.ajax({
                        type: type,
                        url: "<?php echo site_url('delete_training_plan'); ?>",
                        data: {
                            'id': id
                        },
                        success: function(response) {
                            // response = jQuery.parseJSON(response);
                            console.log(response);
                            if (response.result == 1) {

toastr["success"](response.message);
                                $("#list2").setGridParam({
                                    datatype: 'json',
                                    page: 1
                                }).trigger('reloadGrid');
                            }

}
                    });

} else {

$(".sweet-alert").hide();
                    $(".sweet-overlay").hide();
                }

});
    }

function edit(id) {
        var type = "post";
        $(".training_plan_id").val(id);
        $.ajax({
            type: type,
            url: "<?php echo site_url('training_plan_details'); ?>",
            data: {
                'training_plan_id': id
            },
            success: function(response) {
                // response = jQuery.parseJSON(response);
                console.log(response);
                if (response.result == 1) {

$("#myModal").modal('show');

//----------------------------------------------------//

$.ajax({
                        type: 'get',
                        url: "<?php echo site_url('training_plan_domains'); ?>",
                        success: function(response) {
                            // response = jQuery.parseJSON(response);
                            console.log(response);
                            if (response.result == 1) {
                                var options = '';
                                // options += '<option value="">Select Category</option>';

$.each(response.message, function(index, value) {

options += '<option value="' + value.domain_id + '">' + value.domain_name + '</option>';

});

$("#edit_category_list").html(options);
                            }
                        }
                    });

//------------------------------------------------------//

$(".session_time").val(response.message.session_time);
                    if (response.message.return_status == 'NOT_RETURNED') {
                        chapter(response.message.sub_domain_id, id);
                        var chapters = jQuery.parseJSON(response.message.chapter_ids);
                        subjects(response.message.domain_id);
                        $(".sub_domain_list").val(response.message.sub_domain_id);
                        $("#edit_category_list").val(response.message.domain_id);

$('#edit_category_list option[value!="' + response.message.domain_id + '"]').remove();

$.each(chapters, function(index, value) {

$('.modal_chapter_list')[0].sumo.selectItem($('.modal_chapter_list').find('option[value="' + value + '"]').index());
                        });
                    } else {
                        $('#edit_category_list option[value="' + response.message.domain_id + '"]').remove();
                    }
                }
            }
        });

}

$('#update_training_plan').submit(function(e) {
        e.preventDefault();

formdata = new FormData($(this)[0]);

$(".update_submit").attr('disabled', 'disabled');
        $(".update_submit").text("Updating...");

var session_time = $('.session_time').val();
        if (session_time != '00:00') {

$.ajax({

type: 'post',
                url: '<?php echo site_url('update_training_plan') ?>',
                data: formdata,

contentType: false,
                processData: false,

success: function(response) {
                    // response = jQuery.parseJSON(response);
                    console.log(response);

if (response.result == 1) {
                        $(".update_submit").text("Submit");
                        $(".update_submit").removeAttr('disabled');
                        toastr["success"](response.message);
                        $("#list2").setGridParam({
                            datatype: 'json',
                            page: 1
                        }).trigger('reloadGrid');
                        $('#update_training_plan')[0].reset();
                        $("#myModal").modal('hide');
                    } else {
                        toastr["error"](response.message);
                        $(".update_submit").removeAttr('disabled');
                    }
                }
            });
        } else {
            $(".update_submit").text("Submit");
            $(".update_submit").removeAttr('disabled');
            toastr["error"]('Please enter the correct time');
        }
    });

// $("#sub_domains").change(function() {

//     var sub_domain_id = $("#sub_domains").val();

//     $.ajax({
    //         url: "<?php //echo site_url('get_training_plan_chapters') ?>",
    //         type: "POST",
    //         data: {
    //             'sub_domain_id': sub_domain_id
    //         },
    //         async: false,
    //         success: function(response) {
    //             // response = jQuery.parseJSON(response);
    //             console.log(response);
    //             if (response.result == 1) {
    //                 var options = '';
    //                 options += '<label class="control-label col-sm-4">Select Chapter</label>';
    //                 options += '<div class="col-sm-8">';
    //                 options += '<select class="form-control chapter_list" name="chapter[]"  multiple>';
    //                 $.each(response.message, function(idx, vx) {
    //                     options += '<option value="' + vx.chapter_id + '">' + vx.chapter_name + '</option>';
    //                 });
    //                 options += '</select>';
    //                 options += '</div>';

//                 $('#chapter').html(options);
    //                 $('.chapter_list').SumoSelect({
    //                     selectAll: true
    //                 });
    //             } else {
    //                 var options = '';
    //                 options += '<label class="control-label col-sm-4">Select Chapter</label>';
    //                 options += '<div class="col-sm-8">';
    //                 options += '<select class="form-control chapter_list" name="chapter[]">';
    //                 options += '<option value="">Select Chapter</option>';
    //                 options += '</select>';
    //                 options += '</div>';
    //                 $('#chapter').html(options);

//             }
    //         }
    //     });
    // });

$("#sub_domains").change(function () {
    var sub_domain_id = $("#sub_domains").val();

$.ajax({
        url: "<?php echo site_url('get_training_plan_chapters') ?>",
        method: "POST",
        data: { 'sub_domain_id': sub_domain_id },
        success: function (response) {
            if (response.result == 1) {
                var options = '<label class="control-label col-sm-4">Select Chapter</label>' +
                    '<div class="col-sm-8">' +
                    '<select class="form-control chapter_list" name="chapter[]"  multiple>';
                $.each(response.message, function (idx, vx) {
                    options += '<option value="' + vx.chapter_id + '">' + vx.chapter_name + '</option>';
                });
                options += '</select>' +
                    '</div>';

$('#chapter').html(options);
                $('.chapter_list').SumoSelect({ selectAll: true });
            } else {
                var options = '<label class="control-label col-sm-4">Select Chapter</label>' +
                    '<div class="col-sm-8">' +
                    '<select class="form-control chapter_list" name="chapter[]">' +
                    '<option value="">Select Chapter</option>' +
                    '</select>' +
                    '</div>';
                $('#chapter').html(options);
            }
        }
    });
});

$("#sub_domain_list").change(function() {
        var sub_domain_id = $("#sub_domain_list").val();
        chapter(sub_domain_id);
    });

// function chapter(sub_domain_id, id) {
    //     $.ajax({
    //         url: "<?php //echo site_url('get_training_plan_edit_chapters') ?>",
    //         type: "POST",
    //         data: {
    //             'sub_domain_id': sub_domain_id,
    //             'training_plan_id': id
    //         },
    //         async: false,
    //         success: function(response) {
    //             // response = jQuery.parseJSON(response);
    //             console.log(response);
    //             if (response.result == 1) {
    //                 var options = '';
    //                 options += '<label class="control-label col-sm-4">Select Chapter</label>';
    //                 options += '<div class="col-sm-8">';
    //                 options += '<select class="form-control modal_chapter_list" name="chapter[]"  multiple >';
    //                 $.each(response.message, function(idx, vx) {
    //                     options += '<option value="' + vx.chapter_id + '">' + vx.chapter_name + '</option>';
    //                 });
    //                 options += '</select>';
    //                 options += '</div>';

//                 $('#modal_chapter').html(options);
    //                 $('.modal_chapter_list').SumoSelect({
    //                     selectAll: true
    //                 });
    //             } else {
    //                 var options = '';
    //                 options += '<label class="control-label col-sm-4">Select Chapter</label>';
    //                 options += '<div class="col-sm-8">';
    //                 options += '<select class="form-control chapter_list" name="chapter[]" required >';
    //                 options += '<option value="">Select Chapter</option>';
    //                 options += '</select>';
    //                 options += '</div>';
    //                 $('#modal_chapter').html(options);

//             }
    //         }
    //     });
    // }

function chapter(sub_domain_id, id) {
        $.ajax({
            url: "<?= site_url('get_training_plan_edit_chapters') ?>",
            type: "POST",
            data: {'sub_domain_id': sub_domain_id, 'training_plan_id': id},
            async: false,
            success: function (response) {
                // response = $.parseJSON(response);
                console.log(response);

var options = '';
                options += '<label class="control-label col-sm-4">Select Chapter</label>';
                options += '<div class="col-sm-8">';

if (response.result == 1) {
                    options += '<select class="form-control modal_chapter_list" name="chapter[]"  multiple >';
                    $.each(response.message, function (idx, vx) {
                        options += '<option value="' + vx.chapter_id + '">' + vx.chapter_name + '</option>';
                    });
                    options += '</select>';
                } else {
                    options += '<select class="form-control chapter_list" name="chapter[]" required >';
                    options += '<option value="">Select Chapter</option>';
                    options += '</select>';
                }

options += '</div>';
                $('#modal_chapter').html(options);

if (response.result == 1) {
                    $('.modal_chapter_list').SumoSelect({selectAll: true});
                }
            }
        });
    }

// $("#category_list").change(function() {

//     var domain_id = $("#category_list").val();
    //     $.ajax({
    //         url: "<?php //echo site_url('get_domain_subdomain') ?>",
    //         type: "POST",
    //         data: {
    //             'domain_id': domain_id
    //         },
    //         async: false,
    //         success: function(response) {
    //             // response = jQuery.parseJSON(response);
    //             console.log(response);
    //             if (response.result == 1) {
    //                 var options = '';
    //                 options += '<option value="">Select Category</option>';
    //                 $.each(response.message, function(idx, vx) {
    //                     options += '<option value="' + vx.sub_domain_id + '">' + vx.sub_domain + '</option>';
    //                 });
    //                 $('#sub_domains').html(options);
    //             } else {
    //                 var options = '';
    //                 options += '<option value="">Select Category</option>';

//                 $('#sub_domains').html(options);
    //             }
    //         }
    //     });
    // });

$("#category_list").change(function() {
        var domainId = $("#category_list").val();

$.ajax({
            url: "<?= site_url('get_domain_subdomain') ?>",
            type: "POST",
            data: {
                'domain_id': domainId
            },
            success: function(response) {
                console.log(response);
                if (response.result == 1) {
                    var options = '<option value="">Select Category</option>';
                    $.each(response.message, function(idx, vx) {
                        options += '<option value="' + vx.sub_domain_id + '">' + vx.sub_domain + '</option>';
                    });
                    $('#sub_domains').html(options);
                } else {
                    var options = '<option value="">Select Category</option>';
                    $('#sub_domains').html(options);
                }
            }
        });
    });

$("#edit_category_list").change(function() {

var domain_id = $("#edit_category_list").val();
        subjects(domain_id);

});

$('#sub_domain_list').html(options);
                }
            }
        });
    }

const cancelButton = document.getElementById("cancel");

// Add a click event listener to the cancel button
cancelButton.addEventListener("click", function() {
  // Clear the form data
  document.forms[0].reset();
});

</script>

<?php echo view('includes/faculty_footer'); ?>
<style>
    #page-wrapper{
        background-image: url(public/assets/website_assets/images/banner.png);
        background-size: cover;
    }
    #FrmGrid_list2 {
        width: 100% !important;
    }

#add_training_plan{
        margin-right: 15%;
    }

.ui-jqdialog .ui-jqdialog-titlebar {
        height: 29px !important;
        background-color: #001a00;
        color: white;
        padding-left: 10px;
    }

.fm-button {
        height: 21px !important;
        padding: 1px;
        margin-right: 10px !important;
        height: 21px !important;
        width: 43%;
        margin-top: -7px !important;
    }

.ui-jqdialog-content td.navButton {
        padding-top: 12px !important;
    }

.ui-jqgrid .ui-jqgrid-titlebar {
        height: 27px !important;
        /*background:#1e7ad7 !important;*/
        color: white !important;
    }

.ui-jqgrid-bdiv {
        height: auto !important;

}

.ui-widget-overlay {
        z-index: 0 !important;
    }

/* .ui-widget-header
{
background: #1e7ad7 !important;
} */
    .ui-jqgrid-hdiv ui-state-default {
        /* width: 873px !important;  */
        cursor: default !important
    }

ui-state-highlight,
    .ui-widget-content .ui-state-highlight,
    .ui-widget-header .ui-state-highlight {
        border: 1px solid #fed22f;
        background: #ffe45c;
    }

.ui-state-default,
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default {
        font-weight: bold;
        color: black;
    }

/* .ui-jqgrid .ui-jqgrid-bdiv {
	overflow-y: scroll;
	overflow-x: scroll ;
}

.ui-jqgrid-htable{
	width: 100% !important;
}
#list2{
	width: 100% !important;
} */
    @media only screen and (min-width:320px) and (max-width:640px) {
        #jaytab {
            width: auto !important;
            overflow-x: scroll !important;
        }

.ui-jqgrid ui-widget ui-widget-content ui-corner-all {
            width: 900px !important;
        }

.ui-jqgrid-view {
            width: 900px !important;
        }

.ui-jqgrid-hdiv {
            width: 900px !important;
        }

.ui-jqgrid-htable {
            width: 900px !important;
        }

.ui-jqgrid-bdiv {
            width: 900px !important;
        }

#list2 {
            width: 900px !important;
        }

#pager2 {
            width: 900px !important;
        }

.subgrid-data {
            width: 100% !important;
            overflow-x: scroll !important;
        }

.ui-jqgrid {
            width: 100% !important;
        }
    }

@media only screen and (min-width:641px) and (max-width:991px) {
        #jaytab {
            width: auto !important;
            overflow-x: scroll !important;
        }

.ui-jqgrid ui-widget ui-widget-content ui-corner-all {
            width: 900px !important;
        }

.ui-jqgrid-view {
            width: 900px !important;
        }

.ui-jqgrid-hdiv {
            width: 900px !important;
        }

.ui-jqgrid-htable {
            width: 900px !important;
        }

.ui-jqgrid-bdiv {
            width: 900px !important;
        }

#list2 {
            width: 900px !important;
        }

#pager2 {
            width: 900px !important;
        }

.ui-jqgrid {
            width: 100% !important;
        }
    }

@media only screen and (min-width:992px) and (max-width:1258px) {
        #jaytab {
            width: auto !important;
            overflow-x: scroll !important;
        }

.ui-jqgrid ui-widget ui-widget-content ui-corner-all {
            width: 900px !important;
        }

.ui-jqgrid-view {
            width: 900px !important;
        }

.ui-jqgrid-hdiv {
            width: 900px !important;
        }

.ui-jqgrid-htable {
            width: 900px !important;
        }

.ui-jqgrid-bdiv {
            width: 900px !important;
        }

#list2 {
            width: 900px !important;
        }

#pager2 {
            width: 900px !important;
        }

.ui-jqgrid {
            width: 100% !important;
        }
    }
</style>