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.
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'm trying to put a value from javascript into a form action in Yii2
is it possible?
More specifically I need to make a URL change for each option that is selected in a dropdownList.
form in views/site.php
$form = ActiveForm::begin([
'id' => 'form',
'method' => 'POST',
'action' => Url::to(['programas/'.Tours::findOne(['pk' => ])->programa]),
]);
<?= $form->field(new \app\models\Tours(), 'nombre')->dropDownList([],
[
'prompt' => 'Programa',
'id' => 'child1_child2',
'onchange' => 'updateValue(this.value)',
]
)->label(false); ?>
Js file
function updateValue(val){
x = document.getElementById("test").value;
// document.getElementById("form").action = "programas/";
}
So, I rescue the value from the selected option with JS but I need to put it in here 'pk' => 'value'
where value is the #child1_child2 selected option value.
'action' => Url::to(['programas/'.Tours::findOne(['pk' => ])->programa])
Thanks for the help.
You can use one of the following approach with some modification:
//pk => programa
$data = [
1 => 'programa1',
2 => 'programa2',
3 => 'programa3',
];
1) Use JS
<?= $form->field(new \app\models\Tours(), 'nombre')->dropDownList($data, ['prompt' => 'Programa'])->label(false); ?>
JS
$this->registerJs('
$("#dropdownID").change(function() {
var text = $("#dropdownID option:selected").text();
$("#formID").attr("action", "/pathtoproject/programas/" + text);
});
', \yii\web\View::POS_END);
2) Use Ajax Call
<?= $form->field(new \app\models\Tours(), 'nombre')->dropDownList($data, [
'prompt' => 'Programa',
'onchange'=> '$.get( "'.Url::toRoute('get-action').'", { id: $(this).val() } )
.done(function( data ) {
$("#formID").attr("action", data);
}
);'
])->label(false); ?>
Controller
public function actionGetAction($id)
{
$name = Tours::findOne(['pk' => $id])->programa];
echo \yii\helpers\Url::to(['programas/'.$name]);
}
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
I need some advice designing a custom control which uses two grids and an Add and Remove button in between.
The Add button takes the selected item from left and add it to the right and then it removes it from the left.
The Remove button does the vice versa.
To have a fluid experience, I understand that Javascript will probably have to be involved.
Currently I'm creating a control inheriting CompositeControl with two grids and two sources. I could use a UpdatePanel so I don't have to do do a full post back on Add/Remove.
Any suggestions on the best way to approach this?
I did this sample using Kendo. I write some parts .I hope it would be helpful
I add and remove some paths to supervisors in my sample:
you need a main Action like this:
public ActionResult AddPathToSupervisor()
{
return View();
}
My sample is a bit more complete because in the view at first you choose a superviser and after that you add some paths to him.
within the view you need 2 Grids and 2 buttons between for Add/Remove
like this:
<div class="row">
<div class="col large">
#(Html.Kendo().ComboBox()
.Name("supervisor")
.BindTo(SupervisorsSelectList)//var DocumetTypesSelectList = ViewBag.DocumetTypesSelectList as List<SelectListItem> ?? new List<SelectListItem>();
.Events(e => e.Change("changeSupervisor"))
)
</div>
</div>
<div class="row">
<div class="col medium">
<p>New Paths</p>
</div>
<div class="col medium">
<p></p>
</div>
<div class="col medium">
<p>Supervisor Paths</p>
</div>
</div>
<div class="row">
<div class="col medium">
#(Html.Kendo().Grid<Distribution.Models.Path>()
.Name("newPathsGrid")
.Columns(columns =>
{
columns.Bound(p => p.PathId).Visible(false);
columns.Bound(p => p.Title).Title(PathResource.Paths);
})
.Sortable()
.Scrollable()
.Navigatable()
.Filterable(filterable => filterable.Extra(false))
//.HtmlAttributes(new { style = "height:480px;" })
.Resizable(resize => resize.Columns(true))
.Selectable(s => s.Mode(GridSelectionMode.Multiple))
.DataSource(dataSource => dataSource
.Ajax()
//.PageSize(15)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(p => p.PathId);
model.Field(p => p.PathId).DefaultValue(new Guid());
})
.Read(read => read.Action("FillNewSupervisorPathsGrid", "Paths"))
)
)
</div>
<div class="col medium">
<input type="button" id="addPathToSupervisor" value=">>Add>>" />
<input type="button" id="removePathFromSupervisor" value="<<Remove<<" />
</div>
<div class="col medium k-rtl">
#(Html.Kendo().Grid<Distribution.Models.Path>()
.Name("supervisorPathGrid")
.Columns(columns =>
{
columns.Bound(p => p.PathId).Visible(false);
columns.Bound(p => p.Title).Title(PathResource.Paths);
})
//.Pageable()
.Sortable()
.Scrollable()
.Navigatable()
.Filterable(filterable => filterable.Extra(false))
//.HtmlAttributes(new { style = "height:480px;" })
.Resizable(resize => resize.Columns(true))
.Selectable(s => s.Mode(GridSelectionMode.Multiple))
.DataSource(dataSource => dataSource
.Ajax()
//.PageSize(15)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(p => p.PathId);
model.Field(p => p.PathId).DefaultValue(new Guid());
})
.Read(read => read.Action("FillSupervisorPathsGrid", "Paths", new { id = ViewBag.SupervisorId }))
)
)
</div>
</div>
this javascript code is to select Supervisor`s ID:
<script type="text/javascript">
function changeSupervisor(e) {
var id = this.value();
var supervisorPathGrid = $("#supervisorPathGrid").data("kendoGrid");
supervisorPathGrid.dataSource.read({ id: id });
}
and here is the javascript code to add and remove paths:
<script type="text/javascript">
var supervisorPathGrid = $("#supervisorPathGrid").data("kendoGrid");
var newPathsGrid = $("#newPathsGrid").data("kendoGrid");
var selectedItem = $("#supervisor").data("kendoComboBox");
$(document).on('click', '#addPathToSupervisor', function (e) {
e.preventDefault();
var supervisorId = selectedItem.value();
if (hasManyRowSelected(newPathsGrid)) {
var values = [];
values.push({
name: "supervisorId",
value: supervisorId
});
newPathsGrid.select().each(function () {
values.push({
name: "ids",
value: newPathsGrid.dataItem(this).PathId
});
});
$.ajax({
url: '#Url.Action("AddPathToSupervisor")',
type: 'POST',
datatype: "json",
traditional: true,
data: values,
success: function () {
newPathsGrid.select().each(function () {
var $this = $(this);
var data = newPathsGrid.dataItem($this);
supervisorPathGrid.dataSource.insert(0, data);
});
newPathsGrid.select().each(function () {
var $this = $(this);
var data = newPathsGrid.dataItem($this);
newPathsGrid.removeRow($this);
});
},
beforeSend: function () {
$('#addPathToSupervisor').attr("disabled", true);
$('#addPathToSupervisor').addClass("ajax-load");
},
error: function (event, request, settings) {
ajax_exception(event);
},
complete: function () {
$('#addPathToSupervisor').attr("disabled", false);
$('#addPathToSupervisor').removeClass("ajax-load");
grid.dataSource.read();
},
timeout: 50000
});
}
});
$(document).on('click', '#removePathFromSupervisor', function (e) {
e.preventDefault();
var supervisorId = selectedItem.value();
if (hasManyRowSelected(supervisorPathGrid)) {
var values = [];
supervisorPathGrid.select().each(function () {
values.push({
name: "ids",
value: supervisorPathGrid.dataItem(this).PathId
});
});
$.ajax({
url: '#Url.Action("RemovePathFromSupervisor")',
type: 'POST',
datatype: "json",
traditional: true,
data: values,
success: function () {
supervisorPathGrid.select().each(function () {
var $this = $(this);
var data = supervisorPathGrid.dataItem($this);
newPathsGrid.dataSource.insert(0, data);
});
supervisorPathGrid.select().each(function () {
var $this = $(this);
var data = supervisorPathGrid.dataItem($this);
supervisorPathGrid.removeRow($this);
});
},
beforeSend: function () {
$('#removePathFromSupervisor').attr("disabled", true);
$('#removePathFromSupervisor').addClass("ajax-load");
},
error: function (event, request, settings) {
ajax_exception(event);
},
complete: function () {
$('#removePathFromSupervisor').attr("disabled", false);
$('#removePathFromSupervisor').removeClass("ajax-load");
grid.dataSource.read();
},
timeout: 50000
});
}
});
now you need 2 Post methods to add and remove paths like this :
[HttpPost]
public ActionResult AddPathToSupervisor(string[] ids, string supervisorId)
{
try
{
PathsBll.AddPathsToSupervisor(ids, supervisorId);
}
catch (Exception ex)
{
throw ex;
}
return Json(ModelState.ToDataSourceResult());
}
[HttpPost]
public ActionResult RemovePathFromSupervisor(string[] ids)
{
try
{
PathsBll.RemovePathsFromSupervisor(ids);
}
catch (Exception ex)
{
throw ex;
}
return Json(ModelState.ToDataSourceResult());
}
in which you can write linq to add or remove paths through ids.
if you are familiar with kendo you know that you have 2 methods to fill each grid.
if you need more info add comment.
good lick