This my kendo grid, where I'm using client detail template to display expanded row. Inside that I need file upload.
This is my view page code.
#(Html.Kendo().Grid<Fundraiser.Web.Models.ProductDescriptors>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(item => item.ProductName).Title("Product").Width(225);
columns.Bound(item => item.Quantity).Title("Sale Item Quantity").Width(125);
})
.Pageable()
.Sortable()
.Scrollable(scrolling => scrolling.Height("auto"))
.ClientDetailTemplateId("client-template")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetProductDetails_Read", "Product").Data("additionalInfo"))
)
)
<script id="client-template" type="text/x-kendo-template">
#(Html.Kendo().Upload()
.Name("fileUpload")
.Async(a => a
.Save("UploadFile", "Product")
.Remove("UploadFile", "Product")
.AutoUpload(true)
)
.ToClientTemplate()
)
</script>
I'm unable to call the controller method using this kendo upload.
[HttpPost]
public void UploadFile(HttpPostedFileBase fileUpload)
{
//Upload file in to server
}
Related
I am trying to get image name and path in kendo grid pop up template. but not successful. I am using kendo grid pop up template.
This is my Index View:-
#(Html.Kendo().Grid<TelerikMvcAppCombo.Models.ImageModel>()
.Name("grdImageModel")
.DataSource(datasource => datasource
.Ajax()
.Model(model => model.Id(p => p.IMAGESIZE_ID))
.Create(create => create.Action("Create", "Imagetest"))
.Update(update => update.Action("Editing_Update", "Imagetest"))
.Destroy(delete => delete.Action("Delete", "Imagetest"))
.Read(read => read.Action("GetData", "Imagetest"))
.Model(model =>
{
model.Field(p => p.IMAGESIZE_ID).Editable(true);
model.Id(p => p.IMAGESIZE_ID);
model.Field(p => p.IMAGESIZE_ID).Editable(false);
// model.Field(p => p.isenabled).DefaultValue(true);
})
)
.Columns(columns =>
{
//columns.Bound(c => c.IMAGESIZE_ID).ClientTemplate("<input type='checkbox' value #=IMAGESIZE_ID# />").Width(50);
columns.Bound(c => c.IMAGESIZE_ID).ClientTemplate("<input type='checkbox' value #=IMAGESIZE_ID# />").Title("Image No");
columns.Bound(c => c.IMAGESIZE_NAME).Width(140).Title("Image Name");
columns.Bound(c => c.IMAGESIZE_DESC).ClientTemplate("<img src='" + Url.Content("~/Images/") + "#=IMAGESIZE_NAME#'/>").Title("Image");
columns.Bound(c => c.created_by).Title("Created By");
columns.Bound(c => c.created_date).Title("Created Date");
columns.Bound(c => c.modified_by).Title("Modified By");
columns.Bound(c => c.modified_date).Title("Modified Date");
columns.Command(command =>
{
command.Edit(); command.Destroy();
});
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ImageModel"))
.HtmlAttributes(new { style = "height: 580px;" })
.Scrollable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5)
))
Here is my Editor template
<div>
#(Html.Kendo().Upload()
.Name("files")
.Multiple(false)
.Messages(msg => msg.Select("Browser"))
.Events(e => e
.Select("onSelect").Remove("onRemove"))
)
<div style="height:150px;width:150px;" id="divimage"></div>
</div>
Here is my controller
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create([DataSourceRequest] DataSourceRequest request, IEnumerable<HttpPostedFileBase> files)
{
return View("");
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Editing_Update([DataSourceRequest] DataSourceRequest request, string imagename, string imagepath)
{
return RedirectToAction("index");
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Delete([DataSourceRequest] DataSourceRequest request, ImageModel imagemodel)
{
return View();
}
public JsonResult GetData([DataSourceRequest] DataSourceRequest request)
{
var list = db.imageModels.ToList();
return Json(list.ToDataSourceResult(request));
}
If i used kendo upload control as a single control then i get image path and name easily but if i use kendo upload in grid popup then not get image. any suggestion.
I'm assuming your Upload control is part of a larger form. Try adding .ToClientTemplate() on the Html.Kendo().Upload()
Hopefully I understood your problem correctly.
Please attention to my code.
I passed my object model that there are two items in it but Kendo Grid couldn't show it.
How can I fix this problem?
I've used ASP.NET MVC 5.
EDIT: I investigated it further and I could find a JavaScript error.
Error is:
Object doesn't support property or method 'kendoGrid'
public class ArticleAdminController : Controller
{
private JahanBlogDbContext db = DataContextFactory.GetDataContext();
private readonly IArticleRepository _articleAdminRepository;
public ArticleAdminController(IArticleRepository articleRepository)
{
_articleAdminRepository = articleRepository;
}
public ArticleAdminController()
: this(new ArticleRepository())
{
}
// GET: ArticleAdmin
public async Task<ActionResult> Index([DataSourceRequest] DataSourceRequest request)
{
List<Article> list = await _articleAdminRepository.FindAll().ToListAsync();
return View(list); // list.count = 2
}
public ActionResult Editing_Read([DataSourceRequest] DataSourceRequest request)
{
return Json(_articleAdminRepository.FindAll().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
}
This is my view code. when program is run, just grid show with no data!
#using Kendo.Mvc.UI
#model IEnumerable<Jahan.Blog.Model.Article>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
#(Html.Kendo().Grid<Jahan.Blog.Model.Article>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.UserId);
columns.Bound(p => p.Title).Width(140);
columns.Bound(p => p.Summary).Width(140);
columns.Bound(p => p.Description).Width(100);
columns.Bound(p => p.LikeCounter).Width(20);
columns.Bound(p => p.RateCounter).Width(20);
columns.Bound(p => p.IsActive).Width(20);
columns.Bound(p => p.IsActiveNewComment).Width(20);
columns.Bound(p => p.CreatedDate).Width(20);
columns.Bound(p => p.ModifiedDate).Width(20);
columns.Command(command => command.Destroy()).Width(110);
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Navigatable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Create("Editing_Create", "Grid")
.Read("Editing_Read", "ArticleAdmin")
.Update("Editing_Update", "Grid")
.Destroy("Editing_Destroy", "Grid")
)
)
<script>
function parameterMap(options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
</script>
I found my solution in this page.
If jQuery is included more than once in the page all existing jQuery plugins (including Kendo UI) will be wiped out. Will also occur if the required Kendo JavaScript files are not included.
can we implement multiple child nested grids in Kendo UI Grid using ASP.NET MVC i can implement 1 or 2 Child grids but how to implement 5-6 child grids inside one Parent kendo Grid
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.FirstName).Width(110);
columns.Bound(e => e.LastName).Width(110);
columns.Bound(e => e.Country).Width(110);
columns.Bound(e => e.City).Width(110);
columns.Bound(e => e.Title);
})
.Sortable()
.Pageable()
.Scrollable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(6)
.Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
)
.Events(events => events.DataBound("dataBound"))
)
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid_#=EmployeeID#")
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(70);
columns.Bound(o => o.ShipCountry).Width(110);
columns.Bound(o => o.ShipAddress);
columns.Bound(o => o.ShipName).Width(200);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
</script>
and sample or demo link will be much appreciated. Thanks in advance
Basically you should follow the same approach. The only thing that you should bother is that each Grid should have unique name.
Check the following demo, there are 3 levels of the hierarchy.
I want to add a redirection to another page when I click on the "Edit" button with a Kendo UI grid with ASP .NET MVC.
Here is the base code:
#(Html.Kendo().Grid<ViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(x => x.Id);
columns.Bound(x => x.Name);
columns.Bound(x => x.Field1);
columns.Command(commands =>
{
commands.Edit();
commands.Destroy();
})
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(x => x.Id))
.Read(read => read.Action("Read", "Home"))
.Update(update => update.Action("Edit", "Home"))
.Destroy(destroy => destroy.Action("Destroy", "Home"))
)
)
I tried to use the HTML attributes but it doesn't work:
commands.Edit().HtmlAttributes(new { #class = "edit" });
Then, I tried to add a custom edit (via commands.Custom(...) but unfortunately it is just for .Server() data binding.
I can do it with a client template but I really would like to use the default button proposed by Kendo UI:
columns.Template(#<text></text>)
.ClientTemplate(
"<a href='" + Url.Action("Edit", "Home") + "/#=Id#'>Edit</a>");
Do you have any other idea?
Thanks in advance.
You should be able to use custom commands, even with an Ajax datasource. I just tested this locally with the following code to make sure it will still work.
Code from view:
<script type="text/javascript">
function redirectTest(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
alert(dataItem.Name);
}
</script>
#(Html.Kendo().Grid<ViewModel>()
.Name("testing")
.Columns(columns =>
{
columns.Bound(x => x.Id);
columns.Bound(x => x.Name);
columns.Command(command => command.Custom("Edit").Click("redirectTest"));
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ReadAction", "ControllerName"))
)
)
Source: Custom command demo
If you want to redirect to another page with accepts a parameter then use this method.
#(Html.Kendo().Grid<AGridViewModel>()
.Name("Grid")
.Columns(columns => {
columns.Bound(p => p.Id)
columns.Bound(p => p.Name);
columns.Command(command => command.Custom("View Details").Click("showDetails"));
})
<script type="text/javascript">
function showDetails(e) {
e.preventDefault();
var d = this.dataItem($(e.currentTarget).closest("tr"));
//alert("Selected item ID is:" + d.Id);
window.location.href = "#Url.Action("action", "controller")?id=" + d.Id;
}
</script>
You could add a custom ClientTemplate on the Name column, instead, and remove your columns.Command button altogether, where they simply click the name to edit it, and you pass in your object's ID to the new page like this:
columns.Bound(x => x.Name).ClientTemplate("<a href=/SomeViewFolder/Index?id=${id} target=_blank>${Name}</a>");
I have created a kendo hierarchy grid in mvc 4. On execution of the grid, the hierarchy grid is expand automatically for the first row, but when i expand the another row then the new hierarchy grid comes up empty while the data of the earlier hierarchy grid (which comes up by default) was changed.
1. How can i make it to show data in the hierarchy grid for the
particular row only not in the default opened grid?
2. Also how can i prevent the default expansion of the row.
View:
#(Html.Kendo().Grid<KendoUI.Models.EmployeeViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.name).Title("Name");
columns.Bound(p => p.gender).Title("Gender");
columns.Bound(p => p.designation).Title("Designation").Width("300px");
columns.Bound(p => p.department).Title("Department").Width("300px");
})
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:430px;" })
.Pageable()
.Navigatable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource // Configure the grid data source
.Ajax()
.Model(model =>
{
model.Id(x => x.id);
})
.Read(read => read.Action("Employee_Read", "Home")) // Set the action method which will return the data in JSON format
)
.Events(events => events.DataBound("dataBound"))
)
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().Grid<KendoUI.Models.EmployeeViewModel>()
.Name("grid_#id#")
.Columns(columns =>
{
columns.Bound(p => p.id).Width(70);
columns.Bound(p => p.name).Width(110);
columns.Bound(p => p.gender).Width(110);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("Department_Read", "Home", new { employeeID = "#=id#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
</script>
Controller:
public ActionResult Employee_Read([DataSourceRequest]DataSourceRequest request)
{
//code for grid
return Json(result, JsonRequestBehavior.AllowGet);
}
public ActionResult Department_Read(Int32 employeeID, [DataSourceRequest]DataSourceRequest request)
{
// Code for hierarchy grid detail
return Json(result, JsonRequestBehavior.AllowGet);
}
You made a mistake in your detail Template
you should use .Name("grid_#=id#") instead of .Name("grid_#id#") the '=' matters.Causing all of your hierarchy-grids to share the same id so only the first grid is refreshed everytime.
your databound() function is causing the expansion of the first by default (and everytime the grid is bound to it datasource.)