I am currently trialing the products to see if I can get them to do what I need for an app under development.
In my app I have a grid that lists all of a customers active products.
I want to be able to click on an item in the grid (link or button) to launch a modal dialog where I can display in depth info regarding that item - the popup itself would need to have tabstrip and perhaps one or two grids on itself.
So I obviously need to design a view to display all this info which is fine, and I assume the Window component is the most suitable to effect the popup?
I can't seem to find a concrete example of how to call the window from the initial grid, pass the parameter of the selected item, and then load the view within the window.
As I say I am new to all this so feeling my way a little and so any guidance is greatly appreciated.
Thanks
1 Answer, 1 is accepted
Hello Chris,
Indeed, you can achieve the desired result as follows:
- Define a custom column command within the Grid's Columns() configuration. A similar example is demonstrated in the Grid Custom Command demo.
@(Html.Kendo().Grid<Product>()
.Name("grid")
.Columns(columns => {
...
columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));
})
...
)
<script>
function showDetails(e) { // The button Click event handler
}
</script>- Define a hidden Window component in the View with the Grid:
@(Html.Kendo().Grid<Product>()
.Name("grid")
...
)
@(Html.Kendo().Window()
.Name("Details")
.Title("Product Details")
.Visible(false)
.Modal(true)
.Draggable(true)
.Width(800)
)- Within the column command's click event handler, get a reference to the hidden Window, and call its refresh() method that will make an AJAX request to the server and load the respective View with the details.
<script>
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr")); // access the data item of the respective Grid row
var window = $("#Details").data("kendoWindow"); // get a reference to the Window
window.refresh({ // request the View and pass the "Id" property of the data item
url: '/Home/GetProductDetails?Id=' + dataItem.Id
});
window.open();
}
</script>
//HomeController.cs
public IActionResult GetProductDetails(int Id)
{
var gridRecord = gridDataCollection.Where(x => x.Id == Id).FirstOrDefault(); // get the Model instance
return PartialView("_Details", record); pass it to the Partial View
}
//_Details.cshtml
@model Product
.... // View contentLet me know if this approach meets your requirements.
Regards,
Mihaela
Progress Telerik