Centering button in a datagrid column

  • Thread starter Thread starter tshad
  • Start date Start date
T

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
 
What i do is just design CSS...(And its re usable)
And add it like "ItemStyle-CssClass="YourCSSClass"
GDluck
Patrick
 
Patrick.O.Ige said:
What i do is just design CSS...(And its re usable)
And add it like "ItemStyle-CssClass="YourCSSClass"
Click to expand...

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
 
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
 
naija naija said:
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.
Click to expand...

I posted it in the first message.

Here is the whole datagrid:

***********************************************************************************
<asp:DataGrid 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>
</asp:DataGrid>
*************************************************************************************

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.
 
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
 
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
 
Patrick.O.Ige said:
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:):)
Click to expand...

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.
 
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 said:
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):-
Click to expand...

That did the job!

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

Thanks,

Tom
 
Patrick.O.Ige said:
Hi Tom,
Did you get the working solution i sent to you?
Let me know!
Patrick
Click to expand...

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
 
No i sent you the working Solution!
I did it and it worked for the FOOTER!!!!!!!!
Let me know..
Patrick
 
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
 
Patrick.O.Ige said:
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!
Click to expand...

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.
 
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
 
Patrick.O.Ige said:
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..
Click to expand...

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
 
Back
Top