Q: jqGrid is not reloading or refreshing properly on keyup event I needed to create a search page where various types of text, dropdown, date field will be there. i added onkeyup function to every text field so that whenever i put any text or number a grid will appear with subgrid. The issue i am facing is if i give input for the first time then the grid appear with correct data. if i clear that field then the grid is reloading also but if i input again in that field or any other text field then the js is not sending request to the action method with updated post value.
Here is my View Part:
<section class="content">
    <div class="container-fluid">
        <!-- SELECT2 EXAMPLE -->
        <!-- SELECT2 EXAMPLE -->
        <div class="card card-info">
            <div class="card-header">
                <h3 class="card-title">Search Criteria</h3>

                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
            </div>
            <!-- /.card-header -->
            @using (Html.BeginForm("SearchReport", "LRLiveSearch", FormMethod.Post))
            {
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12" style="line-height:1.50px;">

                            <div class="row">
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>Deed No</label>
                                        @Html.TextBoxFor(model => model.DeedNo, new { @class = "form-control", onkeyup = "LiveSearch('DN', this.value)" })
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>Deed Identity</label>
                                        @Html.TextBoxFor(model => model.DeedId, new { @class = "form-control", onkeyup = "LiveSearch('DI', this.value)" })

                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>Client Name</label>
                                        @Html.TextBoxFor(model => model.ClientName, new { @class = "form-control", onkeyup = "LiveSearch('CN', this.value)" })
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>Client Contact Number</label>
                                        @Html.TextBoxFor(model => model.ClientPhoneNumber, new { @class = "form-control", onkeyup = "LiveSearch('CP', this.value)" })
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>MR No</label>
                                        @Html.TextBoxFor(model => model.MRNo, new { @class = "form-control", onkeyup = "LiveSearch('MR', this.value)" })
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>Cheque No</label>
                                        @Html.TextBoxFor(model => model.ChequeNo, new { @class = "form-control", onkeyup = "LiveSearch('CQN', this.value)" })
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>Collection Type</label>
                                        @Html.DropDownListFor(model => model.CollectionType, Model.CollectionTypeList, new { @class = "form-control" })
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>From Date</label>
                                        <div class="input-group date" id="FirstDate" data-target-input="nearest">
                                            @Html.TextBoxFor(model => model.FromDate, new { @class = "form-control datetimepicker-input", @data_target = "#FirstDate" })
                                            <div class="input-group-append" data-target="#FirstDate" data-toggle="datetimepicker">
                                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>To Date</label>
                                        <div class="input-group date" id="SecondDate" data-target-input="nearest">
                                            @Html.TextBoxFor(model => model.ToDate, new { @class = "form-control datetimepicker-input", @data_target = "#SecondDate" })
                                            <div class="input-group-append" data-target="#SecondDate" data-toggle="datetimepicker">
                                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @*<div class="col-md-1">
                                        <div class="form-group">
                                            <center>
                                                <button id="btnLRSearch" formaction="SearchList" class="btn btn-md btn-primary" style="margin-top:.80rem" type="button">Search</button>
                                            </center>
                                        </div>
                                    </div>
                                    <div class="col-md-1">
                                        <div class="form-group">
                                            <center>
                                                <button id="btnPrint" formaction="SearchReport" class="btn btn-md btn-warning" style="margin-top:.80rem" type="submit">Report</button>
                                            </center>
                                        </div>
                                    </div>*@
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
    <!-- /.container-fluid -->
    <table class="table table-bordered table-striped table-hover text-nowrap text-sm" id="Demogrid"></table>
    <div class="container-fluid" id="pager"></div>
</section>
 

here is my JS part where i handled onkeyup event:
function LiveSearch(type, value) {
            var searchType = type;
            var searchValue = value;
            if (value == "" || value == null) {
                $("#Demogrid").jqGrid('setGridParam', { postData: { Type: searchType, SearchValue: searchValue } }).trigger('reloadGrid');
                return true;
            }
            else {
                $("#Demogrid").jqGrid({
                    url: '/HRM/LRLiveSearch/LiveSearch',
                    datatype: "json",
                    mtype: 'Get',
                    //table header name
                    colNames: ['ProjectName', 'PlotName', 'TotalLandArea', 'DeedId', 'DeedDate', 'RentFeeType', 'RentFee', 'ClientName', 'ClientAddress', 'ClientContactNo', 'EffectiveDate'],
                    //colModel takes the data from controller and binds to grid
                    colModel: [
                        { name: "ProjectName" },
                        { name: "PlotName" },
                        { name: "TotalLandArea" },
                        { name: "DeedId" },
                        { name: "DeedDate" },
                        { name: "RentFeeType" },
                        { name: "RentFee" },
                        { name: "ClientName" },
                        { name: "ClientAddress" },
                        { name: "ClientContactNo" },
                        { name: "EffectiveDate" }
                    ],
                    height: '100%',
                    viewrecords: true,
                    caption: 'Deed Info',
                    emptyrecords: 'No records',
                    rowNum: 10,
                    pager: jQuery('#pager'),
                    rowList: [10, 20, 30, 40],
                    jsonReader:
                    {
                        root: "rows",
                        page: "page",
                        total: "total",
                        records: "records",
                        repeatitems: false,
                        Id: "0"
                    },
                    postData: {
                        Type: searchType,
                        SearchValue: searchValue
                    },
                    autowidth: true,
                    subGrid: true,
                    subGridRowExpanded: function (subgridId, rowId) {
                        // create the subgrid HTML here
                        var subgridTableId = subgridId + "_t";
                        $("#" + subgridId).html("<table id='" + subgridTableId + "'></table>");
                        // get the data for the parent row
                        var parentRowData = $("#Demogrid").jqGrid("getRowData", rowId);
                        // retrieve the primary key value of the parent row
                        var parentId = parentRowData.DeedId;
                        $("#" + subgridTableId).jqGrid({
                            // configure the subgrid
                            url: '/HRM/LRLiveSearch/LiveSearch',
                            datatype: "json",
                            mtype: 'Get',
                            //table header name
                            colNames: ['CollectionId', 'CollectionDate', 'MRIdentity', 'MRNo', 'MRDate', 'MRType', 'CollectionType', 'ChequeNo', 'BankName'],
                            //colModel takes the data from controller and binds to grid
                            colModel: [
                                { name: "CollectionId", hidden: true },
                                { name: "CollectionDate" },
                                { name: "MRIdentity" },
                                { name: "MRNo" },
                                { name: "MRDate" },
                                { name: "MRType" },
                                { name: "CollectionType" },
                                { name: "ChequeNo" },
                                { name: "BankName" }
                            ],
                            height: '100%',

                            viewrecords: true,
                            caption: 'Collection Details',
                            emptyrecords: 'No records',
                            rowNum: 10,
                            jsonReader: {
                                repeatitems: false
                            },
                            postData: {
                                Type: searchType,
                                SearchValue: searchValue,
                                DeedId: parentId
                            },
                            autowidth: true
                        });
                    },

                }).navGrid('#pager',
                    {
                        edit: true,
                        add: true,
                        del: true,
                        search: true,
                        refresh: true,
                        closeAfterSearch: true
                    });
            }

        }

and it is my action method:
public JsonResult LiveSearch(string sord, int page, int rows, string searchString, string Type, string SearchValue, string DeedId)
        {
            if(SearchValue == "")
            {
                SearchValue = "$";
            }
            var query = iLRSearchRepository.LiveSearchFilter(Type, SearchValue);
            if (DeedId == null)
            {
                //#2 Setting Paging  
                int pageIndex = Convert.ToInt32(page) - 1;
                int pageSize = rows;
                //#3 Linq Query to Get Data
                
                var Results = query.Select(
                    x => new
                    {
                        ProjectName = x.ProjectName,
                        PlotName = x.PlotName,
                        TotalLandArea = x.TotalLandArea,
                        DeedId = x.DeedId,
                        DeedDate = x.DeedDate.ToString("dd/MM/yyyy"),
                        RentFeeType = x.RentFeeType,
                        RentFee = x.RentFee,
                        ClientName = x.ClientName,
                        ClientAddress = x.ClientsAddress,
                        ClientContactNo = x.ClientsContactNo,
                        EffectiveDate = x.ActivateDate.ToString("dd/MM/yyyy")
                    }).Distinct();
                //#4 Get Total Row Count  
                int totalRecords = Results.Count();
                var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);

                //#5 Setting Sorting  
                if (sord.ToUpper() == "DESC")
                {
                    Results = Results.OrderByDescending(s => s.DeedId);
                    Results = Results.Skip(pageIndex * pageSize).Take(pageSize);
                }
                else
                {
                    Results = Results.OrderBy(s => s.DeedId);
                    Results = Results.Skip(pageIndex * pageSize).Take(pageSize);
                }
                //#6 Setting Search  
                if (!string.IsNullOrEmpty(searchString))
                {
                    Results = Results.Where(m => m.DeedId == searchString);
                }
                //#7 Sending Json Object to View.  
                var jsonData = new
                {
                    total = totalPages,
                    page,
                    records = totalRecords,
                    rows = Results
                };
                return Json(jsonData, JsonRequestBehavior.AllowGet);
            }
            else
            {
                var Results = query.Where(x => x.DeedId == DeedId).Select(
                    x => new
                    {
                        CollectionId = x.CollectionId,
                        CollectionDate = x.CollectionDate?.ToString("dd/MM/yyyy"),
                        MRIdentity = x.MRIdentity,
                        MRNo = x.MRNo,
                        MRDate = x.MRDate?.ToString("dd/MM/yyyy"),
                        MRType = x.MRType,
                        CollectionType = x.CollectionType,
                        ChequeNo = x.ChequeNo,
                        BankName = x.BankName,
                    });
                var jsonData = new
                {
                    rows = Results
                };
                return Json(jsonData, JsonRequestBehavior.AllowGet);
            }
            
            //model.landRent_View_SearchInfos = query;
            //return View("_LandRentInfoList", model);
        }


A: With your code you every time try create jqGrid when you do a search, which of course is not allowed since the grid is already created.
    if (value == "" || value == null) {
            $("#Demogrid").jqGrid('setGridParam', { postData: { Type: searchType, SearchValue: searchValue } }).trigger('reloadGrid');
            return true;
        }
        else {
            $("#Demogrid").jqGrid({}...)
        }

To solve the problem first create the grid and the do a reload when the value changes
            $("#Demogrid").jqGrid({
                url: '/HRM/LRLiveSearch/LiveSearch',
                datatype: "json",
                mtype: 'Get',
                //table header name
                ...
             });

    function LiveSearch(type, value) {
        var searchType = type;
        var searchValue = value;
        $("#Demogrid").jqGrid('setGridParam', { postData: { Type: searchType, SearchValue: searchValue } }).trigger('reloadGrid');
            return true;
    }   

Hope this helps.
Initially you can set values (postData) so that the grid return empty data or create the grid with empty local data (datatype : local) and then change the datatype to json.
