CODEWITHSUNDEEP
jqueryasp.net-mvc-4jqgrid
Mike
Mike

Reputation: 346

Displaying Row Contents of JQGrid in MVC4

I am currently using a JQGrid in an ASP MVC4 Razorview page. The structure of my page is

<body onload="TimeStamp();">
    <h2>Events as of <div id="timestampDiv"></div></h2>

    <div>
        @Html.Trirand().JQGrid(Model.EventsGrid, "JQGrid1")
    </div>
</body>

What I would like to do is display the individual elements of a record on the page when a row is clicked in the JQGrid. Think of the Windows Event Viewer, where when you click an event, the rest of the form fills with the specific event information. Ideally, the grid and the record information would be on the same page.

My question: I am very new to JQuery and JQGrid. How can I achieve this? Is it possible the way I am thinking about it or is there another, better way to get something similar to what I want?

Thank you.

UPDATE: I have tried:

    <script type="text/javascript">
        $(document).ready(function () {
            $("#JQGrid1").jqGrid({
                onSelectRow: function (id) {
                    // using id here to get details from server and display them
                    jQuery('#appDiv').text("test");
                }
            });
        });
    </script>

This causes my grid to disappear from the page.

UPDATE2: It seems to me (tell me if I am wrong) that doing the above code rebuilds a jqgrid (like a constructor) and would need more code to work. Since my JQGrid is already created and passed into the view, I must need to setup the onselectrow event handler in the controller. Any ideas?

Upvotes: 0

Views: 453

Answers (1)

U.P
U.P

Reputation: 7442

Yes it is possible. You'll have to hook row click event and use it to populate the form. More specifically, you'll have to hook onSelectRow event of jqGrid

For example: your grid has the ID JQGrid1

We'll use this ID in JavaScript code to hook onSelectRow event like the following:

$("#JQGrid1").jqGrid({
   onSelectRow: function(id){ 
      // using id here to get details from server and display them
   }
});

Update:

Since you have already created the grid using server side wrapper, the above code will try to reinitialize the grid. Try the following code and see if it helps.

$('#JQGrid1').jqGrid('setGridParam', 
 { 
    onSelectRow: function(id){ alert(id); } 
 });

Upvotes: 1

Related Questions