I have a Kendo Grid with Popup editing. However, I need to have my own PartialView displayed for editing.
Is there any way to tell the grid what PartialView to display for editing?
If that can't be done, is there a way to wire up the grid so it calls a JavaScript function which would then pop up a custom window that I will populate with a partial view? It would have to be able to pass the ID of Row that was selected so that the view would edit the correct row. I know how to create the Window, I just don't know how to call it from the grid and get the Id of the row.
This is the grid:
#(Html.Kendo().Grid<OrderSummaryLineItem>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.ReportType).Width(75);
columns.Bound(c => c.ReferenceId).Width(75);
columns.Bound(c => c.BorrowerName).Width(75);
columns.Bound(c => c.PropertyAddress).Width(100);
columns.Bound(c => c.EstimatedCompletionDate).Width(100);
columns.Bound(c => c.ReportPrice).Width(75);
columns.Bound(c => c.ExpediteFee).Width(75);
columns.Bound(c => c.Discount).Width(75);
columns.Bound(c => c.TotalPrice).Width(75);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
})
.HtmlAttributes(new { style = "height: 600px;" })
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model=> model.Id(c=> c.ReferenceId))
.Read(read => read.Action("Orders_Read", "OrderSummary"))
.Destroy(update => update.Action("EditingPopup_Destroy", "OrderSummary"))
)
)
Update:
I have this partially resolved: I added a custom Command like this:
columns.Command(command => { command.Custom("ViewDetails").Click("showDetails");
This wires up the "showDetails" JavaScript function. But I am still not able to pass the current row Id.
This is what I came up with:
columns.Template(#<text></text>).ClientTemplate("<a href='"+Url.Action("EditOrderLineItem","OrderSummary")+"/#=Id#'>Edit</a>");
Related
I need help writing a script/Function for my Telerik UI for asp.net MVC program. I have a delete button in my tool bar and I think my script is correct for it deleting. Now, I'm told that my check boxes haft to have a script also to be deleted when checked. As a C# coder, I'm not entirely knowledgeable about Json coding. So, any help would be appreciated! Here is my code below.
#(Html.Kendo().Grid<MVCSQLDatabase.Models>()
.Name("Grid")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Batch(true)
.Model(model => model.Id(p => p.Proposal_Uid))
.Read(read => read.Action("Proposals_Read", "Grid"))
.Create(create => create.Action("Proposals_Create", "Grid"))
.Update(update => update.Action("Proposals_Update", "Grid"))
.Destroy(destroy => destroy.Action("Proposals_Destroy", "Grid"))
)
.Resizable(resize => resize.Columns(true))
.Columns(columns =>
{
columns.Select().Width(100); //<-- my check boxes code.
columns.Bound(c => c.Prime).Width(215);
columns.Bound(c => c.Proposal).Width(200);
columns.Bound(c => c.C).Width(190);
columns.Bound(c => c.Cl).Width(185);
columns.Bound(c => c.T).Width(290);
columns.Bound(c => c.M).Width(220);
columns.Bound(c => c.S).Format("{0: dd/MM/yyyy}").Width(170);
columns.Bound(c => c.E).Format("{0: dd/MM/yyyy}").Width(170);
columns.Bound(c => c.P).Width(235);
columns.Bound(c => c.Con).Width(215);
columns.Command(command => { command.Destroy(); }).Width(180);// <--- My delete button in my column
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
toolbar.Excel();
toolbar.Custom().Text("Delete").Name("batchDestroy").IconClass("k-icon k-i-close"); //<-- my custom made delete button in my toolbar.
})
.ColumnMenu()
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Selectable(selectable =>
{
selectable.Mode(GridSelectionMode.Multiple);
selectable.Type(GridSelectionType.Row);
})
.PersistSelection()
.Filterable(filterable => filterable.Mode(GridFilterMode.Row))
.Scrollable()
.HtmlAttributes(new { style = "height:835px;" })
)
<script>
$("#grid").on("click", "batchDestroy", function() {
var $tr = $(this).closest("tr"),
grid = $("#grid").data("kendoGrid"),
dataItem = grid.dataItem($tr);
grid.dataSource.remove(dataItem);
});
</script>
Here is the code for anybody else stuck in this situation. The thing that got me the most, was the .done function to end the button click function and then saving the grid AFTER the delete was made. Hopefully, this helps others!
<script>
$(document).ready(function ()
{
$(".k-grid-Destroy").on("click", function (e)
{
e.preventDefault();
var grid = $("#Grid").data("kendoGrid");
var selectedRows = grid.select();
kendo.confirm(kendo.format("Are you sure you wish to delete {0} records?", selectedRows.length))
.done(function ()
{
$.each(selectedRows, function (i, row)
{
grid.removeRow(row);
})
grid.saveChanges();
});
});
});
</script>
Can anyone please provide me the similar solution using kendo MVC as in the below link?
Creating 2 child kendo grids at the same level
Thanks!
Use the client template features. So on your grid:
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.FirstName).Width(130);
columns.Bound(e => e.LastName).Width(130);
columns.Bound(e => e.Country).Width(130);
columns.Bound(e => e.City).Width(110);
columns.Bound(e => e.Title);
})
.Sortable()
.Pageable()
.Scrollable()
>> refer to the template
.ClientDetailTemplateId("template")
... etc
Then make the template with the 2 grids:
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid_#=EmployeeID#") // template expression, to be evaluated in the master context
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(110);
columns.Bound(o => o.ShipCountry).Width(150);
columns.Bound(o => o.ShipAddress).ClientTemplate("\\#= ShipAddress \\#"); // escaped template expression, to be evaluated in the child/detail context
columns.Bound(o => o.ShipName).Width(300);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid2_#=EmployeeID#") // template expression, to be evaluated in the master context
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(110);
columns.Bound(o => o.ShipCountry).Width(150);
columns.Bound(o => o.ShipAddress).ClientTemplate("\\#= ShipAddress \\#"); // escaped template expression, to be evaluated in the child/detail context
columns.Bound(o => o.ShipName).Width(300);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
The .ToClientTemplate() is important. Also need to have different grid names for each row. You can mix in other HTML for organization if desired. See here.
I am trying to display a dropdownlist in the grid but the dropdown does not appear when it is clicked. Instead of seeing the "text" of the dropdown that corresponds to the numeric "value" (an enumeration) I am only seeing a "textbox" where the dropdownlist should appear. Another odd behavior happens when I randomly click on the grid the dropdown will appear intermittently.
It Will Work for you
#(Html.Kendo().Grid()
.Name("Grid")
.Columns(
column =>
{
column.Bound(e => e.LanguageName).Title("Language Name");
column.Bound(e => e.CountryName).Title("Language Name");
column.Bound(e => e.CountryID).ClientTemplate(
#Html.DropDownListFor(model => model.CountryID, new SelectList(ViewBag.Country,"text","value"), "--- Select ---", new { #class = "form-control dropdownErp" }).ToString()).Title("Country Name");
}
)
.Editable(editable => editable.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(true)
.Model(model =>
{
model.Id(p => p.ID);
})
.Read(read => read.Action("Getdata", "Language").Type(HttpVerbs.Get))
)
)
I have two Kendo UI grids with drop down editor template columns in an ASP.NET MVC razor page.Both grids are having one row always and working fine with edit and update.
But when the user clicks one first grid edit and trying to click the second grid edit then the editor templates are not working for the second grid. it is showing the grid values within a textbox. Both grids are sharing same editor templates for the columns. No errors in the browser console.
I tried moving these grids in partial views and try to create different editor templates for each grid but always the result is the same.
The funny thing is that if you edit in the second grid first and then click the first grid edit it doesn't create any problem and shows all the dropdown values with editor templates. (first and second grid means from top to bottom)
both grids have different models but share the same class for the model.
I am giving the sample code here ..please help me ..already spent lot of time on this.
#model ProjectName.ViewModel.EmployeesViewModel
#(Html.Kendo().Grid(Model.CasualEmployees)
.Name("GridCasualEmployees")
.Columns(columns =>
{
columns.Bound(i => i.Frequency).Title("Frequency").EditorTemplateName("Frequency").ClientTemplate("#:Frequency#").HtmlAttributes(new { #style = "text-align:Left; " }).Width(75);
columns.Bound(i => i.Quarter).Title("Quarter").EditorTemplateName("Quarter").ClientTemplate("#= kendo.toString(Quarter,\"MMM yyyy\") #").HtmlAttributes(new { #style = "text-align:left; " }).Width(75);
columns.Bound(i => i.EmpId).Hidden();
columns.Command(command => command.Edit()).Width(175);
})
.ToolBar(toolbar => toolbar.Create())
.Editable((editable => editable.Mode(GridEditMode.InLine)))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple))
.Sortable(sortable => sortable
.AllowUnsort(true)
.SortMode(GridSortMode.MultipleColumn))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model =>
{
model.Id(s => s.EmpId);
model.Field(s => s.Frequency);
model.Field(s => s.Quarter);
})
.Create(update => update.Action("CreateEmployee", "Employee"))
.Read(read => read.Action("ReadEmployee", "Employee"))
.Update(update => update.Action("UpdateEmployee", "Employee"))
)
)
#(Html.Kendo().Grid(Model.PermanentEmployees)
.Name("GridPermanentEmployees")
.Columns(columns =>
{
columns.Bound(i => i.Frequency).Title("Frequency").EditorTemplateName("Frequency").ClientTemplate("#:Frequency#").HtmlAttributes(new { #style = "text-align:Left; " }).Width(75);
columns.Bound(i => i.Quarter).Title("Quarter").EditorTemplateName("Quarter").ClientTemplate("#= kendo.toString(Quarter,\"MMM yyyy\") #").HtmlAttributes(new { #style = "text-align:left; " }).Width(75);
columns.Bound(i => i.EmpId).Hidden();
columns.Command(command => command.Edit()).Width(175);
})
.ToolBar(toolbar => toolbar.Create())
.Editable((editable => editable.Mode(GridEditMode.InLine)))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple))
.Sortable(sortable => sortable
.AllowUnsort(true)
.SortMode(GridSortMode.MultipleColumn))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model =>
{
model.Id(s => s.EmpId);
model.Field(s => s.Frequency);
model.Field(s => s.Quarter);
})
.Create(update => update.Action("CreateEmployee", "Employee"))
.Read(read => read.Action("ReadEmployee", "Employee"))
.Update(update => update.Action("UpdateEmployee", "Employee"))
)
)
#(Html.Kendo().DropDownListFor(i => i)
.Name("Quarter")
.DataValueField("Id")
.DataTextField("Name")
.BindTo((IEnumerable)ViewBag.Quarters)
.OptionLabel("Select Quarter")
)
#(Html.Kendo().DropDownListFor(i => i)
.Name("Frequency")
.DataValueField("Id")
.DataTextField("Name")
.BindTo((IEnumerable)ViewBag.Frequencies)
.OptionLabel("Select Frequency")
)
public class EmployeesViewModel
{
public List<Employee> CasualEmployees{ get; set; }
public List<Employee> PermanentEmployees{ get; set; }
}
Thanks in advance,
I have a pretty basic grid using the razor wrapper and my anticipated 3 rows are not showing up.
#(Html.Kendo().Grid<ManageUserViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.UserName);
columns.Bound(c => c.FirstName);
columns.Bound(c => c.LastName);
columns.Bound(c => c.Email);
columns.Bound(c => c.LastNameFirstLetter).Hidden(true);
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("list", "User"))
)
)
Here is the json being returned from /User/list which I ran through jsonLint to make sure it was valid.
[{"UserName":"dfeinberg","FirstName":null,"LastName":null,"Email":"daniel.feinberg#rcsg.com","Password":null,"Roles":[],"LastNameFirstLetter":""},{"UserName":"jmarley","FirstName":"Jacob","LastName":"Marley","Email":"ebuntom#gmail.com","Password":null,"Roles":[{"Id":"9a0af7ad-e38f-4300-a49e-1051dc18c8e4","Name":"Administrator","Checked":false}],"LastNameFirstLetter":"M"},{"UserName":"tcoakley","FirstName":"Tom","LastName":"Coakley","Email":"tom.coakley#redcedarsolutionsgroup.com","Password":null,"Roles":[],"LastNameFirstLetter":"C"}]
It is my day for dumb questions. My issue was not understanding the correct way to return the datasource from the controller. Here is my corrected controller method.
public ActionResult List([DataSourceRequest]DataSourceRequest request)
{
List<AspNetUser> users = SdContext.AspNetUser.ToList();
var models = UserAssembler.GetManageUserViewModels(users);
return Json(models.ToDataSourceResult(request));
}