I have the following code, where to the columns I add the property of Editable, where to know if it is true or false I will send to call a JS function, what I want to send as parameter the value of the columan UnitsInStock. How can I set it as a parameter in the call the function? currently does not work.
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductName).Editable("funcion(UnitsStock)");
columns.Bound(p => p.UnitPrice).Width(120);
columns.Bound(p => p.UnitsInStock).Width(120);
columns.Bound(p => p.Discontinued).Width(120);
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.ProductID))
// ...
)
The Editable() configuration expects the name of the JS function that would specify if the filed is editable or not. By default, the function receives the dataItem for the row, so you can just do the following - example:
columns.Bound(p => p.ProductName).Editable("isEditable");
...
<script>
function isEditable(dataItem){
return dataItem.UnitsInStock % 2 == 0 // logic returning true/false on whether the field should be editable or not
}
</script>
Related
I have one grid like this :
#(Html.Kendo().Grid<ProductViewModel>()
.Name("Grid")
.Columns(columns =>
{
**columns.Bound(c => c.Logo).ClientTemplate();**
columns.Bound(p => p.Title);
columns.Bound(p => p.Category);
columns.Bound(p => p.SupplierName);
columns.Bound(p => p.SupplierContactName);
columns.Bound(p => p.IsDeleted);
columns.Bound(p => p.TimeStamp).Format("{0:yyyy/MM/dd HH:mm}").EditorTemplateName("DateTime"); ;
//columns.Command(command => { command.Edit(); command.Destroy(); }).Width(220).Title("Command");
//columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
})
.Pageable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.ID))
.Read(read => read.Action("EditingCustomValidation_Read", "Product"))
)
And I have one action like this for Showing image :
public FileContentResult Photo(int id)
{
return new FileContentResult(db.Products.Find(id).Logo, "image");
}
What should I write in my ClientTemplate for calling this action sending productid an showing products logo?
Please you can try like this...
columns.Bound(c => c.Logo).ClientTemplate("<img src='" + Url.Content("~/ImagePath/") + "#=ImageUrl#' alt='#=Name #' Title='#=Name #' height='62' width='62'/>");
One of my colleague ran into same issue and we posted question on telerik forum Bind image path to a controller function in Kendo Grid and they responded as below.
I think instead of your controller returning a string with the URL of the image it might be easier for it to just return the image itself. Some thing like this post on stackoverlow
That way you can just have your template point the src property of the img html element to this controller action that would presumably take as parameter something to pinpoint the corresponding image file to each row element.
I have an MVC 4 project with a Kendo grid. The grid is multi-selectable. How can I pass IDs of the selected rows to the controller on button click?
Thanks.
Here is my grid:
#(Html.Kendo().Grid(Model.Manifest)
.Name("PackageGrid")
.Columns(columns =>
{
columns.Bound(p=>p.PackageId).Hidden();
columns.Bound(p => p.PackageName)
.Template(#<text>#Html.ActionLink(#item.PackageName,"PackageDetails","ExternalIntegration", new {id=#item.PackageId}, null)</text>);
columns.Bound(p => p.NumberOfDaysAgo);
columns.Bound(p => p.LastEvent);
columns.Bound(p=>p.ProcessDate);
columns.Bound(p=>p.ProcessTime).Title("Process Time(ms)");
columns.Bound(p=>p.DomainMessageCount);
columns.Bound(p => p.FailureParseEventCount).Title("Items of Concern");
})
.Sortable()
.Filterable(filterConfig => filterConfig
.Messages(messageConfig => messageConfig
.Filter("Apply")
.Info("Set Filter")))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.DataSource(dataSource => dataSource
.Server()
.Model(model => model.Id(p => p.PackageId))
)
Since you can have multiple row selection you can use select() method and it will return an array of rows you have selected. Then you can access row values as below inside your button click event.
var packageGrid = $("#PackageGrid").data("kendoGrid");
var rows = packageGrid.select();
rows.each(function(index, row) {
var selectedItem = packageGrid.dataItem(row);
// var packageName= selectedItem.PackageName;
});
Thanks!
Ive seen lots of traffic regarding this issue so I thought I would add my own spin. Everything works as expected on my dev machine. But when I deploy to Azure, the read action on the grid is no longer posted. instead its posting to the url of the page.
Here is my grid
#(Html.Kendo().Grid<HondaPERebates.Model.Models.ClaimModel>()
.Name("grid")
.Groupable()
.Columns(columns =>
{
columns.Bound(p => p.RebateProgramId).Hidden();
columns.Bound(p => p.Status).ClientTemplate("<span class='#=GetClass(Status)#'>#=Status#</span>").Width(100);
columns.Bound(p => p.SellingDealerNo).Width(100);
columns.Bound(p => p.SerialNumberSuffix).ClientTemplate("<span>#=SerialNumberPrefix#-#=SerialNumberSuffix#</span>").Width(150).Title("Serial Number").Filterable(false);
columns.Bound(p => p.SubmittedDate).Format("{0:MM/dd/yyyy}").Width(75);
})
.Pageable()
.Sortable()
.Resizable(resize => resize.Columns(true))
.Selectable()
.Filterable()
.Scrollable(scrollable => scrollable.Virtual(true).Height(630))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.RebateProgramId);
})
.PageSize(65)
.Read(read => read.Action("_GetClaims", "Rebates").Data("grid_Parameters"))
)
.Events(events => events.DataBound("onDataBound")
)
)
and the controller
public ActionResult _GetClaims(int rebateProgramId, [DataSourceRequest] DataSourceRequest request)
{
var email = this.HttpContext.User.Identity.Name;
var list = _manager.GetClaimsByEmail(rebateProgramId, email);
return Json(list.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
and the js that gets invoked to get extra parms
function grid_Parameters() {
var RebateProgramId = $('#RebateProgramId').val();
return { RebateProgramId: RebateProgramId };
}
I my case the Action method was not getting called (example : HierarchyBinding_Employees).
I changed the Name to GetHierarchyDataForEmployees and it worked for me :).
I'm trying to populate a kendo grid within a kendo window in MVC and am unable to find what is wrong. The window is created, and the grid is created within the window... however the DataSource's Read method is never called.
Window:
#{
Html.Kendo().Window()
.Name("DListing")
.Title("Listing")
.Draggable()
.Resizable()
.Width(1000)
.Height(500)
.Visible(true)
.Modal(true)
.Actions(actions => actions
.Maximize()
.Close())
.LoadContentFrom("Dispatch", "Listing", new { Number = #ViewBag.Number })
.Render();}
The Dispatch method in the Listing controller returns back a partial view that contains the grid.
Grid:
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Events(events => events.Change("onChange"))
.HtmlAttributes(new { style = "height:400px;" })
.Columns(columns =>
{
columns.Bound(p => p.Number);
columns.Bound(p => p.DateTime).Format("{0:MM/dd/yyyy hh:mm tt}");
columns.Bound(p => p.Location);
columns.Bound(p => p.Name);
columns.Bound(p => p.Elapsed_Hours);
})
.Groupable()
.Pageable(pageable => pageable
.Numeric(false)
.Input(true)
.PageSizes(new[] { 5, 10, 25 }))
.Sortable()
.Scrollable(scrollable => scrollable
.Virtual(true))
.Filterable()
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(13)
.Sort(sort => { sort.Add(p => p.DateTime).Descending(); })
.Model(model => { model.Id(p => p.Number); })
.Read(read => read.Action("Listing_Read", "Listing", new { Number = #ViewBag.Number })))
)
Listing_Read Method:
public ActionResult Listing_Read([DataSourceRequest] DataSourceRequest request, int Number)
{
return Json(GetListing(branchNumber).ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
Also, it should be noted that I went through and verified that the viewbag data is available for both the window and later on in the grid.
For a little more back info, I initially had the grid on it's own page and it was able to call the read method and populated with the data with no issues. After moving it to populate in the window is when this became a problem.
Monitoring the http requests, the grid never attempts to call the read method (so the request isn't failing). I tried manually refreshing the datasource after the window has loaded thinking that might force the call, but that doesn't call the read method either.
I've been scratching my head on this one for a few hours now trying different things, hoping someone can spot what the problem is :)
Here's what worked for me:
1) View (~/Views/Home/Index.cshtml)
#(Html.Kendo().Window()
.Name("myWindow")
.Title("Title")
.Actions(actions => actions.Pin().Minimize().Maximize().Close())
//.Content(Html.Partial("gridCat").ToHtmlString())
.LoadContentFrom("Load_gridCat", "Home")
)
2) Partial View (~/Views/Shared/gridCat.cshtml)
#(Html.Kendo().Grid<TelerikMvcApp1.Models.Category>()
.Name("CategoriesGrid")
.Columns(columns =>
{
columns.Bound(c => c.CategoryID).Title("Category").Width("10%");
columns.Bound(c => c.CategoryName);
columns.Bound(c => c.Description);
})
.Filterable()
.Pageable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.CategoryID))
.Read(r => r.Action("Categories_Read", "Home"))
)
.HtmlAttributes(new { style = "height:250px" })
)
3) Controller (~/Controllers/HomeController.cs)
public ActionResult Load_gridCat()
{
return PartialView("gridCat");
}
public ActionResult Categories_Read([DataSourceRequest]DataSourceRequest request)
{
using (var ctx = new NWindContext())
{
IQueryable<Category> categories = ctx.Categories;
DataSourceResult result = categories.ToDataSourceResult(request);
return Json(result, JsonRequestBehavior.AllowGet);
}
}
Here is my kendo grid code:
#(Html.Kendo().Grid(Model)
.Name("paymentGrid")
.Columns(columns =>
{
columns.Bound(p => p.AccountName).Title("Account Name");
columns.Bound(p => p.Active).Title("Active").ClientTemplate("<div>#=Active ? 'Active' : 'Inactive'#</div>");
columns.Command(command => command.Custom("DeActivate").Click("deActivatePaymentAccount").Text("DeActivate")).Title("DeActivate");
})
.Filterable()
.Sortable()
.Pageable(paging => paging.Enabled(true).PageSizes(true).Messages(messages => messages.Empty("No accounts found")))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.AccountId);
})
.Update(update => update.Action("EditAccount", "Account"))
)
)
Question:
How do I add a client Template to my Custom Command (Deactivate) so I can toggle the text on the button based on whether the account is active or not?
I think that the best way to change the button text is to do this in the javascript function bound to the click event :
function deActivatePaymentAccount(e) {
var $btn = $(e.target);
$btn.text() === "DeActivate" ? $btn.text("Activate") : $btn.text("DeActivate");
// some other code here
}