BoldSignA modern eSignature application with affordable pricing. Sign up today for unlimited document usage!
We want the following with the Grid
We have:
Controller
public ActionResult SearchResultPaged([Bind(Prefix = "$skip")]int? skip, [Bind(Prefix = "$top")]int? top) { // Declare variables var headerViewModel = Session.GetItem<HeaderViewModel>(); //Search Criteria List<ItemArticle> result = SearchResultSet(headerViewModel, skip, top); var count = result.Count(); // Return a view return Json(new { d = new { results = result, __count = count } }, JsonRequestBehavior.AllowGet); //return View("_ItemArticleGrid", result); }
View (Index.cshtml)
@using Models @model ViewModels.ItemArticleViewModel @{ Layout = "~/Views/Shared/_BaseLayout.cshtml"; }
@section Top { <div id="articleGrid">Html.Partial("_ItemArticleGrid");
</div> }
PartialView (_ItemArticleGrid.cshtml)
@using System.Data.Entity.Core.Common.CommandTrees.ExpressionBuilder @using Models @using StoredProcedures.Models @model string @(Html.EJ().Grid<ItemArticle> ("Grid") .Datasource(ds => ds.URL("ItemArticle/SearchResultPaged")) .AllowScrolling() .AllowSorting() .AllowPaging() .ScrollSettings(scroll => scroll.Height(400).Width(1100).AllowVirtualScrolling(true)) ) @Html.EJ().ScriptManager()
We cannot get it to work, we tried several option such as RenderAction, parse a type viewmodel instead of string. But we get a dialog to save JSON, an empty grid or no grid at all.
Is it possible to provide a working example?
Hi Sven Ansem
Thanks for your interest in Syncfusion products.
We have analyzed the reported query. We have created a
sample based on your requirement and the same can be downloaded from the below
location.
Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/12.2Sample-1463155610.zip
In the above sample, we have rendered a grid in a
partialView, enabled VirtualScrolling and server side loading. Please refer the
below code snippet.
[In
Index.cshtml] <div id="divGrid">
@Html.Partial("_partialGrid") </div> [In
_partialGrid.cshtml] @(Html.EJ().Grid<Sample.Models.OrdersView>("Grid")
.Datasource(d=>d.URL("/Home/partialGrid").Adaptor("UrlAdaptor")) .AllowScrolling() .ScrollSettings(scroll=>scroll.AllowVirtualScrolling().Height(300).Width(400)) .
. . ) @Html.EJ().ScriptManager() [In Controller] public ActionResult partialGrid(DataManager dm)
{
var DataSource
= OrderRepository.GetAllRecords().ToList();
DataResult result = new DataResult();
result.result = DataSource.Skip(dm.Skip).Take(dm.Take).ToList();
result.count = DataSource.Count();
return Json(result, JsonRequestBehavior.AllowGet);
}
public
class
DataResult
{
public
IEnumerable<EditableOrder> result { get; set; }
public
int count
{ get; set; }
} |
Please try the above sample and get back to us if you need
any further assistance.
Regards
Ragavee U S
Hi Sven,
Please find the response.
Query #1: ” Can you explain where I can find more information about the DataManager ?”
The documentation is currently in review state. It will be hosted online in third week of November with our Volume 3, 2014 Service Pack 1 release.
We will let you know once it is hosted online.
Query #2: “what does .Adaptor("UrlAdaptor") do in the view ?”
The UrlAdaptor is used by the DataManger to process the request and response. The Essential DataManager has several types of Adaptors in which commonly used adaptors are as follows,
1. JSON Adaptor – It is used to process the JSON Collection.
2. URL Adaptor – it is used to process all remote server`s request and response.
3. OData Adaptor – It is used to process request and response of OData services.
The DataManager documentation will also include details about the Adaptors. For now, we have provided you the “Unedited Copy” of the Data Adaptors topic as a separate document and the same can be downloaded from the below location.
Documentation link: http://www.syncfusion.com/downloads/support/directtrac/general/UG_-_Data_Adaptors_-_UneditedCopy-934982544.zip
Please let us know if you have any queries.
Regards,
Madhu Sudhanan. P
Hi Sven
Thanks for your update.
We are glad that we have achieved your requirement using the Load event of the grid.
In the load event of the grid, we have assigned the default pageSize of the grid as “120” in order to retrieve 120 records when a post request is made everytime. Also, since we have set the scroller width and height, based on it only 12 records(based on the height specified) will be displayed though 120 records are retrieved.
Please refer the below code snippet.
[In _partialGrid.cshtml] @(Html.EJ().Grid<Sample.Models.OrdersView>("Grid") . . . . . .ScrollSettings(scroll=>scroll.AllowVirtualScrolling().Height(418).Width(400)) .ClientSideEvents(eve=>eve.ActionBegin("begin").Load("load")) ) @Html.EJ().ScriptManager()
<script type="text/javascript"> function load(args) { args.model.pageSettings.pageSize = 120; } </script> |
For your convenience, we have modified our previously updated sample with the above solution and the sample can be downloaded from the below location.
Sample Link: http://www.syncfusion.com/downloads/support/directtrac/117533/12.2Sample530116507.zip
Please try the sample and get back to us if you need any further assistance.
Regards
Ragavee U S
<div id="FlatGrid"></div>
<script type="text/javascript">
$(function () {
$("#FlatGrid").ejGrid({
// the datasource "window.employeeData" is referred from templatelocaldata.js
dataSource: ej.DataManager({
url: "/Home/DataSource",
adaptor: "UrlAdaptor"
}),
isResponsive: true,
allowFiltering: true,
filterSettings: { filterType: "menu" },
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel], customToolbarItems: ["Expand", "Collapse", { templateID: "#batch" }, { templateID: "#dialog" }] },
columns: [
{ field: "EmployeeID", headerText: "Employee ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 100 },
{ field: "FirstName", headerText: "First Name", width: 100 },
{ field: "LastName", headerText: "Last Name", width: 100, priority: 2 },
{ field: "Title", headerText: "Title", width: 90, priority: 3 },
{ field: "BirthDate", headerText: "Birth Date", width: 100, textAlign: ej.TextAlign.Right, priority: 5 },
{ field: "Country", headerText: "Country", width: 100, priority: 4 }
],
});
});
@Html.EJ().ScriptManager()
</script> |