i am new to jqgrid ,
i’m placing the code what i did .my question is that when i click html button i need to refresh the grid value with new values?how i pass paramateres to controller?
thanks in advance
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
<link rel="stylesheet" type="text/css" href="/scripts/themes/coffee/grid.css"
title="coffee" media="screen" />
<script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jqGrid.js" type="text/javascript"></script>
<script src="/Scripts/js/jqModal.js" type="text/javascript"></script>
<script src="/Scripts/js/jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#btnSearch").click(function() {
jqGridContainer.dir.
var StateId = document.getElementById('StateId').value;
var CityId = document.getElementById('CityId').value;
var HName = document.getElementById('HospitalName').value;
alert(CityId);
alert(StateId);
alert(HName);
if (StateId > 0 && CityId == '' && HName == '') {
CityId = 0;
HName = 'Default'.toString();
alert("elseif0" + HName.toString());
}
else if (CityId > 0 && StateId == '') {
alert("elseif1");
alert("Please Select State..")
}
else if (CityId > 0 && StateId > 0 && HName == '') {
alert("elseif2");
alert(CityId);
alert(StateId);
HName = "Default";
}
else {
alert("else");
StateId = 0;
CityId = 0;
HName = "Default";
}
// $("#Submit1").click(function() {
// //{ function gridReload() {
// //var customer = $(this).val();
// $('#list').setGridParam({ url: '/Claim/DynamicGridData/?StateId=' + StateId + '&CityId=' + CityId + '&hospname=' + HName, page: 1
// }).trigger("reloadGrid");
// Submit1.trigger("reloadGrid");
jQuery("#list").jqGrid({
url: '/Claim/DynamicGridData/?StateId=' + StateId + '&CityId=' + CityId + '&hospname=' + HName,
datatype: 'json',
mtype: 'GET',
colNames: ['Id', 'HospitalName', 'Address', 'City', 'District', 'FaxNumber', 'PhoneNumber'],
colModel: [{ name: 'HospitalId', index: 'HospitalId', width: 40, align: 'left' },
{ name: 'HospitalName', index: 'HospitalName', width: 40, align: 'left' },
{ name: 'Address1', Address: 'Address1', width: 300 },
{ name: 'CityName', index: 'CityName', width: 100 },
{ name: 'DistName', index: 'DistName', width: 100 },
{ name: 'FaxNo', index: 'FaxNo', width: 100 },
{ name: 'ContactNo1', index: 'PhoneNumber', width: 100 }
],
jsonReader: {
repeatitems: true,
id: "0"
},
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
// sortname: 'Id,',
sortname: '1',
sortorder: "asc",
viewrecords: true,
//multiselect: true,
//multikey: "ctrlKey",
imgpath: '/scripts/themes/coffee/images',
caption: 'Hospital Search',
width: 700,
height: 250
});
});
});
</script>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<%--<%using (Html.BeginForm("HospitalSearch", "Claim", FormMethod.Post, new { id = "TheForm" }))
--%>
<table cellspacing="0" cellpadding="2" width="100%" border="0" >
<tr>
<td class ="Heading1">
Hospital Search</td>
<td class ="Heading1" align="right" width="50%"
background="../images/homebg.gif">
</td>
</tr>
<tr>
<td colspan="2" >
<% Html.RenderPartial("InsuredDetails"); %>
</td>
</tr>
<tr>
<td colspan="2">
<table width="100%">
<tr>
<td class="subline" valign="middle">
State : <% =Html.DropDownList("StateId", (SelectList)ViewData["States"], "--Select--", new { @class = "ddownmenu" })%>
City : <% =Html.DropDownList("CityId", (SelectList)ViewData["Cities"], "--Select--", new { @class = "ddownmenu" })%>
Hospital Name : <% =Html.TextBox("HospitalName")%>
<input id="btnSearch" type="submit" value="Search" />
<input id="Submit1" type="submit" value="Search" />
</td>
</tr>
</table>
</td>
</tr>
<%-- <tr>
<td colspan="2">
<table style="width: 100%" id="AlternatetableColor" class="grid" >
<tr align="center" style="color:White;background-color:#507CD1;">
<th align="left" scope="col" style="font-weight:bold;">S.No</th>
<th align="left" scope="col" style="font-weight:bold;">Hospital Name</th>
<th align="left" scope="col" style="font-weight:bold;">Address</th>
<th align="left" scope="col" style="font-weight:bold;">City</th>
<th align="left" scope="col" style="font-weight:bold;">District</th>
<th align="left" scope="col" style="font-weight:bold;">Fax Number</th>
<th align="left" scope="col" style="font-weight:bold;">Phone Number</th>
</tr>
<%
int i=1;
if (ViewData["Hospitaldetails"] != null)
{
%>
<% foreach (ClassRepository.Hospital hosp in (IList)ViewData["Hospitaldetails"])
{ %>
<% ++i; %>
<tr class="tablecolor" align="left">
<td align="left" width="4%"><p><%= i%></p></td>
<td align="left" width="30%"><p><%= Html.Encode(hosp.HospitalName)%></p></td>
<td align="left" width="30%"><p><%= Html.Encode(hosp.Address1)%></p></td>
<td align="left" width="9%"><p><%= Html.Encode(hosp.City1.CityName)%></p></td>
<td align="left" width="9%"><p><%= Html.Encode(hosp.City1.Districtiesdetails.DistName)%></p></td>
<td align="left" width="9%"><p><%= Html.Encode(hosp.FaxNo)%></p></td>
<td align="left" width="9%"><p><%= Html.Encode(hosp.ContactNo1)%></p></td>
</tr>
<%} %>
<%} %>
</table>
</td>
</tr>--%>
<tr>
<td align="center" colspan="2">
</td>
</tr>
</table>
<div id="jqGridContainer">
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</div>
</asp:Content>
From completely a jqGrid approach, I’d update the url and trigger a reload:
Based on the code above, I’d guess you’d need the following: