Reloading jqGrid Content
<p>I am new to jqGrid and I have some challenges in filtering the grid.  Here is scenario I have a form when I click the button the grid should reload base on the content of the form. </p>

<pre><code>&lt;script type="text/javascript"&gt;
// the url to make the Ajax calls

$(document).ready(function () {
    var DepartmentId = $("#DepartmentDropdown").val();
    var SupervisorId = $("#SupervisorDropdown").val();
    var EmployeeId = $("#EmployeeDropdown").val();

    if (DepartmentId == '') {
        DepartmentId = 0;
    }
    if (SupervisorId == '') {
        SupervisorId = 0;
    }
    if (EmployeeId == '') {
        EmployeeId = 0;
    }
    var jqDataUrl = "/Pres/Summary/SearchGridDataRequested?depId=" + DepartmentId + "&amp;supId=" + SupervisorId +  "&amp;empId=" + EmployeeId; 
    // Set up the jquery grid
    $("#SummaryGrid").jqGrid({
        // Ajax related configurations
        url: jqDataUrl,
        datatype: "json",
        mtype: "GET",
        jsonReader: {
            repeatitems: false,
            id: "SummaryId"
        },
        // Specify the column names
        colNames: ['SummaryId', 'Employee', 'Tenure', 'Department', 'Position', 'Immediate Supervisor',
      'Salary Increase',
      'Job Security And Overall Compensation',
      'Coaching',
      'Meeting',
      'Grid',
      'ISP',
      'Performance Management',
      'Skid',
      'Personal And Professional Development',
      'Awards And Recognitions',
      'Incentives',
      'Connectors',
      'Total Incentives',
      'Rewards And Recognition',
      'Company Events Attended',
      'Active Successful Referrals',
      'Tenure Of Referrals',
      'Sense Of Family And Belonginess',
      'Vl Utilization',
      'Work Life Balance'
        ],

        // Configure the columns
        colModel: [{ name: 'SummaryId', index: 'SummaryId', frozen: true, key: true, hidden: true },
             { name: 'EmployeeName', index: 'EmployeeName',frozen: true, width: 300  },
             { name: 'Tenure', index: 'Tenure', width: 50,frozen: true, },
             { name: 'Department', index: 'Department', width: 300 },
             { name: 'PositionTitle', index: 'PositionTitle', width: 300 },
             { name: 'ImmediateSupervisor', index: 'ImmediateSupervisor', width: 300 },
             { name: 'IsSalaryIncreaseFlag', index: 'IsSalaryIncreaseFlag', width: 100, formatter: ConvertBitToImage },
             { name: 'IsJobSecurityAndOverallCompensation', index: 'IsJobSecurityAndOverallCompensation', width: 100, formatter: ConvertBitToImage },
             { name: 'IsCoachingFlag', index: 'IsCoachingFlag', width: 100, formatter: ConvertBitToImage },
             { name: 'IsMeetingFlag', index: 'IsMeetingFlag', width: 100, formatter: ConvertBitToImage },
             { name: 'IsGridFlag', index: 'IsGridFlag', width: 100, formatter: ConvertBitToImage },
             { name: 'IsIspFlag', index: 'IsIspFlag', width: 100, formatter: ConvertBitToImage },
             { name: 'IsPerformanceManagement', index: 'IsPerformanceManagement', width: 100, formatter: ConvertBitToImage },
             { name: 'IsSkidFlag', index: 'IsSkidFlag', width: 100, formatter: ConvertBitToImage },
             { name: 'IsPersonalAndProfessionalDevelopment', index: 'IsPersonalAndProfessionalDevelopment', width: 100, formatter: ConvertBitToImage },
             { name: 'IsAwardsAndRecognitionsFlag', index: 'IsAwardsAndRecognitionsFlag', width: 100, formatter: ConvertBitToImage },
             { name: 'IsIncentivesFlag', index: 'IsIncentivesFlag', width: 100, formatter: ConvertBitToImage },
             { name: 'IsConnectorsFlag', index: 'IsConnectorsFlag', width: 100, formatter: ConvertBitToImage },
             { name: 'IsTotalIncentivesFlag', index: 'IsTotalIncentivesFlag', width: 100, formatter: ConvertBitToImage },
             { name: 'IsRewardsAndRecognition', index: 'IsRewardsAndRecognition', width: 100, formatter: ConvertBitToImage },
             { name: 'IsCompanyEventsAttendedFlag', index: 'IsCompanyEventsAttendedFlag', width: 100, formatter: ConvertBitToImage },
             { name: 'IsActiveSuccessfulReferralsFlag', index: 'IsActiveSuccessfulReferralsFlag', width: 100, formatter: ConvertBitToImage },
             { name: 'IsTenureOfReferralsFlag', index: 'IsTenureOfReferralsFlag', width: 100, formatter: ConvertBitToImage },
             { name: 'IsSenseOfFamilyAndBelonginess', index: 'IsSenseOfFamilyAndBelonginess', width: 100, formatter: ConvertBitToImage },
             { name: 'IsVlUtilizationFlag', index: 'IsVlUtilizationFlag', width: 100, formatter: ConvertBitToImage },
             { name: 'IsWorkLifeBalance', index: 'IsWorkLifeBalance', width: 100, formatter: ConvertBitToImage }
        ],

        // Grid total width and height
        width: "1100px",
        height: 300,
        loadonce: true,
        // Paging
        pager: $("#pager"),
        rowNum: 15,
        viewrecords: true, // Specify if "total number of records" is displayed

        // Default sorting
        sortname: "EmployeeName",
        sortorder: "asc",
        autowidth:true,
        shrinktofit:false,
        // Grid caption
        caption: "Predictive Retention System"
    }).navGrid("#pager", {
        edit: false, add: false, del: false, search: false, refresh: true
    });
    jQuery("#SummaryGrid").jqGrid('setFrozenColumns');
});


&lt;/script&gt;

&lt;script type="text/javascript"&gt;
$(function () {
    $("#filter").click(function () {

        var DepartmentId = $("#DepartmentDropdown").val();
        var SupervisorId = $("#SupervisorDropdown").val();
        var EmployeeId = $("#EmployeeDropdown").val();



        if (DepartmentId == '') {
            DepartmentId = 0;
        }
        if (SupervisorId == '') {
            SupervisorId = 0;
        }
        if (EmployeeId == '') {
            EmployeeId = 0;
        }

        alert(DepartmentId);
        alert(SupervisorId);
        alert(EmployeeId);

        var jqDataUrl = "/Pres/Summary/SearchGridDataRequested?depId=" + DepartmentId + "&amp;supId=" + SupervisorId + "&amp;empId=" + EmployeeId;
</code></pre>

<p>//            $("#SummaryGrid").jqGrid().setGridParam({ url: jqDataUrl }).trigger("reloadGrid");
            $("#SummaryGrid").jqGrid('setGridParam', { url: jqDataUrl }).trigger("reloadGrid");
        })
    })
    </p>

<pre><code>&lt;script type="text/javascript"&gt;
function ConvertBitToImage(cellvalue, option, rowObject) {
    var bitValue = cellvalue;     
    if (bitValue == true) {
        var cellHtml = "&lt;div style='width:20%; padding:0 40%;'&gt;&lt;img src='../../../../Content/images/dot.gif'    style='width:10px;height:10px;margin:0 auto; '/&gt;&lt;/div&gt;";
    }
    else {
        var cellHtml = "&lt;p&gt;&lt;/p&gt;";
    }
    return cellHtml;
}
</code></pre>

<p></p>
