HorizontalAlign in the explorer's grid

[Tomasz M.Lipiński]

Hi,
I've tried to set the HorizontalAlign of the "Size" column to "Right":

GridColumn c = theExplorer.Grid.Columns.FindByUniqueNameSafe("Size");
if (c != null)
{
  c.ItemStyle.HorizontalAlign = HorizontalAlign.Right;
  c.HeaderStyle.HorizontalAlign = HorizontalAlign.Right;
}

It works but... up to the 11th row (starting with 1). The 12th row is an invisible "No record to display" row and starting from the 13th row the alignment is "Left". It is so in the case of any column, not "Size" only.
See the attached print-screens of the markup and its result.
Could you do something with it :-) ?

Regards
Tomasz

PS. I'm using 2009 Q3 and "Simple" skin - if it matters.

[Lini]

Hello Tomasz,

The problem happens because the grid in the file explorer control uses client-side binding. The properties you set from the server are only applied to the rows that are rendered there (in this case 11 rows). The rest (rows 12 and up) are created dynamically in the browser when they are needed. There are two possible workarounds for this issue.

You can try setting the PageSize property of the File Explorer to a larger value (e.g. 100). This way the grid will render 100 instead of 11 rows on the server and they all will get the correct alignment. The drawback from this setting is that the 100 rows will be part of the page HTML so the page might load a bit slower than without setting PageSize.

As an alternative, you can attach a handler for the grid's client rowDataBound event and add the alignment manually there using JavaScript. See the following grid demo for more details - https://demos.telerik.com/aspnet-ajax/grid/examples/client/databinding/defaultcs.aspx

Best wishes,
Lini
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Tomasz M.Lipiński]

Hi,
OK. I've implemented the second suggestion - something like that:

<style type="text/css">
  .fileMain_grid_Size
  {
    text-align: right;
  }
</style>

This CSS rule is programmatically created on the page ("fileMain" is the ClientID of my file explorer; "fileMain_grid" is the ClientID of its grid).

function onRowDataBound(sender, args) {
  var cols = args.get_item().get_parent().get_columns();
  var i;
  for (i = 0; i < cols.length; i++) {
    var name = cols[i].get_uniqueName();
    var className = args.get_item().get_cell(name).className;
    var newClassName = sender.ClientID + "_" + name;
    if (className.indexOf(newClassName) == -1)
      args.get_item().get_cell(name).className += " " + newClassName;
  }
}

This ClientEvents.OnRowDataBound handler sets the appropriate className value to each column (therefore I can programmatically configure any column without changing this handler).
And it works fine - also for the rows bound server side.

Thanks for tips.
Regards
Tomasz