ItemStyle-HorizontalAlign="Center" is not working

[Edwin]

I have RadGrid getting data from client side.  I found that ItemStyle-HorizontalAlign="Center" was ignored (i.e. always left aligned)

        <telerik:RadGrid ID="grdModule" runat="server" AutoGenerateColumns="False" CellSpacing="0"
            GridLines="None" OnNeedDataSource="grdModule_NeedDataSource" AllowMultiRowSelection="true"
            AllowFilteringByColumn="True" OnItemCreated="grdModule_ItemCreated" AllowSorting="True"
            ShowFooter="true">
            <ClientSettings>
                <Selecting AllowRowSelect="true" />
                <ClientEvents OnRowSelected="grdModule_RowSelected" OnRowDeselected="grdModule_RowDeselected"
                    OnRowDataBound="grdModule_RowDataBound" OnCommand="grdModule_Command" />
                <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="400px" />
            </ClientSettings>
            <MasterTableView TableLayout="Auto" DataKeyNames="Id" ClientDataKeyNames="Id">
                <Columns>
                    <telerik:GridClientSelectColumn UniqueName="colSelect" HeaderStyle-Width="30px">
                    </telerik:GridClientSelectColumn>
                    <telerik:GridBoundColumn UniqueName="PinCount" DataField="PinCount" HeaderText="Pin Count"
                        DataFormatString="{0:N0}pin" DataType="System.Int32" SortExpression="PinCount"
                        HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="60px" ItemStyle-HorizontalAlign="Center">
                        <FilterTemplate>
                            <telerik:RadDropDownList ID="ddlPinCount" runat="server" ClientIDMode="Static" DataTextField="Value"
                                DataValueField="Key" Width="50px" OnClientSelectedIndexChanged="dropdownChanged">
                            </telerik:RadDropDownList>
                        </FilterTemplate>
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn UniqueName="Depth" DataField="Depth" HeaderText="Depth"
                        HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="68px">
                        <ClientItemTemplate>
                            #=formatDepth(Depth)#
                        </ClientItemTemplate>
                        <FilterTemplate>
                            <telerik:RadDropDownList ID="ddlDepth" runat="server" ClientIDMode="Static" DataTextField="Value"
                                DataValueField="Key" Width="60px" OnClientSelectedIndexChanged="dropdownChanged">
                            </telerik:RadDropDownList>
                        </FilterTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn UniqueName="DataWidth" DataField="DataWidth" HeaderText="Datawidth"
                        HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="110px">
                        <FilterTemplate>
                            <telerik:RadDropDownList ID="ddlDataWidth" runat="server" ClientIDMode="Static" DataTextField="Value"
                                DataValueField="Key" Width="105px" OnClientSelectedIndexChanged="dropdownChanged">
                            </telerik:RadDropDownList>
                        </FilterTemplate>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="Voltage" DataField="Voltage" HeaderText="Voltage"
                        HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="100px">
                        <FilterTemplate>
                            <telerik:RadDropDownList ID="ddlVoltage" runat="server" ClientIDMode="Static" DataTextField="Value"
                                DataValueField="Key" Width="90px" OnClientSelectedIndexChanged="dropdownChanged">
                            </telerik:RadDropDownList>
                        </FilterTemplate>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="Speed" DataField="Speed" HeaderText="Speed"
                        HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="160px">
                        <FilterTemplate>
                            <telerik:RadDropDownList ID="ddlSpeed" runat="server" ClientIDMode="Static" DataTextField="Value"
                                DataValueField="Key" Width="150px" OnClientSelectedIndexChanged="dropdownChanged">
                            </telerik:RadDropDownList>
                        </FilterTemplate>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="DRAMCount" DataField="DRAMCount" HeaderText="# DRAMs"
                        DataFormatString="{0:N0}" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="60px">
                        <FilterTemplate>
                            <telerik:RadDropDownList ID="ddlDRAMCount" runat="server" ClientIDMode="Static" DataTextField="Value"
                                DataValueField="Key" Width="55px" OnClientSelectedIndexChanged="dropdownChanged">
                            </telerik:RadDropDownList>
                        </FilterTemplate>
                        <ItemStyle HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="DRAMOrg" DataField="DRAMOrg" HeaderText="DRAM Org"
                        HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="150px" ItemStyle-HorizontalAlign="Center">
                        <FilterTemplate>
                            <telerik:RadDropDownList ID="ddlDRAMOrg" runat="server" ClientIDMode="Static" DataTextField="Value"
                                DataValueField="Key" Width="140px" OnClientSelectedIndexChanged="dropdownChanged">
                            </telerik:RadDropDownList>
                        </FilterTemplate>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="Rank" DataField="Rank" HeaderText="# ranks"
                        HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="55px">
                        <FilterTemplate>
                            <telerik:RadDropDownList ID="ddlRank" runat="server" ClientIDMode="Static" DataTextField="Value"
                                DataValueField="Key" Width="40px" OnClientSelectedIndexChanged="dropdownChanged">
                            </telerik:RadDropDownList>
                        </FilterTemplate>
                        <ItemStyle HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn UniqueName="Height" DataField="Height" HeaderText="Module height"
                        HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="130px">
                        <ClientItemTemplate>
                            #=formatHeight(Height)#
                        </ClientItemTemplate>
                        <FilterTemplate>
                            <telerik:RadDropDownList ID="ddlHeight" runat="server" ClientIDMode="Static" DataTextField="Value"
                                DataValueField="Key" Width="120px" OnClientSelectedIndexChanged="dropdownChanged">
                            </telerik:RadDropDownList>
                        </FilterTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>

I am using ASP.NET 4 and Telerik 2013.1.417.  Any idea?

[Venelin]

Hi Edwin,

On my side your code works as expected. The scenario is basic enough and I don't really think that client data binding is directly related to the problem. My best guess is that some custom styles are overriding the style set from the property.

I also attach a sample project where the grid behaves correctly and the column content is aligned to the  center. Please give it a try and let me know if I am missing something. If you can replicate the issue in the sample you can open a support ticket and resend it so we can track down the issue and propose a solution.


Regards,
Venelin
Telerik

[Edwin]

I have figured it out.  The problem is not due to CSS.  It is related to my OnNeedDataSource event handler.  I used

        protected void grd_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {
            grd.DataSource = new object[] {};
        }

to solve the issue that RadGrid does not exist when the page is loaded and thus causing javascript error.  However this makes the alignment not working.

Venelin's example used ClientEvents OnCommand="function(){}" to make the RadGrid get rendered in WebForm. 

In summary, use OnCommand="function(){}" instead of NeedDataSource event to solve the RadGrid not found error at client side.

Edwin

[Venelin]

Hi Edwin,

You can also find this information and even more details in this help topic: Client-side Binding. There it is stated: "If you are using declarative data-binding and do not bind RadGrid on the server, it will manage to create its client object properly. However, if you are manually binding it on client and do not bind it on server, you need to attach a handler to its OnCommand client event..."

Regards,
Venelin
Telerik