Transformation for QueryDataGrid, CMSDataGrid

Hi Khoa,

I faceted with similar issue like you and I found some workaround, which helped in my case, but it could be good start for further investigation.

I cloned web part called Grid with custom query, you can find it on this path CMSWebParts\Viewers\Query\querydatagrid.ascx and made some changes directly in .ascx.cs file.

I created new template, called 'LiteralTemplate' because I needed only some text changes:

 public class LiteralTemplate : ITemplate
 {
     private string ColumnName;

     public LiteralTemplate(string columnName)
     {
         ColumnName = columnName;
     }

     public void InstantiateIn(Control container)
     {
         var control = new Literal();
         control.ID = ColumnName;
         container.Controls.Add(control);
     }
 }

Then at the end method ColumnSelector, I hardcoded my custom column like this (NOTE: You can make this dynamic by getting column (multiple columns as well, needs foreach around code bellow) name from custom property of newly created webpart):

 TemplateColumn customColumn = new TemplateColumn();
 customColumn.ItemTemplate = new LiteralTemplate("EventTitle");
 customColumn.HeaderText = "Title";

 if (gridItems.AllowSorting)
 {
     customColumn.SortExpression = "EventTitle";
 }

 gridItems.Columns.Add(customColumn);
 CustomControls.Add("EventTitle");

As you can see, I added this column in list that contains custom column names private List<string> CustomControls = new List<string>();

At the end, in event called gridItems_ItemDataBound, I checked for columns inside custom list and did some styling there:

if (CustomControls.Any())
{
    foreach(var name in CustomControls)
    {
        var ctrl = e.Item.FindControl(name);
        if (ctrl != null)
        {
            var td = ctrl.Parent as TableCell;
            if (td != null)
            {
                td.CssClass = "narrow";
            }

            ((Literal)ctrl).Text = $"<div class=\"col-row-2\"><b>{((DataRowView)e.Item.DataItem)[name]}</b></div>";
        }
    }
}

This chages will create output like this at the end:

<tbody>
    <tr>
        <td>Title</td>
    </tr>
    ...
    <tr>
        <td class="narrow">
            <div class="col-row-2">
                <b>My first title</b>
            </div>
        </td>
    </tr>
    ...
</tbody>

I'm not sure that this will solve your problem, but at least you can do some customization from here.

Best regards, Dragoljub