locked
Expand / Display detailed view from Grouped Data RRS feed

  • Question

  • User927770920 posted

    Hi forum,

    I REALLY need some assistance with the last part of my current project.

    I have a Webgrid (Razor/Web Pages) which is displaying grouped data.

    I have assigned a rowId to each row that is output and placed an 'Details' image in column one with the value of item.rowId.

    Obviously rowId is merely the numbering of the displayed rows and not an ID from the database due to my SQL Group By clause.

    Output example:

    Details |         Vehicle       |                 Vehicle Description               |   Total    |

    IMG (1) |     Ford Transit     |         290 SWB L1H1 2.2TDCi 100ps           |        4     |

    IMG (2) | Vauxhall Vivaro    |  LWB Standard roof 2.0CDTi 2.9t 115ps     |       36     |

    etc..

    What I am trying to do is allow the user to click on Details link and either Redirect to another page displaying the detailed view or show a hidden grid (effectively appearing below the row) or any other method that lets them view the detail.

    The Vehicle Description will always be unique so I can create a SQL statement on the detail page based on that value, but I just can't seem to acquire the value for a given row?

    I have tried numerous methods including jQuery / an action on my form to a detail page etc, but just cannot get it working.

    I think using a jQgrid would probably give me what I want but I really don't have time to redesign the whole thing.

    Can anyone point me in the right direction?

    Many thanks in advance

    Mark

    Thursday, July 24, 2014 8:29 PM

Answers

  • User1713851783 posted

    As in my example, the

    var model = Request.QueryString["model"];

    statement reads the content of the 'model' querystring and then you can use it in your query

    var selectedData = db.Query(query, model);

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 25, 2014 10:49 AM

All replies

  • User379720387 posted

    I am doing something similar where my webgrid rows are clickable. Once clicked a modal (bootstrap dialog) opens up and a details page loads.

    Here is the relevant code for the page with the webgrid:

    <div id="tripdialog"> </div> 
    </body>
    </html>

    @section script{
    <script type="text/javascript">
    $(function ()
    { $('tbody tr').live('hover', function ()
    { $(this).toggleClass('clickable');
    }).live('click', function ()
    { $("#tripdialog").load('/Members/TripDetailsDialog/' + $(this).find("td:first").text()).dialog({
    autoOpen: true,
    height: 675,
    width: 725,
    hide: "explode" } ); }); });
    </script>

    Then on the details page I have the following:

    <div id="tripdialog">
    <div id="tabs">

    All the html is within the dialog. In my case I added a few tabs.

    I have since converted to bootstrap, but this should all still work as designed. Note that it passed the value of the first column that was clicked on.

    Thursday, July 24, 2014 10:02 PM
  • User927770920 posted

    Many thanks wavemaster,

    Just got into work so am getting straight to it.

    Am I right in thinking if I wanted to pass the 3rd column in order to set up my sql for the detail page I can use the following instead:

    { $("#tripdialog").load('/Members/TripDetailsDialog/' + $(this).find("td:first-child").next().attr("VehicleDescription")({ 

    Thanks

    Mark

    Friday, July 25, 2014 3:22 AM
  • User927770920 posted

    I have put an action="/Page2" on my form and have the following jQuery which I have adapted from your helpful response:

                <script>
                    $(function () 
                        { $('tbody tr').live('hover', function () 
                        { $(this).toggleClass('clickable'); 
                        }).live('click', function () {
                        $('#descriptionHidden').val($(this).find('td:nth-child(2)').text());
                            });
                         })
                </script>

    As you can see I have a hidden input for testing which is passed to a 'description' variable which I have in a Response.Write(description) if(IsPost).

    However, Response.Write is not displaying anything?

    Can you see anything I'm missing?

    Thanks

    Mark 

    Friday, July 25, 2014 5:41 AM
  • User927770920 posted

    Ok, so I've rediscovered mikesdotnetting's article here regarding making a webgrid row clickable.

    It is working as far as taking me to the referenced page but I am receiving the following error:

    The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

    http://myserver/BranchFiles/Manchester/detail/ 290 SWB L1H1 2.2TDCi 100ps

    I have replaced the ID (tr:first) from Mike's article with (tr:nth-child(3)) in order to incorporate that into my SQL Statement on the detail page.

    I notice in the URL above there is a space between 'detail/' and '290 SWB' etc... which I don't understand as there is no leading space in the string in the 3rd column of my grid.

    Not sure if that space is causing my issue?

    Anybody come across this? 

    If I can overcome this I think I've finally reached the end of my 2 month Journey! :)

    Thanks

    Mark 

    Friday, July 25, 2014 6:41 AM
  • User927770920 posted

    UPDATE:

    Trying yet another method to get this working.

    My code is as below:

    Overview.cshtml

       @{
        var db = Database.Open("orderProgressDev6");
        var query = "SELECT ROW_NUMBER() OVER (order by vehicle) AS 'rowId',vehicle, vehicleDescription, count(vehicleID) AS 'Total' FROM vehicles WHERE (branchRequirement = 'Manchester') AND (deliveryBranch = 'Manchester' OR deliveryBranch IS NULL) AND (dateDeliveredToBranch > GETDATE() OR dateDeliveredToBranch IS NULL) AND (vgc LIKE 'B_') GROUP BY vehicle,vehicleDescription";
        var data = db.Query(query);
        var grid = new WebGrid(data, ajaxUpdateContainerId: "container", rowsPerPage:300);
    
        }
    
    <!DOCTYPE html>
    <html lang="en">
    
    
        <head>
            <meta charset="utf-8" />
            <title>1 Tonne Van Order Overview</title>
            <link rel="stylesheet" type="text/css" href="/BranchFiles/vehicleOverview.css"/>
            <link rel="shortcut icon" href="/images/burnt-tree.ico">
            <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
            <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js" type="text/javascript"></script>
            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
            <script type="text/javascript">
                <!--
                var left = (screen.width  - 1024)/2;
                var top = (screen.height - 600)/2;
                var params = 'width=1024, height=600, scrollbars=yes';
                params += ', top='+top+', left='+left;
                // -->
            </script>
        </head>
    
    
        <body>
    
    
            <div id="vehicle_overview_header"></div>
    
            <a onclick="window.close()" style="cursor: pointer; color: #000; font-size: 1.5em;">Close</a>
    
                <div id="container">
                
                <script>
                    $(function(){
                    $('tbody tr').live('hover', function(){
                    $(this).toggleClass('clickable');
                    }).live('click', function(){
                    $('#vehHidden').val($(this).find('td:nth-child(2)').text());
                    $('#descHidden').val($(this).find('td:nth-child(3)').text());  
            }); 
        });
                </script>
    
            <input type="text" name="vehHidden" id="vehHidden" style="display: none;" />
            <input type="text" name="descHidden" id="descHidden" style="display: none;" />
            <form method="post" action="detail">
    
                @grid.GetHtml(
                    tableStyle: "overview_table",
                    headerStyle: "header",
                    alternatingRowStyle: "alternate",
                    columns: grid.Columns(
                        grid.Column("Details",
                                    style:"rowId",
                                    format: @<text>
                                            <input type="image" src="/images/maintIcons/edit.png" style="cursor: pointer;" id="@item.rowId" class="Details" value="Details" title="Details" />
                                            </text>),
                        grid.Column("Vehicle",
                                    style:"col2",
                                    format: @<text>
                                            <span id="Vehicle">@item.vehicle</span>
                                            </text>),
                        grid.Column("Description",
                                    style:"col3",
                                    format: @<text>
                                            <span id="VehicleDescription">@item.vehicleDescription</span>
                                            </text>),
                        grid.Column("Total", "Total",
                                    style:"col5")
                        )
                        )
    
                </form>
            </div>
        </body>
    </html>
    

    detail.cshtml

    @{
        
        var db = Database.Open("orderProgressDev6");
        var veh = Request["vehHidden"];
        var desc = Request["descHidden"];
        var query = "SELECT vehicle, vehicleDescription, colour, dateRequiredToBranch, scheduledDeliveryDate, customer, saleType FROM vehicles WHERE (branchRequirement = 'Manchester') AND (deliveryBranch = 'Manchester' OR deliveryBranch IS NULL) AND (dateDeliveredToBranch > GETDATE() OR dateDeliveredToBranch IS NULL) AND (vehicle = '"+ veh + "' AND vehicleDescription = '" + desc + "')";
        var selectedData = db.Query(query);
        Response.Write(veh);
        Response.Write(desc);
    }
    <!DOCTYPE html>
    <html lang="en">
    
    
        <head>
            <title>Order Details</title>
        </head>
    
        <body>
            <a onclick="history.go(-1);return true;" style="cursor: pointer; color: #000; font-size: 1.5em;">Back</a>
    
        </body>
    </html>

     

    My Response.Write() is not outputting anything on the detail page?

    I have added a line in the jQuery for testing and changed the background color to red on click so I know it is targeting the correct nth-child?

    Please people any ideas?

    Many thanks

    Mark

    Friday, July 25, 2014 7:48 AM
  • User1713851783 posted

    I would suggest to you a simpler solution, without jquery and Ajax.

    Add a link to any webgrid row with a querystring that transfers the vehicleDescription to your Details page. Something like:

    Overview.cshtml

    @{
        var db = Database.Open("orderProgressDev6");
        var query = @"SELECT ROW_NUMBER() OVER (order by vehicle) AS 'rowId',vehicle, vehicleDescription, 
            count(vehicleID) AS 'Total' FROM vehicles WHERE (branchRequirement = 'Manchester') AND 
            (deliveryBranch = 'Manchester' OR deliveryBranch IS NULL) AND (dateDeliveredToBranch > GETDATE() 
            OR dateDeliveredToBranch IS NULL) AND (vgc LIKE 'B_') GROUP BY vehicle,vehicleDescription";
        var data = db.Query(query);
        var grid = new WebGrid(data, rowsPerPage:300);
    }
    
    <!DOCTYPE html>
    <html lang="en">
    
    
        <head>
            <meta charset="utf-8" />
            <title>1 Tonne Van Order Overview</title>
        </head>
    
        <body>
            <div id="vehicle_overview_header"></div>
                @grid.GetHtml(
                    columns: grid.Columns(
                        grid.Column("Details",
                                    format: @<text>
                                            <input type="image" src="/images/maintIcons/edit.png" style="cursor: pointer;" id="@item.rowId" class="Details" value="Details" title="Details" />
                                            </text>),
                        grid.Column("Vehicle",
                                    format: @<text>
                                            <span id="Vehicle">@item.vehicle</span>
                                            </text>),
                        grid.Column("Description",
                                    format: @<text>
                                            <span id="VehicleDescription">@item.vehicleDescription</span>
                                            </text>),
                        grid.Column("Total", "Total",),
                        grid.Column(format: @<text><a href='~/detail?model=@item.vehicleDescription'>Details</a></text>)
                        )
                        )
            </div>
        </body>
    </html>

    detail.cshtml

    @{
        var model = Request.QueryString["model"];
        var db = Database.Open("orderProgressDev6");
        var query = @"SELECT vehicle, vehicleDescription, colour, dateRequiredToBranch, scheduledDeliveryDate, customer, 
            saleType FROM vehicles WHERE (branchRequirement = 'Manchester') AND (deliveryBranch = 'Manchester' OR
            deliveryBranch IS NULL) AND (dateDeliveredToBranch > GETDATE() OR dateDeliveredToBranch IS NULL) 
            AND vehicleDescription = @0)";
        var selectedData = db.Query(query, model);
        var grid = new WebGrid(selectedData);
    }
    <!DOCTYPE html>
    <html lang="en">
    
    
        <head>
            <title>Order Details</title>
        </head>
    
        <body>
             <div>
               @grid.GetHtml()
        </body>
    </html>

    When all this works as expected, you will improve its look.

    Friday, July 25, 2014 9:38 AM
  • User927770920 posted

    Hi,

    Many thanks for your help.

    As with my attempt at passing the value using UrlData I am receiving the following error:

    HTTP Error 404.0 - Not Found

    The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

    http://myserver/detail?model=290%20SWB%20L1H1%202.2TDCi%20100ps

    ?

    Friday, July 25, 2014 10:02 AM
  • User1713851783 posted

    As with my attempt at passing the value using UrlData I am receiving the following error:

    HTTP Error 404.0 - Not Found

    The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

    If you try without the querystring using this column definition

    grid.Column(format: @<text><a href='~/detail'>Details</a></text>)
    

    you are redirected to the detail.cshtml page?

    Friday, July 25, 2014 10:30 AM
  • User927770920 posted

    APOLOGIES!

    I overlooked the leading ~/ in the link.

    Working perfectly.

    Many thanks indeed!

    Friday, July 25, 2014 10:33 AM
  • User927770920 posted

    Should I just be able to use the @0 in the query on the detail page for it to pick up the string in the URL?

    Friday, July 25, 2014 10:38 AM
  • User1713851783 posted

    I don't understand your question.

    Friday, July 25, 2014 10:41 AM
  • User927770920 posted

    How do I incorporate the passed value of @item.vehicleDescription into the SQL Statement on the detail page?

    Friday, July 25, 2014 10:43 AM
  • User1713851783 posted

    As in my example, the

    var model = Request.QueryString["model"];

    statement reads the content of the 'model' querystring and then you can use it in your query

    var selectedData = db.Query(query, model);

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 25, 2014 10:49 AM
  • User927770920 posted

    Of course!

    You don't know how grateful I am!

    Working perfectly.

    Thank you so much for your patience.

    Mark

    Friday, July 25, 2014 10:54 AM