Display two records in one row of datagrid

    i am developing an shopping cart web site and i am facing a typical problem,i want to show 2 records side by side in order to get rid of the scrolling to view the product. i and displaying the products lists as one product each row but now is there any way i can show two records side by side using datagrid as i am using datagrid following is the code to display the one record per row

                  <asp:Panel id="pnlShowCart" runat="server">
                        <h1>View Cart</h1>
                        <asp:DataGrid id="dgCart" runat="server" AutoGenerateColumns="false" GridLines="None" CellPadding="3" Width="100%"
                                    DataKeyField="CartID" OnCancelCommand="dgCart_Cancel" OnDeleteCommand="dgCart_Delete" OnEditCommand="dgCart_Edit" OnUpdateCommand="dgCart_Update">
                              <HeaderStyle Font-Name="arial" BackColor="#003366" ForeColor="#FFFFFF" Font-Bold="true" Font-Size="10" />
                              <ItemStyle Font-Name="arial" Font-Size="10" />
                                    <asp:EditCommandColumn EditText="Change Quantity" CancelText="Cancel" UpdateText="Update" />
                                    <asp:ButtonColumn ButtonType="LinkButton" CommandName="Delete" Text="Remove" />
                                    <asp:BoundColumn DataField="Item" HeaderText="Product Name" ReadOnly="true" />
                                    <asp:TemplateColumn HeaderText="Quantity">
                                                <%# DataBinder.Eval(Container.DataItem, "Quantity") %>
                                                <asp:TextBox id="txtQuantity" Text='<%# DataBinder.Eval(Container.DataItem, "Quantity") %>' runat="server" Width="50" />
                                    <asp:BoundColumn DataField="Cost" HeaderText="Cost" ReadOnly="true" />
                        <p align="right"><strong>Total: <asp:Label id="lblTotal" runat="server" /></strong></p>
                        <p align="right"><asp:LinkButton id="lbContinue" Text="Continue Shopping" runat="server" OnClick="ContinueShopping" />
                        | <asp:LinkButton id="lbCheckOut" Text="Checkout" runat="server" OnClick="CheckOut" /></p>

plz tell me how to change this code to redo this code to show 2 records per row side by side.plz its urgent

Vikram Lashkari
Who is Participating?
AdrianJMartinConnect With a Mentor Commented:
oops csharpfriends have not remapped some of the links.. :-(

gotdotnet have got it right though :-)

you mau already have the code if you have installed the DotNet Framework SDK:
On my machine its @

C:\Program Files\Microsoft Visual Studio .NET 2003\SDK\v1.1\QuickStart\aspplus\samples\webforms\ctrlref\webctrl\datalist

You mean nested records?
  I guess you are saying about like the sample shown in this below grid.
  Check and let me know.

  I guess this one will help you out.

vikram_lashkariAuthor Commented:
hi Sachiek,
     I donot need  HierarGrid ,but let me explain what i need,
    i need to diplays 2 records in one row just in the example which u have linked me,the Record of the Title ID :PC1035 is displayed in one row and the next Title ID :PS1372 is displayed in the Second row, i want to display these records side by side means after the Pulication Field of the First Record the Next record should dispayed and after these tow records are displayed the third record and foruth has to be displayed in next row after that fith and sixth record has to be displayed in next row.
 plz help me
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

not sure you will be able to do using a datagrid, beacause the data grid outputs a html table. I suppose you could use javascript to alter the tables layout after the page has been sent to the browsers.

You probally hould use the DataList Control as this has RepeatColumns,RepeatDirection and RepeatLayout for controling this kind of thing.
Common man...consider some better design. That should help you better in long term.
If you want to leverage the use of .net , surely you need to consider re-design for your requirement.


Anyway here is one other sample which might help you. This is displaying colum's vertically. I think this is most closer one for your requirement.

Best regards,
Further drilling i could find one more example.

Hope this will help you a lot too.

vikram_lashkariAuthor Commented:
      i think datagrid will not work,how about using repeater,can u just give me a sample code for the repeater to display more than one recored per row, i will be thanful to u and my problem will also solve

I'm sure I mentioned the DataList. The DataList Control does what you need out of the box,

vikram_lashkariAuthor Commented:
hi friend AdrianJMartin

   i think the i get my solution but the link which u had send me i am able to view the demo but i am not able to view the source as this is the link and it gives the following error from my computer plz if u can open that source then plz copy and paster for me,i think this is the solution of my problem.



C# Source:  CS\DataList2.aspx    
VB Source:  VB\DataList2.aspx    
JScript Source:  JS\DataList2.aspx    

Source Viewer Error: cannot show this file

Either the file does not exist, or your configuration settings for the source viewer do not allow files in this directory to be viewed. To edit the configuration settings, see the web.config file at the root of the quickstart directory. Change the <sourceview> setting to point at the root directory of the quickstart. All files under this directory will be accessible to the source viewer.

      <add key="root" value="c:\Program Files\Microsoft.Net\FrameworkSDK\Samples\Quickstart" />

vikram_lashkariAuthor Commented:
hi Adrian
   i will implement it today if it works out properly with the database records then i will report u back,

vikram_lashkariAuthor Commented:
hi adrian,

    It is working but one problem with the DataList is that I cannot Do the Paging with  the Datagrid,so Plz if u solve my this problem with datalist or If can u tell me that is there any property like RepeatColumn in DataGrid also just like DataList then my all problem will be solved as if i change to the DataList from the Datagrid i won't be getting  the advantage of the Paging.

   so Please help he out.But i think your solution is Perfect when i have to implement on Datalist
Somebody please correct me if i'm wrong but. When you use 'paging' the all the data bound data is persisted via the viewstate. Which can lead to large http roundtrips. If you are OK with the size of the roudn trips then you could just roll you own paging using javascript to set the css style of the 'hidden' items to "display:none" and the visible ones to "display: inline" or "display:block".

Or persist your data in the application or cache collection and create a dataview object and bind the datalist/grid to the dataview, - which has the advantage of much smaller postback round trips. Then have buttons which manipulate the filter expression for the view, ie filter on the modulos of the rowcount to achieve paging( you may need to create some dummy rows to achieve this.)
vikram_lashkariAuthor Commented:
hi Adrian,
       I just need ur help to do paging like 1,2,3,4,5 that is i need the number of pages has to be displayed for my record in datalist. Just for example when u do search in google.com u will find that 1 to 10 pages linked are displayed for the results found and not the remaining pages u have next button and when u press the next button u will see the remaining page no, same i have to do with either datalist or datagrid ,just give me like or code here or at my email:vikram_lashkari@yahoo.com as ,the answer to my question related to this topic is already given by u thank. but plz solve my this problem.Thanx AdrianJMartin.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.