Create a link in Grid to open up window with data

[Andrew]

Our grid has a columns to retrieve more details based off the "npinumber". This wouldn't be on edit or any other actions. I just want to open up a window. I don't even know where to begin with this, so if anyone can help me or guide me to a solution, that would be awesome!

Thank you!

[Ianko]

Hello Andrew,

This demo here shows the same situation: http://demos.telerik.com/aspnet-mvc/grid/custom-command. 

If it happens that it does not solve your case, please provide more details about your situation to properly defined the difficulties you experience.

Regards,
Ianko
Telerik by Progress

[Andrew]

Thank you, this works to a degree... I want to show details that aren't in the same model. For the grid, I have it selecting just the columns needed (as the details table contains ~300 columns) and has a super huge dataset. So is there a way I can pass the id, and then pull up a partial view or something passing the id and retrieving all the details?

[Ianko]

Hello Andrew,

 

What you should do is to have the partial view loaded through an action that fetches the model need. Next, you need to adjust the logic that opens the Kendo Window by using the refresh method in order to point to the action's url and pass the data as id.

 

The code samples next use the logic and the model from the demo, but this should be demonstrative enough I hope.

Grid View:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
    .Name("Grid")
    .Columns(columns => {
        columns.Bound(e => e.FirstName).Width(140);
        columns.Bound(e => e.LastName).Width(140);
        columns.Bound(e => e.Title);
        columns.Command(command => command.Custom("ViewDetails").Click("showDetails")).Width(180);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("CustomCommand_Read", "Grid"))
     )
)

@(Html.Kendo().Window().Name("Details")
    .Title("Customer Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(300)
)

<script type="text/javascript">
    function showDetails(e) {
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#Details").data("kendoWindow");
        wnd.refresh({
            // Url to the action fetching the partial view
            url: "/Grid/GridDetails",
            // The id passed to the action so that model can be found
            data: { id: dataItem.EmployeeID }
        });
        wnd.center().open();
    }
</script>

 

Action method for the partial view: 

public ActionResult GridDetails(string id)
{
    var model = GetEmployees()
        .Where(x => x.EmployeeID == int.Parse(id))
        .FirstOrDefault();

    return PartialView("GridDetails", model);
}

 

GridDetails partial:

@model Kendo.Mvc.Examples.Models.EmployeeViewModel


<div id="details-container">
    <h2>@Model.FirstName @Model.LastName</h2>
    <em>@Model.Title</em>
    <dl>
        <dt>City: @Model.City</dt>
        <dt>Address: @Model.Address</dt>
    </dl>
</div>

 

And here you are a screencast of the results from the code above: http://screencast.com/t/HwanNAvk. 

 

Regards,

Ianko

Telerik by Progress

[Andrew]

Thank you! This seems like it's what I'm looking for, but for some reason when I search the grid I'm suddenly receiving a javascript error: TypeError: Cannot read property 'replace' of undefined (in jQuery 3.1.1)

Should I submit a support ticket?

[Andrew]

I downgraded my jquery to 1.12.3 per http://docs.telerik.com/kendo-ui/intro/installation/prerequisites. But now I receive an error on load:

Same error, except now it's coming from kendo.all.js L186:

parts = template.replace(escapedCurlyRegExp, '__CURLY__').replace(encodeRegExp, '#=$kendoHtmlEncode($1)#').replace(curlyRegExp, '}').replace(escapedSharpRegExp, '__SHARP__').split('#');

[Andrew]

I submitted a support ticket; thank you for your help

[Andrew]

Figured it out and the window popup works perfectly! Thank you!

[Ianko]

Hello Andrew,

I am glad to see that you have been able to handle all the difficulties you had. 

Good luck with your project. And do not hesitate to post again when further questions appear. 

Regards,
Ianko
Telerik by Progress