jqGrid
- jqGrid Custom search with web method c# pure asp.net applicaiton.
- Refresh jQgrid and bind again.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ActionMessagesList.aspx.cs" Inherits="AMAT.IMDBWeb.Pages.ActionMessagesList" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head
runat="server">
<title>View all</title>
<link href="../Styles/jquery-ui-cal.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.12.4-cal.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui-cal.js" type="text/javascript"></script>
<link href="../Styles/peoplepickercontrol.css" rel="stylesheet" />
<link href="../Styles/Popup.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
<script src="../Scripts/JQuery1.8.3.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="../Scripts/csompeoplepickercontrol.js" type="text/javascript"></script>
<script src="../Scripts/csompeoplepickercontrol_resources.en.js" type="text/javascript"></script>
<link href="../Styles/ui.theme.css" rel="stylesheet" />
<link href="../Styles/amat_table_ui.css" rel="stylesheet" />
<link href="../jqGrid/css/jquery-ui.css" rel="stylesheet" />
<link href="../jqGrid/css/ui.jqgrid.css" rel="stylesheet" />
<script src="../jqGrid/js/jquery-1.4.2.min.js"></script>
<script src="../jqGrid/js/grid.locale-en.js"></script>
<script src="../jqGrid/js/jquery.jqGrid.min.js"></script>
<script src="../Scripts/ActionMessagesList.js"></script>
</head>
<body>
<form id="frmActionMessagesList" runat="server">
<script type="text/javascript">
$(document).ready(function () {
searchActionMessages();
});
function Loadinganimationshow() {
document.getElementById('loadinganimation').style.display = 'block';
}
function Loadinganimationhide() {
document.getElementById('loadinganimation').style.display = 'none';
}
function searchActionMessages()
{
//$("#grid").GridUnload();
//$('#grid').jqGrid('GridUnload'); both code working
$("#grid").GridUnload();
var partNum = $('#<%= txtPartNumber.ClientID %>').val();
var acType = $('#<%= txtActionType.ClientID %>').val();
var crtFrom = $('#<%= txtCreateDtFrom.ClientID %>').val();
var crtTo = $('#<%= txtCreateDtTo.ClientID %>').val();
var gppm = $('#<%= txtGPPM.ClientID %>').val();
var planner = $('#<%= txtPlanner.ClientID %>').val();
var pim = $('#<%= txtPIM.ClientID %>').val();
var priority = $('#<%= ddlActionPriority.ClientID %>').val();
var curLogin = $('#<%= hdnLoginUser.ClientID %>').val();
bindActionMessages(partNum,
acType, crtFrom, crtTo, gppm, planner, pim, priority, curLogin);
}
</script>
<style type="text/css">
.ui-jqgrid-htable,
.ui-jqgrid-btable,
.ui-jqgrid-pager,
.ui-jqgrid-view,
.ui-jqgrid-bdiv,
.ui-jqgrid-hdiv,
.ui-jqgrid-hbox,
.ui-jqgrid {
max-width: 100% !important;
}
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="amat_ui_viewform">
<tr style="height: 30px">
<td class="section_title" colspan="10">
<table style="width: 100%">
<tr>
<td class="section_title" style="cursor: pointer; text-align: left">Planner Action Messages</td>
</tr>
</table>
</td>
</tr>
<tr>
<td
class="td_label" style="text-align: right">Number </td>
<td
class="td_form_input">
<asp:TextBox ID="txtNumber" runat="server" MaxLength="50"></asp:TextBox>
</td>
<td
class="td_label" style="text-align: right">Action Type </td>
<td
class="td_form_input">
<asp:TextBox ID="txtActionType" runat="server" MaxLength="50"></asp:TextBox>
</td>
<td
class="td_label" style="text-align: right">Created Date From </td>
<td
class="td_form_input">
<asp:TextBox ID="txtCreateDtFrom" runat="server" MaxLength="20" CssClass="calendar-text"></asp:TextBox>
</td>
<td
class="td_label" style="text-align: right">Created Date To </td>
<td
class="td_form_input">
<asp:TextBox ID="txtCreateDtTo" runat="server" MaxLength="20" CssClass="calendar-text"></asp:TextBox>
</td>
</tr>
<tr>
<td class="td_label" style="text-align: right">GPPM </td>
<td class="td_form_input">
<asp:TextBox ID="txtGPPM" runat="server" MaxLength="50"></asp:TextBox>
</td>
<td class="td_label" style="text-align: right">Plar </td>
<td class="td_form_input">
<asp:TextBox ID="txtPlanner" runat="server" MaxLength="50"></asp:TextBox>
</td>
<td class="td_label" style="text-align: right">P </td>
<td class="td_form_input">
<asp:TextBox ID="txtPIM" runat="server" MaxLength="50"></asp:TextBox>
</td>
<td class="td_label" style="text-align: right">Action Priority </td>
<td class="td_form_input">
<asp:DropDownList ID="ddlActionPriority" runat="server">
<asp:ListItem>- Select -</asp:ListItem>
<asp:ListItem>Low</asp:ListItem>
<asp:ListItem>Medium</asp:ListItem>
<asp:ListItem>High</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td
class="td_label" style="text-align: right">
</td>
<td
class="td_form_input">
</td>
<td
class="td_label" style="text-align: right">
</td>
<td
class="td_form_input">
</td>
<td
class="td_label" style="text-align: right"> </td>
<td
class="td_form_input">
</td>
<td class="td_label"></td>
<td
class="td_form_input">
<div class="buttons">
<asp:Button ID="btnSearch" Text="Search" runat="server" OnClientClick="searchActionMessages();return
false;"
CssClass="success" />
</div>
<asp:ImageButton ID="imgExportToExcel" runat="server" BorderStyle="None" ImageUrl="~/Images/Excel-icon.png" Style="width: 30px !important; height: 30px; cursor: pointer;" Height="20px" ToolTip="Export To Excel" />
</td>
</tr>
</table>
<table id="grid"></table>
<div id="pager2"></div>
<div id="loadinganimation" class="obs-dlgOverlay" style="display: none; z-index: 111;vertical-align:central;padding-top:20%;">
<table style="width:100%;">
<tr>
<td style="width: 42%;"></td>
<td style="width: 90px;">
<img src="../Images/ajax-loader.gif" alt="Loading.." />
</td>
<td style="color: white; font-size: 20px;">Please wait......</td>
</tr>
</table>
</div>
<asp:HiddenField ID="hdnLoginUser" runat="server" />
<asp:Label ID="lblError" runat="server" CssClass="mandatory_star"></asp:Label>
</form>
</body>
</html>
function bindActionMessages(partNum, acType, crtFrom, crtTo, gppm,
planner, pim, priority, curLogin) {
$("#grid").jqGrid({
url: 'ActionMessagesList.aspx/GetActionResults',
datatype: 'json',
method: 'post',
postData: {
'partNum': '\'' + partNum + '\'', 'acType': '\'' + acType + '\'', 'crtFrom': '\'' + crtFrom + '\'', 'crtTo': '\'' + crtTo + '\'', 'gppm': '\'' + gppm + '\'', 'planner': '\'' + planner + '\'', 'pim': '\'' + pim + '\'', 'priority': '\'' + priority + '\'', 'curLogin': '\'' + curLogin + '\''
},
ajaxGridOptions: { contentType: "application/json" },
serializeRowData: function (data) { return JSON.stringify(data); },
loadonce: true,
colNames: ['Part Number',
'Descripation', 'PIM', 'Action Priority', 'Primary Customer', 'Created Date', 'KPI System'],
colModel: [
{ name: 'PartNumber', index: 'PartNumber', width:100 },
{ name: 'Description', index: 'Description' },
{ name: 'PIM', index: 'PIM' },
{ name: 'ActionPriority', index: 'ActionPriority' },
{ name: 'PrimaryCustomer', index: 'PrimaryCustomer' },
{ name: 'CreatedDate', index: 'CreatedDate' },
{ name: 'KpiSystem', index: 'KpiSystem' }
],
rowNum: 20,
rowList: [20, 30, 50],
pager: '#pager2',
sortname: 'ProjectID',
viewrecords: true,
sortorder: 'desc',
loadonce: true,
//jsonReader: {
repeatitems: false, root: "d.rows", page: "d.page", total:
"d.total", records: "d.records", id:
"d.rows.PartID" },
jsonReader: {
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.d.length; },
root: function (obj) { return obj.d; },
repeatitems: false,
id: "AutoAMID"
},
loadComplete: function () {
$(this).find(">tbody>tr.jqgrow:odd").addClass("oddRowClass");
$(this).find(">tbody>tr.jqgrow:even").addClass("evenRowClass");
},
shrinkToFit: true,
autowidth: true,
height: 448,
loadError : function(xhr,st,err) {
jQuery("#rsperror").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText)}
});
}
---------c# code-------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ActionMessagesList.aspx.cs" Inherits="AMAT.IMDBWeb.Pages.ActionMessagesList" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head
runat="server">
<title>View all planner action
messages</title>
<link href="../Styles/jquery-ui-cal.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.12.4-cal.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui-cal.js" type="text/javascript"></script>
<link href="../Styles/peoplepickercontrol.css" rel="stylesheet" />
<link href="../Styles/Popup.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
<script src="../Scripts/JQuery1.8.3.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="../Scripts/csompeoplepickercontrol.js" type="text/javascript"></script>
<script src="../Scripts/csompeoplepickercontrol_resources.en.js" type="text/javascript"></script>
<link href="../Styles/ui.theme.css" rel="stylesheet" />
<link href="../Styles/amat_table_ui.css" rel="stylesheet" />
<link href="../jqGrid/css/jquery-ui.css" rel="stylesheet" />
<link href="../jqGrid/css/ui.jqgrid.css" rel="stylesheet" />
<script src="../jqGrid/js/jquery-1.4.2.min.js"></script>
<script src="../jqGrid/js/grid.locale-en.js"></script>
<script src="../jqGrid/js/jquery.jqGrid.min.js"></script>
<script src="../Scripts/ActionMessagesList.js"></script>
</head>
<body>
<form id="frmActionMessagesList" runat="server">
<script type="text/javascript">
$(document).ready(function () {
searchActionMessages();
});
function Loadinganimationshow() {
document.getElementById('loadinganimation').style.display = 'block';
}
function Loadinganimationhide() {
document.getElementById('loadinganimation').style.display = 'none';
}
function searchActionMessages()
{
$("#grid").GridUnload();
var partNum = $('#<%= txtPartNumber.ClientID %>').val();
var acType = $('#<%= txtActionType.ClientID %>').val();
var crtFrom = $('#<%= txtCreateDtFrom.ClientID %>').val();
var crtTo = $('#<%= txtCreateDtTo.ClientID %>').val();
var gppm = $('#<%= txtGPPM.ClientID %>').val();
var planner = $('#<%= txtPlanner.ClientID %>').val();
var pim = $('#<%= txtPIM.ClientID %>').val();
var priority = $('#<%= ddlActionPriority.ClientID %>').val();
var curLogin = $('#<%= hdnLoginUser.ClientID %>').val();
bindActionMessages(partNum,
acType, crtFrom, crtTo, gppm, planner, pim, priority, curLogin);
}
</script>
<style type="text/css">
.ui-jqgrid-htable,
.ui-jqgrid-btable,
.ui-jqgrid-pager,
.ui-jqgrid-view,
.ui-jqgrid-bdiv,
.ui-jqgrid-hdiv,
.ui-jqgrid-hbox,
.ui-jqgrid {
max-width: 100% !important;
}
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="amat_ui_viewform">
<tr style="height: 30px">
<td class="section_title" colspan="10">
<table style="width: 100%">
<tr>
<td class="section_title" style="cursor: pointer; text-align: left">Planner Action Messages</td>
</tr>
</table>
</td>
</tr>
<tr>
<td
class="td_label" style="text-align: right">Part Number </td>
<td
class="td_form_input">
<asp:TextBox ID="txtPartNumber" runat="server" MaxLength="50"></asp:TextBox>
</td>
<td
class="td_label" style="text-align: right">Action Type </td>
<td
class="td_form_input">
<asp:TextBox ID="txtActionType" runat="server" MaxLength="50"></asp:TextBox>
</td>
<td
class="td_label" style="text-align: right">Created Date From </td>
<td
class="td_form_input">
<asp:TextBox ID="txtCreateDtFrom" runat="server" MaxLength="20" CssClass="calendar-text"></asp:TextBox>
</td>
<td
class="td_label" style="text-align: right">Created Date To </td>
<td
class="td_form_input">
<asp:TextBox ID="txtCreateDtTo" runat="server" MaxLength="20" CssClass="calendar-text"></asp:TextBox>
</td>
</tr>
<tr>
<td class="td_label" style="text-align: right">GPPM </td>
<td class="td_form_input">
<asp:TextBox ID="txtGPPM" runat="server" MaxLength="50"></asp:TextBox>
</td>
<td class="td_label" style="text-align: right">Planner </td>
<td class="td_form_input">
<asp:TextBox ID="txtPlanner" runat="server" MaxLength="50"></asp:TextBox>
</td>
<td class="td_label" style="text-align: right">PIM </td>
<td class="td_form_input">
<asp:TextBox ID="txtPIM" runat="server" MaxLength="50"></asp:TextBox>
</td>
<td class="td_label" style="text-align: right">Action Priority </td>
<td class="td_form_input">
<asp:DropDownList ID="ddlActionPriority" runat="server">
<asp:ListItem>- Select -</asp:ListItem>
<asp:ListItem>Low</asp:ListItem>
<asp:ListItem>Medium</asp:ListItem>
<asp:ListItem>High</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td
class="td_label" style="text-align: right">
</td>
<td
class="td_form_input">
</td>
<td
class="td_label" style="text-align: right">
</td>
<td
class="td_form_input">
</td>
<td
class="td_label" style="text-align: right"> </td>
<td
class="td_form_input">
</td>
<td class="td_label"></td>
<td
class="td_form_input">
<div class="buttons">
<asp:Button ID="btnSearch" Text="Search" runat="server" OnClientClick="searchActionMessages();return
false;"
CssClass="success" />
</div>
<asp:ImageButton ID="imgExportToExcel" runat="server" BorderStyle="None" ImageUrl="~/Images/Excel-icon.png" Style="width: 30px !important; height: 30px; cursor: pointer;" Height="20px" ToolTip="Export To Excel" />
</td>
</tr>
</table>
<table id="grid"></table>
<div id="pager2"></div>
<div id="loadinganimation" class="obs-dlgOverlay" style="display: none; z-index: 111;vertical-align:central;padding-top:20%;">
<table style="width:100%;">
<tr>
<td style="width: 42%;"></td>
<td style="width: 90px;">
<img src="../Images/ajax-loader.gif" alt="Loading.." />
</td>
<td style="color: white; font-size: 20px;">Please wait......</td>
</tr>
</table>
</div>
<asp:HiddenField ID="hdnLoginUser" runat="server" />
<asp:Label ID="lblError" runat="server" CssClass="mandatory_star"></asp:Label>
</form>
</body>
</html>
-----------------------------------------
-----------------------------------------
[WebMethod(EnableSession = true)]
[System.Web.Script.Services.ScriptMethod(UseHttpGet = true,
ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)]
public static List<AMAT.IMDB.Entities.ActionMessagesList> GetActionResults(string partNum, string acType, string crtFrom, string crtTo, string gppm, string planner, string pim, string priority, string curLogin)
{
List<AMAT.IMDB.Entities.ActionMessagesList> res = new List<AMAT.IMDB.Entities.ActionMessagesList>();
try
{
bool _search; string nd; int rows = 0; int page = 0; string sidx = string.Empty; string sord = string.Empty;
if (HttpContext.Current.Request.QueryString["_search"] != null)
_search = Convert.ToBoolean(HttpContext.Current.Request.QueryString["_search"]);
if (HttpContext.Current.Request.QueryString["nd"] != null)
nd = HttpContext.Current.Request.QueryString["nd"];
if (HttpContext.Current.Request.QueryString["rows"] != null)
rows = Convert.ToInt32(HttpContext.Current.Request.QueryString["rows"]);
if (HttpContext.Current.Request.QueryString["page"] != null)
page = Convert.ToInt32(HttpContext.Current.Request.QueryString["page"]);
if (HttpContext.Current.Request.QueryString["sidx"] != null)
sidx = HttpContext.Current.Request.QueryString["sidx"];
if (HttpContext.Current.Request.QueryString["sord"] != null)
sord = HttpContext.Current.Request.QueryString["sord"];
res = new ActionMessagesBAL().GetActionMessages(partNum,
acType, crtFrom, crtTo, gppm, planner, pim, priority, sidx, sord, curLogin);
}
catch
(Exception ex)
{
ExceptionLogger.WriteToLog(ConfigurationManager.AppSettings["siteurl"], "ActionMessagesList
aspx", "Page_Load()", ex, ExceptionLogger.LOGTYPE.ERROR.ToString());
}
return res;
}
