kendo grid with more than one datasource - asp.net-mvc

I'm having 3 radio buttons.I have 3 different stored procedures that is called for 3 different radio buttons.
Example:
I have a kendo grid. I want the results to be displayed in the same grid for all 3 radiobutton selection.
FindCustomer_Result is my stored procedure to call the customers details.
Now if i select the second radiobutton i want resources Stored procedure details to display.
Please help.
#(Html.Kendo().Grid<proj.Data.FindCustomer_Result>()
.Name("CustomerSearch")
.Columns(columns =>
{
columns.Bound(p => p.ID).Visible(false);
columns.Bound(p => p.FirstName).Width(130);
columns.Bound(p => p.LastName).Width(100);
columns.Bound(p => p.Address1).Width(150);
})
.DataSource(dataSource => dataSource
.Ajax()
//call getcustomer to fetch details of customer
.Read(read => read.Action("GetCustomer", "Customer")
.Data("functiontobind"))
.ServerOperation(false)
)
.Sortable()
.Scrollable()
.Filterable()
.RowAction(row => row.HtmlAttributes.Add("data-id", row.DataItem.ID))
)

Create a ViewModel wich contains your three RadioButtons:
public class MyViewModel
{
public int Id {get;set;}
public bool Radio1 {get;set;}
public bool Radio2 {get;set;}
public bool Radio3 {get;set;}
}
Then fill the ViewModel in your Controller (Customer) and specified Action (GetCustomer)
public class CustomerController : Controller
{
.......
public ActionResult GetCustomer([DataSourceRequest] DataSourceRequest gridRequest)
{
IList<MyViewModel> myViewModels = new List<MyViewModel>();
//fill ViewModels here from stored Procedures
return Json(myViewModels.ToDataSourceResult(gridRequest));
}
........
}
Then change your view Code as follows:
#(Html.Kendo().Grid<MyViewModel>()
.Name("CustomerSearch")
.Columns(columns =>
{
columns.Bound(p => p.ID).Visible(false);
columns.Bound(p => p.Radio1).Width(130);
columns.Bound(p => p.Radio2).Width(100);
columns.Bound(p => p.Radio3).Width(150);
})
.DataSource(dataSource => dataSource
.Ajax()
//call getcustomer to fetch details of customer
.Read(read => read.Action("GetCustomer", "Customer")
.Data("functiontobind"))
.ServerOperation(false)
)
.Sortable()
.Scrollable()
.Filterable()
.RowAction(row => row.HtmlAttributes.Add("data-id", row.DataItem.ID))
)

Related

MaxJsonLength Error in MVC while Binding data to KendoGrid

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() );

kendo ui grid complete server side paging and setting total count

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.

Kendo UI for ASP.Net MVC. Grid sorting error with additional entity property

I have a sorting problem with kendo ui grid.
I have a Entity class Port, in partial class I added additional property:
public partial class Port {
[NotMapped]
[XmlIgnore]
[ScriptIgnore]
public string CountryName { get; set; }
}
I am using this property in other program parts.
In controller I have:
public ActionResult Index()
{
if (!CanViewPorts())
return new EmptyResult();
ViewBag.CanEditPorts = CanEditPorts();
return View();
}
public ActionResult Ports([DataSourceRequest] DataSourceRequest request)
{
if (!CanViewPorts())
return new EmptyResult();
var all = _classificatoryService.GetAllPorts();
return Json(all.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
I'am using method Ports in my view to populate kendo ui grid.
My view:
#(Html.Kendo().Grid<Port>()
.Name("Ports")
.ToolBar(toolbar => toolbar.Template(Toolbar().ToString()))
.Columns(columns =>
{
columns.Bound(c => c.PortId);
columns.Bound(c => c.Code);
columns.Bound(c => c.Name);
columns.Bound(c => c.AlternativeName);
columns.Bound(c => c.SubDivision);
columns.Template(#<text></text>).ClientTemplate("<a class='k-button k-button-icontext' href='" + Url.Action("Details", "Port") + "/#=PortId#'><span class='glyphicon glyphicon-edit mr5'></span>Details</a>").Width(110); //"<#=PortId#>"
columns.Template(#<text></text>).ClientTemplate("<a class='newPortBtn k-button k-button-icontext' href='" + Url.Action("NewPort", "Port") + "/?portId=#=PortId#'><span class='glyphicon glyphicon-edit mr5'></span>Edit</a>").Visible(canEditPorts).Width(110);
})
.Sortable()
.ColumnMenu()
.Filterable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(x => x.PortId))
.Read(read => read.Action("Ports", "Port"))
.Sort(sort => sort.Add(x => x.ChartererId).Descending())
.Create(c => c.Action("NewPort", "Port"))
))
As you can see I'a not using additional property Countryname in this view.
Ok, grid gets ports and show it properly.
Then I'am trying to sort and click column header.
First click (ASC) - Ok, grid sorted by this column in ascending order.
Second click (DESC) - Ok, grid sorted by this column in descending order.
Third click (unsort) - Grid must be unsorted, but I have 500 (Internal Server Error).
In chrome/Network/Preview I have:
Server Error in '/' Application. The specified type member 'CountryName' is not supported in LINQ to Entities. Only initializers,
entity members, and entity navigation properties are supported.
How to fix this problem?

Kendo UI Filter is empty

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

mvc kendo grid header text

after looking all over the web, i can't find how to set the header text to the kendo grid.
for example instead of FName i would like it to sat "First name".
maybe one of you guys know?
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.FName).Groupable(false);
columns.Bound(p => p.ShemIvri) ;
columns.Bound(p => p.ShemLoazit);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
)
)
You are looking for the Title method see also in the documentation
Title
Gets or sets the title of the column.
In your case the code should look like this:
.Columns(columns =>
{
columns.Bound(p => p.FName).Title("First name").Groupable(false);
columns.Bound(p => p.ShemIvri) ;
columns.Bound(p => p.ShemLoazit);
})
or you can put [DisplayName("First Name")] in your model eg:
[DisplayName("First Name")]
[StringLength(100)]
public string FName{ get; set; }

Resources