Logo
My Account |  Site Map | Contact Us  
Welcome Guest Search | Active Topics | Sign In | Register

Change the visibility of ButtonColumn on client side Options
Camarate
Posted: Thursday, February 8, 2018 9:24:08 AM
Rank: Advanced Member
Groups: Member

Joined: 9/2/2010
Posts: 118
Hi,

I have a grid with a ButtonColumn that is shown as below:



I need the ButtonColumn to appear only when the "Business / Regional" column is different of blank like below:



How do I do this in client side?

Another question. Can I replace the ButtonColumn with a CustonColumn that has an ASPX ImageButton, like the example below?



Thanks in advance,

Marcelo Camarate
eo_support
Posted: Thursday, February 8, 2018 2:00:03 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 20,523
Hi,

You can use conditional style feature to apply a CSS class conditionally on your Grid item:

http://demo.essentialobjects.com/Demos/Grid/Features/Conditional%20Formatting/Demo.aspx

For example, you can apply a CSS class "hide_button" on the Grid item conditionally. You can then use combined CSS selector rule to conditionally show/hide your button based on whether your element is a child element of "hide_button".

Thanks
Camarate
Posted: Thursday, February 8, 2018 6:04:18 PM
Rank: Advanced Member
Groups: Member

Joined: 9/2/2010
Posts: 118
Hi,

Thanks for your quickly reply, but I not understood it well.

I already use special formatting using StyleSetID to display the items in different colors (blue or red). But, I think, this affects all cells in the item, right? So, how can I affect only one cell of the item using StyleSetID?

I would appreciate if you can help me to solve this problem. I am putting below the current definition of my grid to you guide me.

Code: HTML/ASPX
<eo:Grid ID="grdData" runat="server" BackColor="#F0F0F0" BorderColor="#C7D1DF" BorderWidth="1px"
                            ColumnHeaderAscImage="00050303" ColumnHeaderDescImage="00050304" ColumnHeaderDividerImage="00050302"
                            FixedColumnCount="1" Font-Bold="False" Font-Italic="False" Font-Names="Verdana"
                            Font-Overline="False" Font-Size="9pt" Font-Strikeout="False" Font-Underline="False" GridLineColor="199, 209, 223" GridLines="Both" Height="100%"
                            ItemHeight="19" EnableKeyboardNavigation="True" Width="100%" FullRowMode="False">
                            <FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" />
                            <ItemStyles>
                                <eo:GridItemStyleSet>
                                    <ItemStyle CssText="background-color: white" />
                                    <ItemHoverStyle CssText="background-color:azure;background-repeat:repeat-x;" />
                                    <SelectedStyle CssText="background-color:azure;background-repeat:repeat-x;" />
                                    <CellStyle CssText="padding-left:8px;padding-top:2px; color:#336699;white-space:nowrap;" />
                                </eo:GridItemStyleSet>
                                <eo:GridItemStyleSet StyleSetID="PURPLE">
                                    <ItemStyle CssText="background-color:white;" />
                                    <ItemHoverStyle CssText="background-repeat:repeat-x;color:#c0ffff;" />
                                    <SelectedStyle CssText="background-color:#c0c0ff;background-repeat:repeat-x;font-family:Verdana;" />
                                    <CellStyle CssText="color:#9900cc;padding-left:8px;padding-top:1px;white-space:nowrap;" />
                                </eo:GridItemStyleSet>
                                <eo:GridItemStyleSet StyleSetID="RED">
                                    <ItemStyle CssText="background-color: white" />
                                    <ItemHoverStyle CssText="background-repeat:repeat-x;color:#c0ffff;" />
                                    <SelectedStyle CssText="background-color:#c0c0ff;font-family:Verdana;background-repeat:repeat-x;" />
                                    <CellStyle CssText="color:red;padding-left:8px;padding-top:1px;white-space:nowrap;" />
                                </eo:GridItemStyleSet>
                            </ItemStyles>
                            <ColumnTemplates>
                                <eo:TextBoxColumn>
                                    <TextBoxStyle CssText="BORDER-BOTTOM: #7f9db9 1px solid; BORDER-LEFT: #7f9db9 1px solid; PADDING-BOTTOM: 1px; MARGIN: 0px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; COLOR: #003399; FONT-SIZE: 9pt; BORDER-TOP: #7f9db9 1px solid; BORDER-RIGHT: #7f9db9 1px solid; PADDING-TOP: 2px" />
                                    <CellStyle CssText="color:#003399;font-size:9pt;padding-left:8px;padding-top:2px;" />
                                </eo:TextBoxColumn>
                                <eo:DateTimeColumn>
                                    <DatePicker ControlSkinID="None" DayCellHeight="16" DayCellWidth="19" DayHeaderFormat="FirstLetter"
                                        DisabledDates="" OtherMonthDayVisible="True" SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
                                        TitleRightArrowImageUrl="DefaultSubMenuIcon">
                                        <TodayStyle CssText="font-family: tahoma; font-size: 12px; border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" />
                                        <SelectedDayStyle CssText="font-family: tahoma; font-size: 12px; background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                                        <DisabledDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                                        <PickerStyle CssText="border-bottom-color:#7f9db9;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#7f9db9;border-left-style:solid;border-left-width:1px;border-right-color:#7f9db9;border-right-style:solid;border-right-width:1px;border-top-color:#7f9db9;border-top-style:solid;border-top-width:1px;font-family:Courier New;font-size:8pt;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:1px;padding-left:2px;padding-right:2px;padding-top:2px;" />
                                        <CalendarStyle CssText="background-color: white; border-right: #7f9db9 1px solid; padding-right: 4px; border-top: #7f9db9 1px solid; padding-left: 4px; font-size: 9px; padding-bottom: 4px; border-left: #7f9db9 1px solid; padding-top: 4px; border-bottom: #7f9db9 1px solid; font-family: tahoma" />
                                        <TitleArrowStyle CssText="cursor:hand" />
                                        <DayHoverStyle CssText="font-family: tahoma; font-size: 12px; border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" />
                                        <MonthStyle CssText="font-family: tahoma; font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px" />
                                        <TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" />
                                        <OtherMonthDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                                        <DayHeaderStyle CssText="font-family: tahoma; font-size: 12px; border-bottom: #aca899 1px solid" />
                                        <DayStyle CssText="font-family: tahoma; font-size: 12px; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                                    </DatePicker>
                                </eo:DateTimeColumn>
                                <eo:MaskedEditColumn>
                                    <MaskedEdit ControlSkinID="None" TextBoxStyle-CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; font-family:Courier New;font-size:8pt;">
                                    </MaskedEdit>
                                </eo:MaskedEditColumn>
                            </ColumnTemplates>
                            <Columns>
                                <eo:StaticColumn DataType="Integer" HeaderText="UNI_SQ_UNIT" Name="UNI_SQ_UNIT" Visible="False"
                                    Width="0">
                                </eo:StaticColumn>
                                <eo:StaticColumn DataType="Integer" HeaderText="LGUN_SQ_UNIT" Name="LGUN_SQ_UNIT"
                                    Visible="False" Width="0">
                                </eo:StaticColumn>
                                <eo:StaticColumn DataType="Boolean" HeaderText="ID_HAVE" Name="ID_HAVE" Visible="False"
                                    Width="0">
                                </eo:StaticColumn>
                                <eo:StaticColumn DataType="String" HeaderText="Nome" Name="UNI_NM_UNIT" Width="350">
                                </eo:StaticColumn>
                                <eo:StaticColumn DataType="String" HeaderText="Status" Name="UNI_DS_STATUS" Width="90">
                                </eo:StaticColumn>
                                <eo:StaticColumn DataFormat="" DataType="String" HeaderText="M&#234;s In&#237;cio"
                                    Name="LGUN_DT_INITIAL" Width="85">
                                </eo:StaticColumn>
                                <eo:StaticColumn DataFormat="" DataType="String" HeaderText="M&#234;s Fim" Name="LGUN_DT_FINAL"
                                    Width="85">
                                </eo:StaticColumn>
                                <eo:TextBoxColumn ClientSideEndEdit="BussinessEnd" DataType="String" HeaderText="Neg&#243;cio"
                                    MaxWidth="50" Name="LGUN_NM_SPREADSHEET" TextBoxMaxLength="50" Width="220">
                                    <TextBoxStyle CssText="background-color:azure;color:#003399;font-family:Verdana;font-size:9pt;" />
                                    <CellStyle CssClass="" CssText="color:#003399;padding-left:8px;padding-top:2px;white-space:wrap;" />
                                </eo:TextBoxColumn>
                                <eo:ButtonColumn ButtonText="X" ButtonType="PushButton" Name="cmdRemover" Width="30">
                                    <CellStyle CssText="VERTICAL-ALIGN: middle; TEXT-ALIGN: center" />
                                </eo:ButtonColumn>
                            </Columns>
                            <ColumnHeaderStyle CssText="background-image:url('00050301');padding-left:8px;padding-top:2px;font-weight: bold;color:white;" />
                        </eo:Grid>


Thanks in advance,

Marcelo Camarate
eo_support
Posted: Friday, February 9, 2018 2:34:59 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 20,523
Hi,

You will need to use CssClass, not CssText in your style. The basic idea is to apply different class names and then use the class names to apply different styles. Consider the following HTML:

Code: HTML/ASPX
<div class="row_with_button_visible">
    <div class="button">this is visible</div>
</div>

<div class="row_with_button_invisible">
    <div class="button">this is not visible</div>
</div>

When the above HTML combined with the following CSS it will display the text in the first block, but hide the text in the second block:

Code: CSS
.row_with_button_visible .button
{
    display: block;
}

.row_with_button_invisible .button
{
    display: none;
}


Your goal is to get such CssClass to be applied on the GridItem and your button column respectively, then use them in the above way to show/hide items conditionally.

Thanks!
Camarate
Posted: Friday, February 9, 2018 10:32:52 AM
Rank: Advanced Member
Groups: Member

Joined: 9/2/2010
Posts: 118
Hi,

It worked fine now. Thank you very much.

Another question. How can I change the StyleSetID in client side (Javascript)? It's possible?

Thanks in advance,
eo_support
Posted: Friday, February 9, 2018 10:59:01 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 20,523
Hi,

No. Unfortunately it is not possible to set StyleSetID from client side. Sorry about it!

Thanks


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.