I'm trying to launch a Kendo grid in a Kendo popup Window but instead of the grid showing, I'm getting the json data.
This is the code from my controller:
[HttpGet]
public ActionResult Read([DataSourceRequest]DataSourceRequest request, int id)
{
var model = Service.FindOne("Cashflows", x => x.Id == id);
var cashflows = new List<flows>();
foreach (var cf in model.CashFlows)
{
var flow = new flows
{
Id = cf.Id,
AssetId = cf.Id,
MortgageValue = cf.MortgageValue,
Year = cf.Year
};
cashflows.Add(flow);
}
var result = cashflows.ToDataSourceResult(request);
return Json(result, JsonRequestBehavior.AllowGet);
}
This is what I have in my Kendo View.
#(Html.Kendo().Grid<ViewModels.Finance.flows>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Id);
columns.Bound(p => p.AssetId);
columns.Bound(p => p.Year);
columns.Bound(p => p.MortgageValue);
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Read", "Finance"))
.ServerOperation(false)
.PageSize(5)
)
.Pageable()
)
You need to update the return command to:
return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
Related
I have been working on this Issue for quite some time now.
Basically, I'm using Kendo Grid to display data from Controller to the ViewPage.
But, when I run the view, I Keep getting this error
maxJsonLengthError
How do i rectify this problem?? Appreciate all the help in advance.
Refer to my EDIT
Here is my ControllerCode:-
public ActionResult Index()
{
ViewData["DealsList"] = objDealerModel.listDeals;
return View();
}
And Here is my ViewPage Code:-
#(Html.Kendo().Grid((IEnumerable<WCB.Models.DealerQueue>)ViewData["DealsList"])
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.DealId).Visible(false);
columns.Bound(p => p.DealRefNo).Title("Deal No");
columns.Bound(p => p.CustomerName).Title("Customer Name");
columns.Bound(p => p.DealType).Title("Deal Type");
columns.Bound(p => p.Location).Visible(false);
columns.Bound(p => p.CreatedDate).Title("Created Date");
columns.Bound(p => p.Currency).Title("Currency");
columns.Bound(p => p.Amount).Title("FCY Amount");
columns.Bound(p => p.DealValue).Title("Deal Amount").ClientTemplate("#= kendo.toString(DealValue, 'n') #");
columns.Bound(p => p.Status);
columns.Command(command => command.Custom("ViewDetails").Click("ViewDealDetails")).Title("View");
})
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(20))
.Sortable()
.Scrollable(scr => scr.Height("auto"))
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
)
)
EDIT:
i've tried using this piece of code in myController:-
var jsonResult = Json(objDealerModel.listDeals, JsonRequestBehavior.AllowGet);
jsonResult.MaxJsonLength = int.MaxValue;
return jsonResult;
Can anyone suggest based on this what changes need to be made in my viewPage for KENDO GRID?? Not too familiar with Kendo
I have a same problem and i solve this by setting a higher value for aspnet:MaxJsonDeserializerMembers in the appSettings:
<appSettings>
<add key="aspnet:MaxJsonDeserializerMembers" value="150000" />
</appSettings>
If those options are not working you could try creating a custom json value provider factory using JSON.NET as specified in this thread.
Edit:
Or if this is related to the Kendo Grid binding then you can try this.
public class MySerializer : Kendo.Mvc.Infrastructure.JavaScriptInitializer
{
public override IJavaScriptSerializer CreateSerializer()
{
var serializer = base.CreateSerializer() as DefaultJavaScriptSerializer;
serializer.MaxJsonLength = serializer.MaxJsonLength * 100;
return serializer;
}
}
Kendo.Mvc.Infrastructure.DI.Current.Register<Kendo.Mvc.Infrastructure.IJavaScriptInitializer>( () => newMySerializer() );
I have a kendo grid that returns all the results except for the first column, being the date. It is showing as blank. In my viewmodel the reviewdate is of type string. In my controller I have the reviewdate converted to a string. I know that reviewdate returns MM/dd/yyyy from debug.
Controller snippet:
foreach (var item in query)
{
model.Add(new PreviousReviewViewModel()
{
ReviewId = item.ReviewId,
ReviewDate = item.NextReviewDt.ToString("MM/dd/yyyy"),
Rating = item.Rating,
SubmittedFl = item.SubmittedFl
});
}
In my view i have the grid as follows:
#(Html.Kendo().Grid<PreviousReviewViewModel>()
.Name("Grid")
//.HtmlAttributes(new { style = "width:450px;" })
.Columns(columns =>
{
columns.Template(
#<text>
#Html.ActionLink(Model.ReviewDate, "SavedFormsIndex", new { Controller = "Forms", id = Model.ReviewId })
</text>).ClientTemplate(#"").Title("Review Date");
columns.Bound(m => m.Rating).Title("Composite Rating"); //rating is the avg
columns.Bound(m => m.SubmittedFl).Title("Submitted");
})
.Pageable(p => p.Numeric(false).PreviousNext(false).Refresh(true))
.Resizable(resize => resize.Columns(true))
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(2147483647)
.Read(read => read.Action("read_PrevProjReviews", "Forms", new { id = ViewBag.ProjectId }))
)
try change your client template
.ClientTemplate(#"#=ReviewDate#
I am using kendo grid with server side paging. I do sorting and fetching of data at database side itself which gives me only pagesize number of records. I also get count of total records from backend itself. I just want to bind this data to kendo grid with showing page number according to count I return.
i.e. for every next page request I just return pagesize(e.g. 15) number of records with total count of record. Below is my code for kendo grid. Please help me to bind this records and show page numbers according to total count.
#(Html.Kendo().Grid(Model.InvoiceList)
.Name("InvoiceGrid")
.Columns(columns =>
{
columns.Bound(p => p.CompanyName).Title("Company Name").Width(80);
columns.Bound(p => p.Account).Title("Account").Width(60);
columns.Bound(p => p.MerchantNumber).Title("Merchant No.").Width(60);
columns.Bound(p => p.InvoiceAmount).Title("Invoice Amount").Width(60);
columns.Bound(p => p.ReferralPercentage).Title("Referral %").Width(60);
columns.Bound(p => p.ReferralCommission).Title("Referral Com.").Width(60);
columns.Bound(p => p.DeveloperPercentage).Title("Developer %").Width(60);
columns.Bound(p => p.DeveloperCommission).Title("Developer Com.").Width(60);
})
.Pageable(
)
.Sortable()
.Filterable(filterable => filterable
.Extra(false)
)
.DataSource(dataSource => dataSource
.Ajax()
.Batch(false)
.PageSize(15)
.ServerOperation(true)
.Read(read => read.Action("Index", "Invoice")
).Total(Model.count)
)
)
My server side code I am using to fetch records is as below.
public async Task<ActionResult> IndexAsync(int pageNo=0,int numberOfRecord=15)
{
//InvoicePaging has invoice list of 15 records and count = 400
InvoicePaging ip = await InvoiceDAL<FileRecord>.getAllInvoices("SProcGetInvoiceList", pageNo, numberOfRecord);
return View("InvoiceList",ip);
}
Invoice paging class -
public class InvoicePaging
{
[JsonProperty(PropertyName = "InvoiceList")]
public List<Invoice> InvoiceList { get; set; }
[JsonProperty(PropertyName = "count")]
public int count { get; set; }
}
After searching for solution to problem I got the following code working for me.
#(Html.Kendo().Grid<Commission.Vault.Models.Invoice>()
.Name("InvoiceGrid")
.Columns(columns =>
{
columns.Bound(p => p.CompanyName).Title("Company Name").Width(80);
columns.Bound(p => p.Account).Title("Account").Width(60);
columns.Bound(p => p.MerchantNumber).Title("Merchant No.").Width(60);
columns.Bound(p => p.InvoiceAmount).Title("Invoice Amount").Width(60);
columns.Bound(p => p.ReferralPercentage).Title("Referral %").Width(60);
columns.Bound(p => p.ReferralCommission).Title("Referral Com.").Width(60);
columns.Bound(p => p.DeveloperPercentage).Title("Developer %").Width(60);
columns.Bound(p => p.DeveloperCommission).Title("Developer Com.").Width(60);
})
.EnableCustomBinding(true)
.BindTo(Model.InvoiceList)
.Pageable(
)
.Sortable()
.Filterable(filterable => filterable
.Extra(false)
)
.DataSource(dataSource => dataSource.Server().Total(Model.count).PageSize(15)
)
)
And code behind for it in Asp.net is
public async Task<ActionResult> IndexAsync([DataSourceRequest(Prefix = "InvoiceGrid")] DataSourceRequest request)
{
List<Invoice> il = new List<Invoice>();
int pageNo = request.Page-1,numberOfRecord=15;
InvoicePaging ip = await InvoiceDAL<FileRecord>.getAllInvoices("SProcGetInvoiceList", pageNo, numberOfRecord);
return View("InvoiceList",ip);
}
The only thing is that I am always getting the pageSize as 0. Other everything working perfectly.
I have two <section> in the Index view of my MVC application and I want to render two partial views in these sections. There is no problem rendering a Kendo grid to one Index. However, in order to render data on Kendo Grid, could I use the two methods returning Json in the controller as shown below. Could you give me an example how to achieve this?
Controller:
public ActionResult Index()
{
return View();
}
public ActionResult Issues_Read([DataSourceRequest]DataSourceRequest request)
{
IQueryable<Issue> issues = db.Issues;
DataSourceResult result = issues.ToDataSourceResult(request, c => new IssueViewModel
{
ID = c.ID,
ProjectID = c.ProjectID
});
return Json(result);
}
View:
#(Html.Kendo().Grid<IssueViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.ProjectID);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
})
.ColumnMenu()
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Pageable()
.Navigatable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.ID))
.Read(read => read.Action("Issues_Read", "Issue"))
.Create(create => create.Action("Issues_Create", "Issue" ))
.Update(update => update.Action("Issues_Update", "Issue"))
.Destroy(destroy => destroy.Action("Issues_Destroy", "Issue"))
)
)
In order to use the same partial view multiple times, grid ID should be unique so passing the ID in partial view data is one possible solution. In your case
Partial view first call:
#Html.Partial("grid", new ViewDataDictionary { { "id", "grid1" }})
Partial view second call:
#Html.Partial("grid", new ViewDataDictionary { { "id", "grid2" }})
Partial view content:
#(Html.Kendo().Grid<IssueViewModel>()
.Name(#ViewData["id"].ToString())
...
I want to use Kendo UI grid with filter option in APS.NET MVC.
In my example I use database as datasource and a student table
When I use student class as
public ActionResult Index()
{
var std = (from p in db.Students
select p).ToList();
return View("Student", std);
}
everything is ok.
But when I want use ViewModel as datasource, in runtime when I click in filter icon filter window open but I can't see anything in dropdown list of filter.
I use automapper and value injecter.
Any suggestion to solve this problem?
Appended
PersonController.cs
public class PersonController : Controller
{
Adventureworks2012DataContext db = new Adventureworks2012DataContext();
public ActionResult Index()
{
/*var prs = (from p in db.Person
select p).ToList();*/
return View(GetPersonViewModel());
}
public ActionResult PersonViewModel_Read([DataSourceRequest]DataSourceRequest request)
{
return Json(GetPersonViewModel().ToDataSourceResult(request));
}
private IList<PersonViewModel> GetPersonViewModel()
{
return db.Person.Project().To<PersonViewModel>().ToList();
}
}
Index.cshtml
#model IList<DevartLinqTestMVC.ViewModel.PersonViewModel>
#{
ViewBag.Title = "Person List";}
<br />
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Businessentityid);
columns.Bound(p => p.Persontype);
columns.Bound(p => p.Namestyle);
columns.Bound(p => p.Title);
columns.Bound(p => p.Firstname);
columns.Bound(p => p.Middlename);
columns.Bound(p => p.Lastname);
columns.Bound(p => p.Emailpromotion);
})
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Selectable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(m => m.Id(s => s.Businessentityid))
.PageSize(20)
.Read(read => read.Action("PersonViewModel_Read", "Person")))
)
everything is good also ajax work perfectly
but where is filter dropdown list?!!!
If you pass a list in your view it only works you want a static list that is loaded once. If you want server side paging or a toolbar, you need to load your data using a server side function that returns a JSON object and link it to your grid with .Read().
For example, in your controller (code not tested):
public ActionResult StudentGrid_Read([DataSourceRequest] DataSourceRequest request)
{
return Json((from p in db.Students select p).ToDataSourceResult(request));
}
And on your grid:
#(Html.Kendo()
.[other stuff]
.DataSource(dataSource => dataSource
.[other stuff]
.Read("StudentGrid_Read", "Controller")
)
)
See the kendo ui grid with toolbar demo for the complete coding example: http://demos.kendoui.com/web/grid/toolbar-template.html
Edit: just noticed there is a filtering demo as well, but the idea is the same:
http://demos.kendoui.com/web/grid/filter-menu-customization.html