Create a link in Grid to open up window with data

9 posts, 0 answers
  1. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 10 Oct Link to this post

    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!

  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 12 Oct Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 12 Oct Link to this post

    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?
  5. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 13 Oct Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 17 Oct in reply to Ianko Link to this post

    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?

  7. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 17 Oct in reply to Andrew Link to this post

    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('#');

  8. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 17 Oct in reply to Andrew Link to this post

    I submitted a support ticket; thank you for your help
  9. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 18 Oct Link to this post

    Figured it out and the window popup works perfectly! Thank you!
  10. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 19 Oct Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready