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; }
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 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 am trying to bind my KendoUI grid and I am getting a 500 server error in the console. The only thing I can think of is that it doesn't like "#(Html.Kendo().Grid()" but intellisense does not error out. Does it seem like something is setup wrong with my project? Any advice would be greatly appreciate. Below is what I have in my controller and Index.cshtml page.
public ActionResult Customers_Read([DataSourceRequest]DataSourceRequest request) {
using (var ctx = new DataEntities()) {
IQueryable<Customer> customers = ctx.Customers;
DataSourceResult result = customers.ToDataSourceResult(request);
return Json(result);
}
#(Html.Kendo().Grid<DataLibrary.Customer>()
.Name("grid")
.Columns(columns => {
columns.Bound(c => c.Name);
columns.Bound(c => c.Phone);
columns.Bound(c => c.Fax);
columns.Bound(c => c.Website);
})
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Customers_Read", "Customers"))
)
)
Does your Customer_Read method work ok?
Is the result variable populated with the results of the search?
Try adding AllowGet property.
return Json(result, JsonRequestBehavior.AllowGet);
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))
)
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