I have two Grid on one view.each of which calls same my WebApi method
whenever my view renders.it calls only once webapi method.Thus binding only my 1st Grid.not other.
below is my code.
@using MvcJqGrid
@using EPS.Common
@using EPS.WPL.Web
@using EPS.Common.Helper
@using EPS.Common.Extensions
@model EPS.WPL.Web.ViewModels.OrderListViewModel
@{
ViewBag.Title = "List";
// Layout = Url.Content(WPLSettings.SiteURL + "/Views/Shared/_WPLLayout.cshtml");
Layout = "~/Views/Shared/_WPLLayout.cshtml";
}
<div id="MiddleDataContainer">
<h3>NL AutoParts Order Information</h3>
@section PageScripts {
@Scripts.Render("~/bundles/appJs")
@* <script type="text/javascript">
var appUri = "/api/CommonGrid/GetOrderListWithRow";
var appCommon = "&_search=false&nd=1406550928001&rows=10&page=1&sidx=&sord=asc";
$(document).ready(function () {
$.ajax({
url: appUri + '?WholeSalerId=1&Status=2&Quote=False' + appCommon,
contentType: "application/json; charset=utf-8",
type: 'GET',
dataType: 'json',
success: function (data) {
$('#partialPartialOrderHolder').html(data);
},
error: function () {
alert("Error");
}
});
});
</script>*@
<section class="margin-top15">
<div class="container">
<!-- Data Grid start -->
<h2>Pending Orders</h2>
<div class="table-datagrid">
<div class="table-responsive">
<div id="GarageTableData_wrapper" class="dataTables_wrapper no-footer">
<div id="partialPendingOrderHolder">
@(Html.Grid("OrderListWithRow")
.SetRequestType(MvcJqGrid.Enums.RequestType.Get)
.SetJsonReader(new MvcJqGrid.DataReaders.JsonReader { Id = "OrderId", RepeatItems = false })
.AddColumn(new MvcJqGrid.Column("OrderId").SetSearch(false).SetTitle(false).SetWidth(25).SetSearchType(MvcJqGrid.Enums.Searchtype.Text))
.AddColumn(new MvcJqGrid.Column("WholeSalerName").SetSearch(false).SetWidth(25).SetSearchType(MvcJqGrid.Enums.Searchtype.Text))
.AddColumn(new MvcJqGrid.Column("GarageName").SetWidth(25).SetSearchType(MvcJqGrid.Enums.Searchtype.Text))
.AddColumn(new MvcJqGrid.Column("Quantity").SetSearch(false).SetWidth(20).SetSearchType(MvcJqGrid.Enums.Searchtype.Text))
.AddColumn(new MvcJqGrid.Column("GrossPrice").SetSearch(false).SetWidth(25).SetSearchType(MvcJqGrid.Enums.Searchtype.Datepicker))
.AddColumn(new MvcJqGrid.Column("CreatedOn").SetWidth(25))
//.AddColumn(new Column("").SetSearch(false).SetCustomFormatter("mvcJqGrid.demo.buttonize").SetAlign(MvcJqGrid.Enums.Align.Left).SetWidth(10))
.SetUrl(Url.Action("GetOrderListWithRow", "api/CommonGrid/", new { GarageId = "", WholeSalerId = "1", Status = "0", Quote = false }))
.SetAutoWidth(true)
.SetRowNum(Common.GridDefaultPageSizeValue())
.SetRowList(Common.GridPageSizeValues())
.SetViewRecords(true)
.SetPager("pager")
.SetSearchToolbar(true)
.SetToolbar(true)
.SetSearchOnEnter(false)
.SetViewRecords(true)
.OnGridComplete("CustomizeJQGrid()").OnSelectRow("JQGridRowSelected()")
)
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="table-datagrid">
<div class="table-responsive">
<div id="GarageTableData_wrapper" class="dataTables_wrapper no-footer">
<div id="partialPendingOrderHolder">
@(Html.Grid("OrderListWithRow")
.SetRequestType(MvcJqGrid.Enums.RequestType.Get)
.SetJsonReader(new MvcJqGrid.DataReaders.JsonReader { Id = "OrderId", RepeatItems = false })
.AddColumn(new MvcJqGrid.Column("OrderId").SetSearch(false).SetTitle(false).SetWidth(25).SetSearchType(MvcJqGrid.Enums.Searchtype.Text))
.AddColumn(new MvcJqGrid.Column("WholeSalerName").SetSearch(false).SetWidth(25).SetLabel(Helper.Get(Model.PageName, WPLModule.OrderList.WholeSalerName.ToString())).SetSearchType(MvcJqGrid.Enums.Searchtype.Text))
.AddColumn(new MvcJqGrid.Column("GarageName").SetWidth(25).SetLabel(Helper.Get(Model.PageName, WPLModule.OrderList.GarageName.ToString())).SetSearchType(MvcJqGrid.Enums.Searchtype.Text))
.AddColumn(new MvcJqGrid.Column("Quantity").SetSearch(false).SetWidth(20).SetLabel(Helper.Get(Model.PageName, WPLModule.OrderList.Quantity.ToString())).SetSearchType(MvcJqGrid.Enums.Searchtype.Text))
.AddColumn(new MvcJqGrid.Column("GrossPrice").SetSearch(false).SetWidth(25).SetLabel(Helper.Get(Model.PageName, WPLModule.OrderList.GrossPrice.ToString())).SetSearchType(MvcJqGrid.Enums.Searchtype.Datepicker))
.AddColumn(new MvcJqGrid.Column("CreatedOn").SetWidth(25).SetLabel(Helper.Get(Model.PageName, WPLModule.OrderList.CreatedOn.ToString())))
//.AddColumn(new Column("").SetSearch(false).SetCustomFormatter("mvcJqGrid.demo.buttonize").SetAlign(MvcJqGrid.Enums.Align.Left).SetWidth(10))
.SetUrl(Url.Action("GetOrderListWithRow", "api/CommonGrid/", new { GarageId = "", WholeSalerId = "1", Status = "2" , Quote = false }))
.SetAutoWidth(true)
.SetRowNum(Common.GridDefaultPageSizeValue())
.SetRowList(Common.GridPageSizeValues())
.SetViewRecords(true)
.SetPager("pager")
.SetSearchToolbar(true)
.SetToolbar(true)
.SetSearchOnEnter(false)
.SetViewRecords(true)
.OnGridComplete("CustomizeJQGrid()").OnSelectRow("JQGridRowSelected()")
)
</div>
</div>
</div>
<div class="clear"></div>
</div>
<!-- Data Grid end // -->
</div>
</section>
}
</div>
below is my api method
[HttpGet]
[ActionName("GetOrderListWithRow")]
public JObject GetOrderListWithRow()
{
GridSettings gridSettings = new GridSettings();
SetGridSetting(ref gridSettings, Request);
string GarageId = Convert.ToString(Request.RequestUri.ParseQueryString().Get("GarageId"));
string WholeSalerId = Convert.ToString(Request.RequestUri.ParseQueryString().Get("WholeSalerId"));
string Status = Convert.ToString(Request.RequestUri.ParseQueryString().Get("Status"));
bool quote = Convert.ToBoolean(Request.RequestUri.ParseQueryString().Get("Quote"));
OrderListViewModel model = OrderResolver.List(new OrderManager(), new LocalizationManager(), GarageId, WholeSalerId, Status, quote);
// UserListViewModel model = UserResolver.List(new UserManager());
var orderList = model.Orders.Data;
int totalRecords = 0;
IQueryable<OrderRow> sortedList;
sortedList = orderList.AsQueryable();
//WhereStringContainsOne
if (FieldName.Count() > 0 && Values.Count() > 0)
{
if (FieldName.Contains("CreatedOn"))
{
int index = FieldName.IndexOf("CreatedOn");
sortedList = sortedList.AsQueryable().WhereStringContains(FieldName[index], Values[0]);
}
//for (int fieldCount = 0; fieldCount < FieldName.Count(); fieldCount++)
//{
// sortedList = sortedList.AsQueryable().WhereStringContains(FieldName[fieldCount], Values[0]);
//}
else
{
string[] arrFieldName = new string[] { "OrderId" };
sortedList = sortedList.AsQueryable().WhereStringContainsSingle(arrFieldName, Values[0]);
}
}
totalRecords = sortedList.Count();
sortedList = SortIQueryable(sortedList.AsQueryable(), gridSettings.SortColumn, gridSettings.SortOrder);
var jsonData = JObject.FromObject(new
{
total = Math.Ceiling((Decimal)totalRecords / (Decimal)(gridSettings.PageSize + 1)), //totalRecords / (gridSettings.PageSize + 1),
page = gridSettings.PageIndex,
records = totalRecords,
rows = (
from g in sortedList
select new OrderRow
{
OrderId = g.OrderId,
WholeSalerName = g.WholeSalerName,
GarageName = g.GarageName,
Quantity = g.Quantity,
GrossPrice = g.GrossPrice,
CreatedOn = g.CreatedOn,
Status = g.Status
}).Skip((gridSettings.PageIndex - 1) * gridSettings.PageSize).Take(gridSettings.PageSize)
});
return jsonData;
}
Well, both of your grids have the same HTML id. The HTML spec only allows that one element exists for each id, otherwise the DOM can't tell them apart and only the first one will be used.
Your javscript-code only makes one ajax-call on document ready for your API-method and then binds the data to the grid with the specified Id. As you have two elements with the same Id, only the first one will be filled with data.
If you want two separate calls to your API-method you have to make two ajax-calls. If you want to fill the two grids separately you have to have different Id's.
Regards
Håkan