logo

Adding table columns to the standard “Dynamic Grid” element

You can add columns to a dynamically generated table by creating a markup for it on the server end. You can extend any DynamicGrid, if it has the ApplyExtensions method enabled. An example of such a table is the table with tasks.

Example of data display in the system tasks table

Fig. 1. Adding a column to the grid with the list of tasks in the Tasks portlet

Fig. 1. Adding a column to the grid with the list of tasks in the Tasks portlet

Fig. 2. Adding a column to the grid with the list of tasks

Extension (interface) methods

The IDynamicGridExtension extension point (interface) has two main methods:

  1. boolMatchUniqueName(string uniqueName) – defines the table, for which this extension is intended. The extension’s unique name is conveyed as a parameter.
  2. public voidApply<T>(EleWise.ELMA.Web.Mvc.Html.Grids.DynamicGridBuilder<T> builder) where T : class – defines the actions which have to be performed for the table builder. In this example, two columns are added; for each column, a markup is generated.
  3. The additional method “public int MaxOrder()” is intended for setting the editing column position. It is necessary to ensure that the entry editing and deleting columns are always the last ones when you add new columns to the grid in the web application.
[Component]
public class DynamicGridExtensionAll : IDynamicGridExtension
{
 public bool MatchUniqueName(string uniqueName)
 {
  if (uniqueName == "AllTasks" || uniqueName == "MyTasksPortletGrid") 
//Will be applied to tasks grids and to the tasks portlet grid
   return true;
  else return false;
 }
 
 public void Apply<T>(DynamicGridBuilder<T> builder) where T : class
 {
  var moduleGridBuilder = GetUid(builder);
  var workflowActions = new TaskWorkflowActions();
    
  Func<int> order = MaxOrder;
  if (moduleGridBuilder != null) // Applied only to the objects,
specified in the GetUid function
  {
   Func<ITask, MvcHtmlString> column = task =>
   {
    if (task == null || !workflowActions.IsAvailableEdit(TaskBaseManager.Instance.LoadOrNull(task.Id), UserManager.Instance.GetCurrentUser()))
 //Check permissions to edit the task
     return MvcHtmlString.Empty;
    return MvcHtmlString.Create(
      String.Format(@"<a href=""{0}"">{1}</a>",
       builder.Html.Url().Action("Edit", "Task", new
       {
        area = "EleWise.ELMA.BPM.Web.Tasks",
        id = task.Id
       }),
       builder.Html.Image("#x16/edit.png", SR.T("Edit"))
       )
      );
   };
   var lastColumn = builder.Grid.Columns.Count;
   builder.Columns(
    c => c.Insert(
     lastColumn,
     m => column(m as ITask)
      , columnOrder: order).Width("1%").NotSortable().NotResizable());
  }
 }
 
 public int MaxOrder()
 {
  return int.MaxValue;
 }
 
 public Guid? GetUid<T>(EleWise.ELMA.Web.Mvc.Html.Grids.DynamicGridBuilder<T> builder) where T : class
 {
  if (builder is DynamicGridBuilder<ITaskBase>) return InterfaceActivator.UID<ITaskBase>();
  return null;
 }
}

Example of extension point class

To specify the correct uniqueName, find the view with the grid in the web application source files (usually it is named Grid.cshtml) and find the “ApplyExtensions” method (fig 3).

Fig. 3. “ApplyExtensions” method in the view with the grid

Fig. 3. “ApplyExtensions” method in the view with the grid

In this example, you should pay attention to the function GetUid<T>(EleWise.ELMA.Web.Mvc.Html.Grids.DynamicGridBuilder<T> builder), which returns UID of the ITaskBase type. It means that this extension will be applied only to the objects of the ITaskBase type.

In the Apply method, the table is rendered as follows: a column is always rendered, but the pencil icon will only appear if the task’s type is ITask (user task), and the user has permissions to edit the task.

Important
Changes will affect not only the system table with the tasks list but also all the other tables, to which the “ApplyExtensions” method has been applied and which contain objects of the ITaskBase type.

Links to API elements

IDynamicGridExtension