I am new to using Kendo UI Grid. I am looking at the MVC samples and am not able to figure out how remote binding sample is passing model from controller to the view:
Controller Code:
public partial class GridController : Controller
{
public ActionResult Remote_Data_Binding()
{
return View();
}
}
View Code:
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid")
.Columns(columns => {
columns.Bound(p => p.OrderID).Filterable(false).Width(100);
columns.Bound(p => p.Freight).Width(100);
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(140);
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity).Width(150);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
)
)
In the view code there is no #model specified and in the controller there is no model passed in View method. How then does the grid populate the data?
As fruitbat has said Kendo uses ajax to populate grids. This is all configured in the grids datasource . Here is some documentation that is worth looking over.
http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/configuration#read
Related
I have the following Kendo grid, I have order date as MM/yyyy. In the data source the orderdate is stored as MM/dd/yyyy.
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid")
.Columns(columns => {
columns.Bound(p => p.OrderID).Filterable(false).Width(100);
columns.Bound(p => p.Freight).Width(100);
columns.Bound(p => p.OrderDate).Format("{0:MM/yyyy}").Width(140);
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity).Width(150);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
)
)
Is there anyways on calendar display Month and Year and filter the grid based the month and year selected, ignoring the date as shown in the screenshot below?
Currently it's displaying the date to select
You could use a custom filter template on that column. Below is the jquery code on how to configure a DateTimePicker to limit the selection to a year and month (This was taken from the KendoUI for JQuery demos).
<input id="datepicker"/>
<script>
$("#datepicker").kendoDatePicker({
depth: "year",
start: "year"
});
</script>
Another way via config would be to use a custom template for filters.
columns.Bound(p => p.OrderDate).Format("{0:MM/yyyy}").Width(140)
.Filterable(filterable => filterable.UI("customDateTimeFilter"));
<script type="text/javascript">
function customDateTimeFilter(element) {
if (element == null) return;
element.kendoDatePicker({
depth: "year",
start: "year"
});
}
</script>
I have the following code to populate KendoGrid, I used Jquery to get text-box value. text-box display the right value but Jquery is not returning what's in the textbox instead it return nothing.
<input asp-for="InvoiceID" name="InvoiceID" id="iid" />
<script>
function additionalInfo() {
return {
invoiceID: $("#iid").val()
}
}
</script>
#(Html.Kendo().Grid<....WebUI.ViewModels.Project.BillingDocuments>()
.Name("BillingDocuments")
.Columns(columns =>
{
columns.Bound(p => p.ID).Hidden().Width(50);
columns.Bound(p => p.PrintSequence).Title("Seg").Width(50);
columns.Bound(p => p.DocumentType).Width(100);
columns.Bound(m => m.Actions).ClientTemplate("<a class='text-primary' href='#= DocumentLocation #'>View</a>").Width(50);
})
.HtmlAttributes(new { style = "height:250px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("BillingDocumentsRead", "Billing", new { Area = "Project"}).Data("additionalInfo")
.Type(HttpVerbs.Get))
)
)
I tried by setting the invoice ID value as
<script>
function additionalInfo() {
return {
invoiceID:55
}
}
</script>
and this works fine but jquery doesnt pick textbox value of <input asp-for="InvoiceID" name="InvoiceID" id="iid" />.
I want to send multiple selected column values to controller. I don't have issues in sending one column data to controller but having trouble sending more than one column data.
View:
#using (Html.BeginForm("GridView", "Home", FormMethod.Post))
{
#Html.Grid(Model).Columns(columns =>
{
columns.Add()
.Titled("<input type=checkbox class=ckbCheckAll />")
.Encoded(false)
.Sanitized(false)
.SetWidth(10)
.RenderValueAs(c => Html.CheckBox("assignChkBx", false, new { #class = "checkBoxClass", value = c.AccountNumber})).SetWidth(10);
//.RenderValueAs(c => Html.CheckBox("checked", false, new {#class = "checkBoxClass"})).SetWidth(10);
columns.Add(c => c.AccountNumber).Titled("ACCOUNTNUM").SetWidth(20);
}).WithPaging(8);
Controller:
[HttpPost]
public ActionResult GridView(FormCollection form)
{
SelectedListOfClaimants slc = new SelectedListOfClaimants();
var checkbox = form.GetValues("assignChkBx");
}
In the view where I have value = c.AccountNumber (One of my columns), I need to add two more columns and send all three columns data to my controller.
My view:
Checkbox AccountNumber Date Name
[] 1 5/12/2001 John
[] 2 5/10/2003 Paul
[] 3 5/11/2018 Tom
Does Id have to be an integer or it can be string?
It seems like in my case #=INVOICE# is getting value but it Read method to controller not sure why not getting called.
I tried looking at this example: http://demos.telerik.com/kendo-ui/grid/detailtemplate
code:
#(Html.Kendo().Grid<OpenInvoicesInfo>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.INVOICE).ClientTemplate("<input type='checkbox' value='#= INVOICE #' class='testclass' />").Width(4);
columns.Bound(i => i.INVOICE).Width(15);
...
})
.ClientDetailTemplateId("OrdersTemplate")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(8)
.Read(read => read.Action("GetOpenInvoices", "Maint", new { cust = Request.QueryString["cust"] }))
)
)
<script id="OrdersTemplate" type="text/kendo-tmpl">
#(Html.Kendo().Grid<CustomerComments>()
.Name("grid_#=INVOICE#")
.Columns(columns =>
{
columns.Bound(o => o.INVOICE).Width(15);
columns.Bound(o => o.Comment).Width(40);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetCustomerComments", "Maint", new { invoices = "#=INVOICE#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
Controller:
public ActionResult GetCustomerComments([DataSourceRequest] DataSourceRequest request, string invoices)
{
List<JNI.Enterprise.Contracts.CustomerComments> customer = InvoiceService.GetCustomerComments(invoices);
return Json(customer.ToDataSourceResult(request));
}
I will really appreciate if someone can reply.
Does it only work if it is in entity framework.
I am calling GetCustomerComments from a stored procedure.
It is loading the first grid fine but not calling details grid's controller method.
I have a select box, and I want to use it to Ajax-update some other content on the page. So I have bound an event handler using the JsHelper (jQuery) like so:
<?php
echo $this->Form->select('car', $cars);
$this->Js->get("#car");
$this->Js->event('change', $this->Js->request(array(
'controller' => 'cars',
'action' => 'view',
???,
array('async' => true, 'update' => '#car-view', 'evalScripts' => true),
true
));
?>
But how can I get the value of the select box to send as an argument to the cars controller (at "???" in the code above)?
I could do everything in javascript, but is there any way to do this in cake?
To be honest, I struggled with this a while back. I couldn't find anything that worked, so I ended up just going the straight javascript route.
I think you are looking for this:
$this->Js->get('#selectbboxid1')->event('change',
$this->Js->request(array(
'action' => 'function'), array(
/*'before' => 'showLoader();',
'success' => 'hideLoader();',*/
'update' => '#selectboxid2',
'dataExpression'=>TRUE,
'method'=>'POST',
'async'=>TRUE,
'data' => $js->serializeForm(array('isForm' => TRUE, 'inline' => TRUE)) )));