Two jqxGrids on one asp.net page

[CadelMember]

I am using Visual Studio C# 2010, .Net Framework 4.5, ASP.Net MVC 4, on a Windows 7 64 bit computer.

I would like to have two jqxGrids on my index.cshtml page. The second jqxGrid will be from the same source but a different table. Can this be done, if so how?

Currently I have one jqxGrid on my index.cshtml page, here is my code so far.

namespace Intranet.Controllers
{
public class HomeController : Controller
{
private IntranetDbEntities dbIntranet = new IntranetDbEntities();
public JsonResult GetEvents()
{
var myEvents = dbIntranet.Events.ToList();
var myEventsCustom = (from Events in myEvents
select new
{
Events.Title,
Events.Detail
});
return Json(myEventsCustom, JsonRequestBehavior.AllowGet);
}
public ActionResult Index()
{
return View(dbIntranet.Events.ToList());
}
}
}

model IEnumerable<Intranet.Models.Event>
@{
ViewBag.Title = “Intranet – Home Page”;
}
@section scripts {
<script type=”text/javascript” src=”http://jqwidgets.com/jquery-widgets-demo/scripts/query-1.8.2.min.js“></script>
<script type=”text/javascript” src=”http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js“></script>
<link rel=”stylesheet” type=”text/css” href=”http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css” />
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘Title’, type: ‘string’ },
{ name: ‘Detail’, type: ‘string’ }
],
url: ‘Home/GetEvents’
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#grid”).jqxGrid(
{
width: 600,
source: dataAdapter,
columns: [
{ text: “Title”, datafield: “Title” },
{ text: “Detail”, datafield: “Detail” }
]
});
});
</script>
}
<h2>Index</h2>

<div id=”grid”></div>

[Peter StoevKeymaster]

Hi,

You can take a look at this sample: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/masterdetails.htm?web. It shows how to create 2 Grids on one Web page.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[CadelMember]

When I click on your link I see the two grids, but I need to see the code. Also is the code for this example for a MVC4 project?

[Peter StoevKeymaster]

Hi,

– The sample is included in the download package. You can see its code there. Also when you navigate to the link you can right-click on your browser and click “View Page Source” or you can see the demo’s source by navigating to http://www.jqwidgets.com/jquery-widgets-demo/ and then find the demo in the Grid. When you open the demo, there’s a “View Source” tab, too.
– It is not built with MVC 4, it is a simple web page. For using the Grid in MVC4, see: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-binding-to-sql-database-mvc4.htm

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts