I'm using kendo grid with checkbox client template and I would like to pass the row to a function.
<div>
#(Html.Kendo().Grid(Model).Name("EvaluationFormGrid").DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(m => m.EventEvaluationFormId);
model.Field(m => m.EventEvaluationFormId).Editable(false);
})
.Destroy(delete => delete.Action("DeleteEvaluationForm", "EvaluationFormsManagement"))
.PageSize(60)
.ServerOperation(false)
).Columns(c =>
{
c.Bound(m => m.EvaluationFormTitle).Width(150).Title("Evaluation Form Title");
c.Bound(m => m.EvaluationFormLink).Width(300).Title("Evaluation Form Link");
c.Bound(m => m.ModifiedUserName).Title("Mod. by").Width(80);
c.Bound(m => m.ModifiedDateUtc).Title("Mod. date").Width(80);
c.Bound(m => m.IsDisplayedInApp).Title("Is displayed in app").Width(80)
.ClientTemplate("<input type='checkbox' #= IsDisplayedInApp ? checked='checked' :'' # value='#=IsDisplayedInApp#' onClick='onChange(#=IsDisplayedInApp#)'/>");
c.Bound(m => m.EventEvaluationFormId).Title(string.Empty).Width(80)
.ClientTemplate("<a class='table-entry-control edit-entry-control' href='" + Url.Action("ManageEvaluationForm", "EvaluationFormsManagement",
new { area = "Admin" }) + "/#= EventEvaluationFormId #'" + "><span class=\"k-icon k-edit\"></span>Edit</a><br />")
.Sortable(false);
c.Command(commands =>
{
commands.Destroy();
}).Title("").Width(80);
})
.Events(events => events.Change("onChange"))
.Editable(e => e.DisplayDeleteConfirmation(true)).Deferred().DataSource(datasource =>
datasource
.Ajax()
.ServerOperation(false)).Deferred(true))
<script>
function onChange(arg) {
alert(arg);
var selected = $.map(this.select(), function (item) {
return $(item).text();
});
kendoConsole.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
}
</script>
</div>
With this line I would like to pass in the whole row, right now I only pass in a boolean:
c.Bound(m => m.IsDisplayedInApp).Title("Is displayed in app").Width(80)
.ClientTemplate("<input type='checkbox' #= IsDisplayedInApp ? checked='checked' :'' # value='#=IsDisplayedInApp#' onClick='onChange(#=IsDisplayedInApp#)'/>");
Does anyone know how I could pass row here:
onClick='onChange(#=IsDisplayedInApp#)
Thanks
Try this:
function onClick(chk) {
var grid = $('[name="EvaluationFormGrid"]').data("kendoGrid");
// Get the row
grid.dataItem($(chk).closest("tr"));
};
I'm not used to Kendo MVC so I don't know what .Name() generates, but in the first line of the function, you have to get the grid widgtet instance to the grid var.
Related
Good day,
I am having a tough time refreshing just the kendo grid that is placed inside a partial view. Take a look at the code I am currently using in my partial view:
#model IEnumerable<TelerikMvcAscernAdmin2.Models.ConnectionViewModel>
#(Html.Kendo().Grid(Model).Name("id").Sortable().Columns(c => {
c.Bound(p => p.SystemId);
c.Bound(p => p.Host);
c.Bound(p => p.Port);})
.DataSource(datasoure =>datasoure.Server().PageSize(25).Sort(sort=>{sort.Add(c => c.Host).Ascending(); })
).Filterable()
.Pageable(p => p.PageSizes(new int[] { 25, 35, 40 })
.Refresh(true)).Groupable().Sortable().Scrollable(s => s.Height("200px")).RowAction(row => {
if (row.DataItem.Port == 0) row.HtmlAttributes["style"] = "background:red"; }).HtmlAttributes(new { style = "width: 800px;" }) )
<script> $(document).ready(function () {
var refId = setInterval(function () {
var grid = $("#id").data("kendoGrid");
grid.dataSource.read();
}, 40000);
}); </script>
As you can see, I am using a server side function so that I can auto-refresh this grid. I have tried switching it to an Ajax function, but when I do that my grid can't be refreshed.
I am rendering this partial view inside my Home view, as shown below:
#Html.Action("EngineConnection", "GatewayConnections")
Also, take a look at my action controller method, I am returning all my data to a partial view:
public ActionResult EngineConnection()
{
var gatewayConnections = GatewayConnections.GetAllConnections();
var agents = Agent.RetrieveAgents();
var connectionViewModels = (from agent in agents.Where(a => a.Active)
join gatewayConnection in gatewayConnections on agent.SystemId equals gatewayConnection.ClientId into
agentConnections
from agentConnection in agentConnections.DefaultIfEmpty()
select
new ConnectionViewModel
{
SystemId = agent.SystemId,
Host = (agentConnection == null ? string.Empty : agentConnection.Host),
Port = (agentConnection == null ? 0 : agentConnection.Port)
}).ToList();
return PartialView("_EngineConnection", connectionViewModels);
}
I have tried returning a JSON object, but that does not seem to do the trick. Is there a way to refresh just the grid, instead of the entire page, and still keep the grid inside the partial view?
Any suggestion will help!
Thanks
I would suggest you following way to bind the grid.
#(Html.Kendo().Grid<EntityStandardGridModel>()
.Name("KendoEntityStandardGrid")
.Columns(columns =>
{
//columns
})
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.Sortable(sortable => sortable.AllowUnsort(false))
.Scrollable(scrollable => scrollable.Virtual(true))
.Resizable(resizable => resizable.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.Model(model => model.Id(p => p.SearchId))
.Read(read => read.Action("GetStandardGriddata", "Search", new { SearchId = Model.SearchId }))
)
)
I'm trying to display a pop up window when a user clicks on a button but I cant seem to get this to work. I can fire the event when using a custom command but I need a textbox and button next to each other in the same column.
Any ideas why this isn't working?
#(Html.Kendo().Grid(Model)
.Name("gridPopup")
.Columns(columns =>
{
columns.Bound(p => p.ProductName).Width(120);
columns.Template(#<text></text>).Title("").Width(110).ClientTemplate(
Html.Kendo().TextBox()
.Name("search_textfield")
.Value("").ToClientTemplate().ToString()
+ " " +
Html.Kendo().Button()
.Name("search_button")
.HtmlAttributes(new { type = "button", #class = "k-primary" })
.Events(e =>
e.Click("SearchButton")
)
.Content("...").ToClientTemplate().ToString()
);
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Scrollable()
.HtmlAttributes(new { style = "height:320px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Events(events => events.Error("errorHandler"))
.Model(model =>
{
model.Id(p => p.ProductID);
model.Field(p => p.ProductID).Editable(true);
model.Field(p => p.CategoryID).DefaultValue(1);
})
.Read(read => read.Action("ForeignKeyColumn_Read", "Home"))
.Update(update => update.Action("ForeignKeyColumn_Update", "Home"))
.Create(create => create.Action("ForeignKeyColumn_Create", "Home"))
.Destroy(destroy => destroy.Action("ForeignKeyColumn_Destroy", "Home"))
)
)
<script type="text/javascript">
function errorHandler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
function SearchButton(e)
{
alert("Search Button Clicked");
}
</script>
Weird! .Events(e => e.Click("SearchButton")) is not generating the onclick attribute if used inside a ClientTemplate()
Try this, it will work for you, but i will wait for someone to explain it :)
.HtmlAttributes(new { type = "button", #class = "k-primary", onclick = "SearchButton()" })
Edit:
The explanation that I found is here: How do I use a Kendo UI widget inside a Grid client column template?. It says script tags are not automatically evaluated inside a Grid client column template, so any included widgets will not be initialized.
Therefore initializing the nested controls in .Events(e => e.DataBound("onDatabound"))
function onDatabound()
{
jQuery("#gridPopup tbody [class='k-primary']").each(function () {
$(this).kendoButton({ "click": SearchButton });
})
}
I'm using a Kendo UI Web Grid in an ASP.Net MVC 4 application.
At the bottom of the code below you'll see a JavaScript function called GetEditChildUrl that accepts a parameter called data. Unfortunately, what gets passed in as the data parameter is the parent row data but I was expecting the child row data. This works fine for GetEditParentUrl. So how do I get the child row data?
#(Html.Kendo().Grid<Application.Models.Parent>()
.Name("grid_parent")
.Columns(columns =>
{
columns.Bound(x => x.Name);
columns.Bound(x => x).ClientTemplate(
"<a href='#= GetEditParentUrl(data) #' class='k-button' style='min-width:0px;'><span class='k-icon k-i-pencil'></span></a>"
).Width(90).Filterable(false);
})
.Scrollable(action => action.Virtual(true))
.Filterable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Parents_Read", "Parent"))
)
.Scrollable(s => s.Height("auto"))
.ClientDetailTemplateId("client-template")
)
#section Scripts {
<script id="client-template" type="text/x-kendo-template">
<h3>Contacts</h3>
#(Html.Kendo().Grid<Application.Models.Child>()
.Name("grid_child_#=Id#") // make sure the Name is unique
.Columns(columns =>
{
columns.Bound(x => x.Name);
columns.Bound(x => x).ClientTemplate(
"<a href='#= GetEditChildUrl(data) #' class='k-button' style='min-width:0px;'><span class='k-icon k-i-pencil'></span></a>"
).Width(90).Filterable(false);
})
.DataSource(dataSource =>
dataSource.Ajax().Read(read => read.Action("Children_Read", "Parent", new { parentId = "#=Id#" }))
)
.Scrollable(s => s.Height("auto"))
.Sortable()
.ToClientTemplate()
)
</script>
<script>
function GetEditParentUrl(data) {
return "#Url.Action("Edit", "Parent")/" + data.Id;
}
function GetEditChildUrl(data) {
return "#Url.Action("Edit", "Child")/" + data.Id;
}
</script>
}
Try escaping the hash (#) symbols in your column client template.
columns.Bound(x => x)
.ClientTemplate("<a href='\\#= GetEditChildUrl(data) \\#' ...>")
From the KendoUI docs:
Important: The "#" characters used for a template expression should be
escaped when using a column ClientTemplate in a detail template so
that the expression is evaluated in the correct context.
I want to use Javascript Function in Kendo Grid Create.
For that I have defined the Javascript Function as,
<script>
function GetCompanyID()
{
return $("#Company").val();
}
</script>
And I want to use it in Create template of Kendo Grid as,
#(Html.Kendo().Grid<Invoice.Models.ViewModels.DossierViewModel>()
.Name("Dossier")
.Columns(columns =>
{
columns.Bound(p => p.CustomerName).Title("Customer").Width(150);
columns.Bound(p => p.InvoiceNumber).Title("INV no.").Width(100);//.Width(20);
columns.Bound(p => p.InvoiceAmountLC).Title("INV Amount LC").Width(150);
})
.ToolBar(toolbar => toolbar.Create().Text("Add New Dossier"))
.Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("New_Dossier")) //Having Different Template for New Dossier
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(model => { model.Id(p => p.DossierID); })
.Read(read => read.Action("Dossier_Read", "Dossier"))
.Create(create => create.Action("Dossier_Create", "Dossier", new { #CompanyID = GetCompanyID }))
.Filter(filters =>
{
// Show products whose ProductName property contains "C"
filters.Add(dossier => dossier.Status).Contains("");
})
)
)
In that I want to use that Javascript functio as I am currently using in Above code as,
.Create(create => create.Action("Dossier_Create", "Dossier", new { #CompanyID = GetCompanyID }))
But this is not the Way it should be used. Please Help me on this. How can I use that Javascript function into this, ASAP.
You need to use the Data() method of the grid data source to send this data. Something like:
.Create(create => create.Action("Dossier_Create", "Dossier").Data("GetCompanyID")
function GetCompanyID()
{
return {
CompanyID: $("#Company").val();
};
}
Check the grid FAQ for more info and an example.
I have written controller as follow:
public class CommodityController : Controller
{
public ActionResult Vessel()
{
return View();
}
[GridAction]
public ActionResult SelectVessel()
{
var query = _productServices.GetAllProducts().ToList();
var model = PreparedBasicProductModel(query);
return View(new GridModel(model));
}
}
and I have written a view as follow:
#using Telerik.Web.Mvc.UI;
#using Telerik.Web.Mvc;
#model List<VesselSelection.Models.Vessel.ProductModel>
#(Html.Telerik().Grid<VesselSelection.Models.Vessel.ProductModel>()
.Name("Grid")
.DataBinding(dataBinding => dataBinding.Ajax().Select("SelectVessel", "Commodity")
)
.DataKeys(keys => keys.Add(c => c.Id))
.Columns(columns =>
{
columns.Bound(c => c.Id).Title("Picture");
columns.Bound(c => c.Name).Title("Data");
columns.Bound(c => c.ProductPicture).Title("Command");
})
.ClientRowTemplate(grid => "<div class='employee-details'>" +
"<img class='t-widget' src='<#= ProductPicture #>' alt='<#= Name #>' title='<#= Name #>' />" +
"<dl>" +
"<dt>Weight:</dt><dd><#= Weight #></dd>" +
"<dt>Cost Price:</dt><dd><#= CostPrice #></dd>" +
"<dt>Vendor:</dt><dd><#= VendorName #></dd>" +
"<div class='commands'>" + grid.EditButton(null) + grid.DeleteButton(null) + "</div>" +
"</div>"
)
.Sortable()
.Editable(editing => editing.Mode(GridEditMode.PopUp))
.Scrollable(scrolling => scrolling.Height(500))
.Pageable()
)
My question is that when i run this application data is not binding, so that in grid it showing blank.
please help me.
Have you tried using .OperationMode(GridOperationMode.Client) in your databinding?
Example:
.DataBinding(dataBinding => dataBinding.Ajax()
.OperationMode(GridOperationMode.Client)
.Select("SelectVessel", "Commodity")
)
You could always check the
online documentation from telerik when in doubt.