Adding Filters to jqgrid using Dropdownlist values

Question

I'm thinking to add jqgrid that will Get Populated after i choose a value from dropdown List(say Status:open,inProgress,Closed,restarted....) but how to bind select list as filter for JQgrid i'm stuck with Logics how to implement it

 <script type="text/javascript">
$('document').ready(function () {
//
    jQuery('#list').jqGrid({
        url: '../api/JqGridTask?UserId=@ViewBag.UserId',
        datatype: 'json',
        mtype: 'Get',
        jsonReader: { repeatitems: false },
        colNames: ['UserName', 'TaskId', 'TaskName', 'TaskStatus'],
        colModel: [
            { name: 'UserName', index: 'UserName', width: 75 },
            { name: 'TaskId', index: 'TaskId', width: 90 },
            { name: 'TaskName', index: 'TaskName', width: 100, formatter: showLink },
        { name:'TaskStatus',index:'TaskStatus',width:100}
        ],
        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        sortname: 'Id',
        sortorder: "desc",
        viewrecords: true,
        imgpath: '/scripts/themes/coffee/images',
        caption: 'My first grid'
    }).navGrid('#pager', { edit: false, add: false, del: false });
});
function showLink(cellvalue, options, rowObject) {
    return '<a href = "/User/EditTask?TaskId=' + rowObject.TaskId + '">' + rowObject.TaskName + '</a>';
}

![C:\Users\shekhar.pankaj\Desktop\Capture.png

and my controller code is ..................................

   public class JqGridTaskController : ApiController
{
     public jsontext GetAllGridData(int UserId,string sidx, string sord, int page = 1,         int rows = 1)
    {
        var jsonType = new jsontext();
        using (var model = new TaskManagerEntities())
        {

            jsonType.rows = (from dtUser in model.UserTasks
                             where dtUser.UserId==UserId 
//here i want to use my conditions that will get returned from dropdown
                             select new TaskUserGrid
                             {
                                 UserName = dtUser.User.FirstName + dtUser.User.LastName,
                                 TaskId=dtUser.Task.TaskId,
                                 TaskName=dtUser.Task.Title,
                                 TaskStatus=dtUser.Task.TaskStatu.StatusType
                             }).ToList();
            return jsonType;
        }
    }
    /// <summary>
    /// 
    /// </summary>
    public class jsontext
    {
        public int total { get; set; }
        public int page { get; set; }
        public int records { get; set; }
        public List<TaskUserGrid> rows { get; set; }
    }

Answer 1

Sorry Guyz if u came here ..after lot of study ...i was able to solve my Problem .. you People may Delete this Question but for Beginners like me ..this would help (i think)

 $('document').ready(function () {
//this Will Call function on every selected values from Drop Down
        $("#statusList").change(function () {
            var selectedValue = $(this).val();
            $("#list").GridUnload();
            $("#list").trigger('reloadGrid');
            $.ajax(gridBind(selectedValue))
        });

    });

//this function will get called ..and here i will request data for The Grid
    function gridBind(selectedValue) {
        jQuery('#list').jqGrid({
            url: '../api/JqGridTask?UserId=' + @ViewBag.UserId +'&selectedValue=' + selectedValue,
            datatype: 'json',
            mtype: 'Get',
            jsonReader: { repeatitems: false },
            colNames: ['UserName', 'TaskId', 'TaskName', 'TaskStatus'],
            colModel: [
                { name: 'UserName', index: 'UserName', width: 75 },
                { name: 'TaskId', index: 'TaskId', width: 90 },
                { name: 'TaskName', index: 'TaskName', width: 100, formatter: showLink },
            { name: 'TaskStatus', index: 'TaskStatus', width: 100 }
            ],
            pager: jQuery('#pager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'Id',
            sortorder: "desc",
            viewrecords: true,
            imgpath: '/scripts/themes/coffee/images',
            caption: 'My first grid'
        }).navGrid('#pager', { edit: false, add: false, del: false });
    }

    function showLink(cellvalue, options, rowObject) {
        return '<a href = "/User/EditTask?TaskId=' + rowObject.TaskId + '">' + rowObject.TaskName + '</a>';
    }

</script> 

Any ways People thanks .... Thanks StackOverFlow...