Form and List Module
Last Post 04/22/2011 5:37 AM by Steven Weiss. 6 Replies.
Author Messages
Steven Weiss
Nuke Active Member
Nuke Active Member
Posts:23


--
04/18/2011 4:12 AM
    Hi,

    I am using form and List module to display "User Defined Table".
    My issue is, I have 10 columns per records to display, but it is not possible to accommodate the complete data of a record (all columns) on a single row.

    I want to display only 4 columns and fifth column as "show details" as a hyperlink column.
    When user will click on "show details" columns, user will be able to see the rest of the data for that record EITHER as "POP UP" OR in "ANOTHER PAGE".

    Is it possible to do so in DotNetNuke.

    Urgent help required!!

    Vinaya
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    04/18/2011 6:38 AM
    I think that this is possible, but everything is possible.

    I would approach this be displaying the 4 columns and code the 5th column as a URL to whatever displays the rest of the record. That's usually doable.

    Another way would be to render all coumns but set some of them to NOT be displayed. The link in your 5th colums could call a jQery or javascript function to toggle display of the other columns.


    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Steven Weiss
    Nuke Active Member
    Nuke Active Member
    Posts:23


    --
    04/20/2011 5:04 AM
    Hi,
    I am very new to DNN.
    Can you please explain me or give me any example by which i can understand how to code 5th column as URL to show rest of the data for the clicked Row.
    Because i don't know how to get clicked row's ROW ID and how to fetch the data.

    It will be very nice if you can give example.

    Joseph Craig
    DNN MVP
    Posts:11667


    --
    04/20/2011 11:59 PM
    It's a bit difficult to answer that question hypothetically.

    Let's say that you have 10 columns of data and lots or rows. Do you want to display all of the rows and just 5 columns at a time? When you click, do you want to show the other 5 columns for all of the rows, or for just one row.

    Do you have an example that displays all 10 columns, no matter how messily?

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    04/21/2011 12:02 AM
    One other thought would be to use the form and list module to render all of the data as some nested lists. You could give the columns ids or classes and use jQuery to show/hide them as you please. Each "row" would be an unordered list and each "column" would be a list item. Style the lists to render horizontally and you almost have it.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    04/21/2011 6:40 PM
    So ... here is an example of how to toggle a column on and off using unordered lists:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht...">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            ul.row
            {
                display: block;
            }
            li.column1, li.column2, li.column3, li.column4, li.column5
            {
                display: inline;
                border: 1px solid red;
                padding: 0 40px 0 40px;
            }
            #Button1
            {
                margin-left: 40px;
            }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script>
        <script type="text/javascript">
            function toggleColumn () {
                $(".column3").toggle()
                };
        </script>
    </head>
    <body>
        <ul class="row">
            <li class="column1">1-1</li>
            <li class="column2">1-2</li>
            <li class="column3">1-3</li>
            <li class="column4">1-4</li>
            <li class="column5">1-5</li>
        </ul>
        <ul class="row">
            <li class="column1">2-1</li>
            <li class="column2">2-2</li>
            <li class="column3">2-3</li>
            <li class="column4">2-4</li>
            <li class="column5">2-5</li>
        </ul>
        <ul class="row">
            <li class="column1">3-1</li>
            <li class="column2">3-2</li>
            <li class="column3">3-3</li>
            <li class="column4">3-4</li>
            <li class="column5">3-5</li>
        </ul>
        <input id="Button1" type="button" value="Toggle Column 3" onclick="toggleColumn()" />
    </body>
    </html>
    


    Just paste this code into a file, name it test.html and open it with your favorite browser.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Steven Weiss
    Nuke Active Member
    Nuke Active Member
    Posts:23


    --
    04/22/2011 5:37 AM
    Hey,

    Thanks a LOT for all your help.

    I achieved this by Creating a POP UP window, using Javascript as per your First 2 suggestions.

    thanks once again.


    ---