WebGrid column merge RSS

• • Reply
  

  triskac

  Member

  15 Points

  52 Posts

  WebGrid column merge

  Dec 11, 2012 07:48 PM|LINK

  Hi

  is it possible to merge columns by using WebGrid in WebMatrix?

  Thanks

• • Reply
  

  Mikesdotnett...

  All-Star

  154955 Points

  19872 Posts

  Moderator

  MVP

  Re: WebGrid column merge

  Dec 11, 2012 08:14 PM|LINK

  You can combine multiple values in one column eg:

  format: @<text>@(item.Id + " " + item.Price)</text>

  
  
  

  Regards, Mike
  Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
• • Reply
  

  triskac

  Member

  15 Points

  52 Posts

  Re: WebGrid column merge

  Dec 11, 2012 08:21 PM|LINK

  And if you have eg:

  city          Country

  New York  USA

  San Francisco USA

  London Europe

  Madrid Europe

  is it possible to merge columns where the country is the same?

• • Reply
  

  Mikesdotnett...

  All-Star

  154955 Points

  19872 Posts

  Moderator

  MVP

  Re: WebGrid column merge

  Dec 11, 2012 09:05 PM|LINK

  You would need to do that before presenting the data to the grid. Depending on what you want to achieve, you might be able to do it with SQL, or you might be able to reshape your database query result using LINQ.

  Regards, Mike
  Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
  • Marked as answer by triskac on Dec 12, 2012 05:56 AM
• • Reply
  

  triskac

  Member

  15 Points

  52 Posts

  Re: WebGrid column merge

  Dec 12, 2012 05:56 AM|LINK

  thanks, maybe do it with SQL is the best way

• • Reply
  

  triskac

  Member

  15 Points

  52 Posts

  Re: WebGrid column merge

  Dec 27, 2012 09:04 PM|LINK

  Hi Mike

  I have this code

  @{
      var db=Database.Open("tipy");
      var selectedData = db.Query("SELECT * FROM Itinerary");
      var grid = new WebGrid(source: selectedData);
      
  }
  <h1>Plan</h1>
  <div>
      @grid.GetHtml(
     columns: grid.Columns (
     grid.Column ("Date"),
     grid.Column ("Country"),
     grid.Column ("City")
     )
  )
  </div>

  The result of this is:

  Date	Country	City
  27.12.2012	USA	New York
  27.12.2012	USA	New Jersey
  27.12.2012	Mexico	Mexico City
  29.12.2012	Europe	London

  I would like to achieve this:

  Date	Country	City
  27.12.2012	USA	New York
  		New Jersey
  27.12.2012	Mexico	Mexico City
  29.12.2012	Europe	London

  I thought, I can do it by group by in sql, but this is not working as I would like.

  Is there any way how to do it? I would like to have this merge of columns everytime, when the date is same and the country is the same.

  Thank you for any ideas

  • Edited by triskac on Dec 27, 2012 09:05 PM
• • Reply
  

  GmGregori

  Contributor

  5470 Points

  737 Posts

  Re: WebGrid column merge

  Dec 28, 2012 10:36 AM|LINK

  triskac

  Is there any way how to do it? I would like to have this merge of columns everytime, when the date is same and the country is the same.

  I don't know any easy way to accomplish this target.

  If WebGrid isn't essential, you could use something like this:

  @{
      var db = Database.Open("tipy");
      var selectedData = db.Query("SELECT * FROM Itinerary ORDER BY Date, Country");
  }
  
  <h1>Plan</h1>
  <table>
      <thead>
          <tr>
              <th>Date</th>
              <th>Country</th>
              <th>City</th>
          </tr>
      </thead>
      <tbody>
          @{
              DateTime prevDate = DateTime.MinValue;
              string prevCountry = "";
              foreach(var row in selectedData)
              {
                  <tr>
                      <td>@(row.Date == prevDate && row.Country == prevCountry ? "" : row.Date)</td>
                      <td>@(row.Date == prevDate && row.Country == prevCountry ? "" : row.Country)</td>
                      <td>@row.City</td>
                  </tr>
                  prevDate = row.Date;
                  prevCountry = row.Country;
              }
          }
      </tbody>
  </table>

  Otherwise, you should modify the selectedData List before to pass it to the WebGrid.

• • Reply
  

  triskac

  Member

  15 Points

  52 Posts

  Re: WebGrid column merge

  Dec 28, 2012 10:51 AM|LINK

  Gregori,

  I tried this and it is like I wanted, thanks, but when you use this method and you have for example 100 records all display at page, is it possible to see only 10 records per page like in webgrid?

• • Reply
  

  GmGregori

  Contributor

  5470 Points

  737 Posts

  Re: WebGrid column merge

  Dec 28, 2012 11:54 AM|LINK

  Try the method highlighted by Mike Brind in this article: Web Pages - Efficient Paging Without The WebGrid.

• • Reply
  

  triskac

  Member

  15 Points

  52 Posts

  Re: WebGrid column merge

  Dec 28, 2012 01:22 PM|LINK

  Gregori,

  thank you very much, you are fantastic :)

  the code below is working the last think what I would appreciate is layout of this empty column

  when I run the code I get this output

  Date	Country	City
  27.12.2012	Mexico	Mexico City
  27.12.2012	USA	New York
  		New Jersey

  I would like to have something like this, is it possible?

  Date	Country	City
  27.12.2012	Mexico	Mexico City
  27.12.2012	USA	New York
  		New Jersey

  Hmm after I posted, my comment deosn't have border like in preview, so here is the screen screen

  Code:

  @{
      var pageSize = 3; 
      var totalPages = 0; 
      var count = 0;
      var page = UrlData[0].IsInt() ? UrlData[0].AsInt() : 1;
      var offset = (page -1) * pageSize;
      
      var db = Database.Open("tipy");
      var sql = "select count(*) from itinerary";
       count = (int)db.QueryValue(sql);
      totalPages = count/pageSize;        
      if(count % pageSize > 0){
          totalPages += 1;
      }
          sql = "SELECT * FROM Itinerary " + 
                 "Order By Date, Country OFFSET @0 ROWS FETCH NEXT @1 ROWS ONLY;";
      var selectedData = db.Query(sql, offset, pageSize);
  }
   
  <h1>Plan</h1>
  <table border="1">
      <thead>
          <tr>
              <th>Date</th>
              <th>Country</th>
              <th>City</th>
          </tr>
      </thead>
      <tbody>
          @{
              DateTime prevDate = DateTime.MinValue;
              string prevCountry = "";
              foreach(var row in selectedData)
              {
                  <tr>
                      <td>@(row.Date == prevDate && row.Country == prevCountry ? "" : row.Date)</td>
                      <td>@(row.Date == prevDate && row.Country == prevCountry ? "" : row.Country)</td>
                      <td>@row.City</td>
                  </tr>
                  prevDate = row.Date;
                  prevCountry = row.Country;
              }
          }
      </tbody>
  </table>
      @{
          for (var i = 1; i < totalPages + 1; i++){
              <a href="/Aktualne/@i">@i</a>
          }
      }

  • Edited by triskac on Dec 28, 2012 01:22 PM
  • Edited by triskac on Dec 28, 2012 01:23 PM
  • Edited by triskac on Dec 28, 2012 01:29 PM
  • Edited by triskac on Dec 28, 2012 02:23 PM