Centering button in a datagrid column

[tshad]

I am trying to center a button in a datagrid column in asp.net and it
doesn't seem to work.

I have the following:

<asp:TemplateColumn ItemStyle-Width="10%"
ItemStyle-HorizontalAlign="Center">
<FooterTemplate>
<asp:LinkButton CommandName="Insert" Text="<img
src='..\images\Add.gif'border='0'>" ID="btnAdd" Runat="server" />
</FooterTemplate>
<ItemTemplate>
<asp:LinkButton CommandName="Delete" Text="<img
src='..\images\Delete.gif'border='0'>" ID="btnDel" Runat="server" />
</ItemTemplate>
</asp:TemplateColumn>

I had thought the ItemStyle-HorizontalAlign="Center" would center whatever
was in the column - which translates to <td></td>, but it doesn't seem to do
that.

Is there a way to do this?

Thanks,

Tom

 

[Guest]

What i do is just design CSS...(And its re usable)
And add it like "ItemStyle-CssClass="YourCSSClass"
GDluck
Patrick

 

[tshad]

What i do is just design CSS...(And its re usable)
And add it like "ItemStyle-CssClass="YourCSSClass"

I tried that, but I can't seem to find where you say to center what is
inside the cell. There is text-align:center, and vertical:align but no
horizontal-align. ItemStyle-HorizontalAlign="Center" is what is supposed to
center align the contents of the cell. Not sure why that doesn't work.

Thanks,

Tom

 

[naija naija]

Hi,
u can use ItemStyle-CssClass="YourCSSClass"
I mean create a Cascading style and then add it to the
ItemStyle-CssClass!Have u done that?
Or post ur code where u can't center it.
Patrick

 

[tshad]

Hi,
u can use ItemStyle-CssClass="YourCSSClass"
I mean create a Cascading style and then add it to the
ItemStyle-CssClass!Have u done that?
Or post ur code where u can't center it.

I posted it in the first message.

Here is the whole datagrid:

***********************************************************************************
<aspataGrid visible="False"
border=1
id="DataGrid1"
runat="server"
Width="400px"
Height="79px"
AutoGenerateColumns="False"
GridLines="None"
ShowFooter="true"
onItemDataBound="DataGrid1_ItemDataBound"
OnItemCommand="DataInsert"
onEditCommand="DataEdit"
onCancelCommand="DataCancel"
onUpdateCommand="DataUpdate">
<AlternatingItemStyle BorderWidth="0px" BorderStyle="None"
BorderColor="White" BackColor="linen"></AlternatingItemStyle>
<HeaderStyle Font-Bold="True"
BackColor="#6699cc"></HeaderStyle>
<Columns>
<asp:TemplateColumn HeaderText="Answer">
<ItemTemplate>
<asp:Label id="lblAnswer" runat="server" Text='<%#
DataBinder.Eval(Container, "DataItem.Answer") %>'>
</asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox id="txtAnswerFooter"
runat="server"></asp:TextBox>
</FooterTemplate>
<EditItemTemplate>
<asp:textbox id="txtAnswer" runat="server" Text='<%#
DataBinder.Eval(Container, "DataItem.Answer") %>'>
</asp:textbox>
</EditItemTemplate>
</asp:templateColumn>
<asp:TemplateColumn visible="false">
<ItemTemplate>
<asp:Label id="lblPositionID" runat="server" Text='<%#
DataBinder.Eval(Container, "DataItem.PositionID") %>'>
</asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:Label id="lblPositionIDFooter" runat="server">
</asp:Label>
</FooterTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn visible="false">
<ItemTemplate>
<asp:Label id="lblQuestionUnique" runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.QuestionUnique") %>'>
</asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:Label id="lblQuestionUniqueFooter" runat="server">
</asp:Label>
</FooterTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn visible="false">
<ItemTemplate>
<asp:Label id="lblAnswerUnique" runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.AnswerUnique") %>'>
</asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:Label id="lblAnswerUniqueFooter" runat="server">
</asp:Label>
</FooterTemplate>
</asp:TemplateColumn>
<asp:EditCommandColumn EditText="<img
src='..\images\Edit.png'border='0' id='textbox1'>" visible="true"
ItemStyle-Width="10%"
ButtonType="LinkButton"
UpdateText="<img src='..\images\update.png'
border='0'>" CancelText="<img src='..\images\Cancel.png' border='0'>" />
<asp:TemplateColumn ItemStyle-Width="10%"
ItemStyle-CssClass="tdCenter" >
<FooterTemplate>
<asp:LinkButton CommandName="Insert" Text="<img
src='..\images\Add.gif'border='0'>" ID="btnAdd" Runat="server" />
</FooterTemplate>
<ItemTemplate>
<asp:LinkButton CommandName="Delete" Text="<img
src='..\images\Delete.gif'border='0'>" ID="btnDel" Runat="server" />
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</aspataGrid>
*************************************************************************************

Here is the template code that has the ItemStyle-CssClass="tdCenter":
******************************************************************************************
<asp:TemplateColumn ItemStyle-Width="10%"
ItemStyle-CssClass="tdCenter" >
<FooterTemplate>
<asp:LinkButton CommandName="Insert" Text="<img
src='..\images\Add.gif'border='0'>" ID="btnAdd" Runat="server" />
</FooterTemplate>
<ItemTemplate>
<asp:LinkButton CommandName="Delete" Text="<img
src='..\images\Delete.gif'border='0'>" ID="btnDel" Runat="server" />
</ItemTemplate>
</asp:TemplateColumn>
*******************************************************************************************

The css code:

..tdCenter {
text-align:center;
}

I found that the footer is the only problem. The normal grid rows work
fine. The last column will center for either ItemStyle-CssClass="tdCenter"
or for ItemStyle-Horizontal="center", but not the footer.

Tom.

 

[Guest]

Tom,
U were missing something i guess i tried ur code and i added CCS to
LinkButton:-
<asp:LinkButton CommandName="Insert" CssClass="tdCenter" text="<img
src='..\images\Add.gif'border='0'>"ID="btnAdd" Runat="server" />
But i guess it wasn't the problem which i taught it was.
I later found out u that the CSS u posted had double dots like so:-
...tdCenter {
text-align:center;
}
so i changed it to(WITH one DOT before "tdCenter" :-
..tdCenter {
text-align:center;
}

So adding CSS to "<asp:TemplateColumn ItemStyle-Width="10%"
ItemStyle-CssClass="tdCenter">" was good and u were doing the right thing but
u added to much DOTS

Hope this helps..and let me know if it worked!
Patrick

 

[naija naija]

Tom,
U were missing something i guess i tried ur code and i added CCS to
LinkButton:-
<asp:LinkButton CommandName="Insert" CssClass="tdCenter" text="<img
src='..\images\Add.gif'border='0'>"ID="btnAdd" Runat="server" />
But i guess it wasn't the problem which i taught it was.
I later found out u that the CSS u posted had double dots like so:-
..tdCenter {
text-align:center;
}
so i changed it to(WITH one DOT before "tdCenter" :-
.tdCenter {
text-align:center;
}

So adding CSS to "<asp:TemplateColumn ItemStyle-Width="10%"
ItemStyle-CssClass="tdCenter">" was good and u were doing the right
thing but u added to much DOTS

Hope this helps..and let me know if it worked!
Patrick

 

[tshad]

Tom,
U were missing something i guess i tried ur code and i added CCS to
LinkButton:-
<asp:LinkButton CommandName="Insert" CssClass="tdCenter" text="<img
src='..\images\Add.gif'border='0'>"ID="btnAdd" Runat="server" />
But i guess it wasn't the problem which i taught it was.
I later found out u that the CSS u posted had double dots like so:-
..tdCenter {
text-align:center;
}
so i changed it to(WITH one DOT before "tdCenter" :-
.tdCenter {
text-align:center;
}

So adding CSS to "<asp:TemplateColumn ItemStyle-Width="10%"
ItemStyle-CssClass="tdCenter">" was good and u were doing the right thing
but
u added to much DOTS

You're right. My mistake. But the .css file had it correct, I just added
an extra dot for some reason in the post.

It still doesn't work. But only for the Footer, as I mentioned. It does
work for the ItemTemplate.

Thanks,

Tom.

 

[naija naija]

Hi Tom,
Well i found another solution for you (What i did was wrap the
linkButton in the footer around the DIV element.
So what u can do to have a CLEAN code is just to put the DIV up in your
CSS (the working code below):-
Hope this helps!
Enjoy
Patrick

<asp:TemplateColumn ItemStyle-Width="10%" ItemStyle-CssClass="tdCenter">
<FooterTemplate>
<div align="center">
<asp:LinkButton CommandName="Insert" text="<img
src='..\images\Add.gif'border='0'>" ID="btnAdd" Runat="server" />
</div>
</FooterTemplate>
<ItemTemplate>
<asp:LinkButton CommandName="Delete" text="<img
src='..\images\Delete.gif'border='0'>" ID="btnDel"
Runat="server" />
</ItemTemplate>
</asp:TemplateColumn>

 

[naija naija]

Hi Tom,
Did the solution work?
Patrick

 

[tshad]

Hi Tom,
Well i found another solution for you (What i did was wrap the
linkButton in the footer around the DIV element.
So what u can do to have a CLEAN code is just to put the DIV up in your
CSS (the working code below):-

That did the job!

I am surprised the other options didn't - as that was what they were there
for.

Thanks,

Tom

 

[Guest]

Hi Tom,
Did you get the working solution i sent to you?
Let me know!
Patrick

 

[tshad]

Hi Tom,
Did you get the working solution i sent to you?
Let me know!
Patrick

I did answer you on that one - maybe you didn't get it.

You're right. My mistake. But the .css file had it correct, I just added
an extra dot for some reason in the post.

It still doesn't work. But only for the Footer, as I mentioned. It does
work for the ItemTemplate.

Thanks,

Tom

 

[Guest]

No i sent you the working Solution!
I did it and it worked for the FOOTER!!!!!!!!
Let me know..
Patrick

 

[Guest]

Hi Tom..
What i did was wrap the LinkButton with DIV Element like so...

<asp:TemplateColumn ItemStyle-Width="10%"
ItemStyle-HorizontalAlign="Center">
<FooterTemplate>
<div align="center">
<asp:LinkButton CommandName="Insert" Text="<img
src='..\images\Add.gif'border='0'>" ID="btnAdd" Runat="server" />
</div>
</FooterTemplate>
<ItemTemplate>
<asp:LinkButton CommandName="Delete" Text="<img
src='..\images\Delete.gif'border='0'>" ID="btnDel" Runat="server" />
</ItemTemplate>
</asp:TemplateColumn>

It should WORK...Let me know!
Patrick

 

[tshad]

Hi Tom..
What i did was wrap the LinkButton with DIV Element like so...

<asp:TemplateColumn ItemStyle-Width="10%"
ItemStyle-HorizontalAlign="Center">
<FooterTemplate>
<div align="center">
<asp:LinkButton CommandName="Insert" Text="<img
src='..\images\Add.gif'border='0'>" ID="btnAdd" Runat="server" />
</div>
</FooterTemplate>
<ItemTemplate>
<asp:LinkButton CommandName="Delete" Text="<img
src='..\images\Delete.gif'border='0'>" ID="btnDel" Runat="server" />
</ItemTemplate>
</asp:TemplateColumn>

It should WORK...Let me know!

I did that, as you suggested, and it did work.

My question is why wouldn't the other one work.

Here is my code now:

*****************************************************
<asp:TemplateColumn ItemStyle-Width="20%"
ItemStyle-CssClass="tdCenter" >
<FooterTemplate>
<div align="center">
<asp:LinkButton CommandName="Insert" Text="<img
src='..\images\Add.gif'border='0'>" ID="btnAdd" Runat="server" />
</div>
</FooterTemplate>
<ItemTemplate>
<asp:LinkButton CommandName="Delete" Text="<img
src='..\images\Delete.gif'border='0'>" ID="btnDel" Runat="server" />
</ItemTemplate>
</asp:TemplateColumn>
*****************************************************************************

As you can see, I don't need the <div> tags to center the ItemTemplate, so
why do I need it for the FooterTemplate.

It's these little inconsistancies that drive me nuts.

Thanks for the help.

Tom.

 

[Guest]

Yeah Tom..
I understand u but what can we do..
Developers look for solutions and you have to provide it..
Anyway good it worked!!
By the way are you on MSN?IF you are send me your ID..
Enjoy
Patrick

 

[tshad]

Yeah Tom..
I understand u but what can we do..
Developers look for solutions and you have to provide it..
Anyway good it worked!!
By the way are you on MSN?IF you are send me your ID..

No, I'm not - sorry.

You're right about looking for solutions. Glad to have found a solution.
We spend much time trying to solve things that should work (or that you
would expect to happen a certain way but don't). Many hours are spent
trying find or engineer band-aids. That's what keeps it interesting.

Tom