Back

CheetSheet NetCanvas Listings

Here's some cheatsheet HTML / C# for working with the NetCanvas Listing control

Table Listing (HTML)

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>
        Domain Name
      </th>
      <th>
        View
      </th>
    </tr>
  </thead>
  <tbody>

    <n4:listing runat="Server"
                id="ls"
                dataitemtype="NetCanvas.Docs.Domains.Domain"
                itemctrltype="NetCanvas.Docs.Domains.List.ListItem">    
    </n4:listing>

  </tbody>
</table>

Table Listing (C#)

using references

using Net4orce.__CustomControls__;

Render logic

public Listing<Domain> ls;

private void render(){
  ls.DataSource = DocsApp.DB.Domains
    .GetAll();
  ls.DataBind();
}  

Table Listing Item (HTML)

<tr>

  <th>
   <%=oDomain.cDomain%>
  </th>

  <td>
    <a href="/domains/<%=oDomain.cDomain.SlugValue%>">
      View
    </a>
  </td>

</tr>

Table Listing Item (C#)

using NetCanvas.Docs;
using NetCanvas.Docs.Domains;

namespace NetCanvas.Docs.Domains.List
{
  public class ListItem : ControlBase
  {

    public Domain oDomain = null;

    protected override void initialize()
    {
      base.initialize();
      oDomain = oDataItem as Domain;      
    }
  }
}

OnBind Events

You need to set the T / (Type) for the Generics Listing<T> :

public Listing<User> ls;

Without setting the type the event onItemCtrlBound will not fire.

When rendering the list items an event is fired for each item in the listing. This is how you would attach to the event

private void render(){

  ls.DataSource = oDomain.aUsers;

  ls.onItemCtrlBound += (_ctrl, item, idx, e ) => {

    var ctrl = _ctrl as ListItem;        

  };

  ls.DataBind();
} 
  • _ctrl = The ASCX listing item ASCX. Note the Case, it's type is ControlBase
  • item = The DataItem bound to the individual listing item - already cast to <T>
  • idx = The Index in the list
  • e = The Repeater event

OnDelete Event

Define & Trigger the event.

public void btnDeleteClick(object sender, EventArgs e){

  if( !AuthorKick() ) {
    return;
  }


  onDeleted();
} 


public delegate void DeletedEvent();
public event DeletedEvent onDeleted;

Attach to the event

ls.onItemCtrlBound += (_ctrl, item, idx, e ) => {

  var ctrl = _ctrl as ListItem;  

  ctrl.onDeleted += () => {
      render();
    };
  };

};

 

Dynamically Change the Item's ASCX

Normally all of the items in the Listing are rendered usign the same ASCX control as defined in the ItemCtrlType property / attribute of the Listing<T> control.

However, there are cases where you might need to use different ASCX controls within the Listing<T> based on some value which is only known at runtime, this is where the property GetItemCtrlType comes into use.

The GetItemCtrlType is a property of type Func<T, string> and is set null by default. This Func recivies the dataItem T that is currently being renderd in the Listing View. The Func and is expected to return a string containing the name of the ASCX control to be used for that item in the listing.

Example setting GetItemCtrlType

Use the Listing<DataItem> just as normal, except assign a Lambda expression that returns the required ASCX types.

For example :

ls.DataSource = aItems;  

ls.GetItemCtrlType = (item) => {

  switch( item.cType ){
    case "A": return "MyApp.MyTypes.ItemTypeA";
    case "B": return "MyApp.MyTypes.ItemTypeB";
  }

  return "MyApp.MyTypes.ItemTypeDefault";

};

ls.onItemCtrlBound += (_ctrl, dataItem, idx, e) => {
  // ...
};

ls.DataBind();

Generic Listings

The HTML

<n4:genericlisting runat="server"
                   id="ls"
                   itemtype="Sega.Games.ShippingProperties"
                   itemctrltype="Sega.Games.View.PhysProps.ShippingOption">
</n4:genericlisting>

Code behind

public GenericListing<ShippingProperties> ls;

protected override void initialize()
{
  base.initialize();

  loadDataItem();

  oGame = oDataItem as Game;
  render();
}

private void render(){
  ls.DataSource = oGame.aShippingOptions;
  ls.onItemCtrlBound += (_ctrl, item, idx, e) => {
    var ctrl = _ctrl as ShippingOption;
    ctrl.oGame = oGame;
    ctrl.onDeleted += () => {
      render();
    };
  };
  ls.DataBind();
}

A Listing without child controls

You can using the Listing<T> and GenericListing<T> controls to render a list without having to create an extra child ascx for each of the list items, but including an <itemtemplate> element within the <n4:listing> element.

  <table class="table table-striped table-bordered">
    <thead>
      <tr>
        <th>
          Name
        </th>
        <th>
          View
        </th>
      </tr>
    </thead>
    <tbody>

      <n4:listing runat="Server"
                  id="ls"
                  dataitemtype="Net4orce.Canvas.MonoPacker.Packages.Package"
                  >
        <itemtemplate>
          <tr>
            <td>
              <%#Container.DataItem.cName.RawValue%>
            </td>
            <td>
              <a href="/packages/<%#Container.DataItem.cName.SlugValue%>.html"> 
                View
              </a>
            </td>
          </tr>
        </itemtemplate>
      </n4:listing>

    </tbody>
  </table>

Unlike the regular asp.net repeater / datatables controls you don't need cast the items to their actual type, within the itemtemplate to render values from it's properties.

The NetCanvas listing controls alter the rendering engine to handle the type casting for you, the Container.DataItem is of the type T.

Allowing :

<%#Container.DataItem.cName.RawValue%>