Textbox with rightbuttons in grid componentcolumn

[sp00k]

Hi,

I made a page with a simple grid some component columns and now i need an extra button on my first component column so i tought i'd use the textbox rightbuttons.

so now i have a textbox that's got a height of 50px

                        <ext:GridPanel runat="server" ID="GroupGrid" StoreID="GroupStore" Margin="10" ForceFit="true">
                            <TopBar>
                                <ext:Toolbar ID="Toolbar1" runat="server">
                                    <Items>
                                        <ext:Button ID="Button1" runat="server" Text="Save" Icon="TableSave">
                                            <DirectEvents>
                                                <Click OnEvent="SaveGroups_DirectClick">
                                                    <ExtraParams>
                                                        <ext:Parameter Name="GridValues" Mode="Raw" Value="#{GroupGrid}.getRowsValues({selectedOnly : false})" Encode="true"></ext:Parameter>
                                                    </ExtraParams>
                                                </Click>
                                            </DirectEvents>
                                        </ext:Button>
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <ColumnModel runat="server">
                                <Columns>
                                    <ext:Column runat="server" Hidden="true" DataIndex="Id"></ext:Column>
                                    <ext:ComponentColumn runat="server" DataIndex="Description" Header="Description" Editor="true">
                                        <Component>
                                            <ext:TextField runat="server">
                                                <RightButtons>
                                                    <ext:Button ID="Button2" runat="server" Icon="ApplicationEdit" ></ext:Button>
                                                </RightButtons>
                                            </ext:TextField>
                                        </Component>
                                    </ext:ComponentColumn>
                                    <ext:ComponentColumn runat="server" DataIndex="StartDate" Header="StartDate" Editor="true">
                                        <Component>
                                            <ext:DateField runat="server"></ext:DateField>
                                        </Component>
                                    </ext:ComponentColumn>
                                    <ext:ComponentColumn runat="server" DataIndex="EndDate" Header="EndDate" Editor="true">
                                        <Component>
                                            <ext:DateField runat="server"></ext:DateField>
                                        </Component>
                                    </ext:ComponentColumn>
                                </Columns>
                            </ColumnModel>
                        </ext:GridPanel>

unless i use a fixed maxwidth of like 100px on this textbox i can't get it to show properly. is there any other way like using a container and putting a textbox and button inside? but how to do the datalinking to the textbox then?

anyway thanks in advance :)

[Vladimir]

Add the following css rule to the page

.no-padding .x-form-text 
        {
            padding:0px !important;
        }

Add Cls="no-padding" to the textfield

[sp00k]

thank you Vladimir,

that works for the button.

but now the textbox is missing a small part on the left i guess it's like 2 maybe 3px at the text start

also border-left and border-right are missing comes from (.x-grid .row-cmp-cell-ct td)

Thanks already :)

edit:

once i disable:

border-left: none !important; 
border-right: none !important; 
in .x-grid .row-cmp-cell-ct td

and

padding: 1px 5px 2px 5px;

in .x-grid-editor .x-form-text

then it's perfect but why is the class you gave me (padding 0px) acting different than just disabling the other padding i checked and the next padding attribute i find is padding:0; so i don't really know why the input text is moving :/

[sp00k]

i just tried putting a directevent on the rightbutton items but it seems the controls don't exist for ext.net

                        <ext:GridPanel runat="server" ID="GroupGrid" StoreID="GroupStore" Margin="10" ForceFit="true">
                            <TopBar>
                                <ext:Toolbar ID="Toolbar1" runat="server">
                                    <Items>
                                        <ext:Button ID="Button1" runat="server" Text="Save" Icon="TableSave">
                                            <DirectEvents>
                                                <Click OnEvent="SaveGroups_DirectClick">
                                                    <ExtraParams>
                                                        <ext:Parameter Name="GridValues" Mode="Raw" Value="#{GroupGrid}.getRowsValues({selectedOnly : false})" Encode="true"></ext:Parameter>
                                                    </ExtraParams>
                                                </Click>
                                            </DirectEvents>
                                        </ext:Button>
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <ColumnModel runat="server">
                                <Columns>
                                    <ext:Column runat="server" Hidden="true" DataIndex="Id"></ext:Column>
                                    <ext:ComponentColumn runat="server" DataIndex="Description" Header="Description" Editor="true">
                                        <Component>
                                            <ext:TextField runat="server" Cls="no-padding">
                                                <RightButtons>
                                                    <ext:Button runat="server" Icon="ApplicationEdit" >
                                                        <DirectEvents>
                                                            <Click OnEvent="ShowTranslations_Event">
                                                                <ExtraParams>
                                                                    <ext:Parameter Name="row" Mode="Raw" Value="#{GroupGrid}.getRowsValues({selectedOnly : true})" Encode="true"></ext:Parameter>
                                                                </ExtraParams>
                                                            </Click>
                                                        </DirectEvents>
                                                    </ext:Button>
                                                </RightButtons>
                                            </ext:TextField>
                                        </Component>
                                    </ext:ComponentColumn>
                                    <ext:ComponentColumn runat="server" DataIndex="StartDate" Header="StartDate" Editor="true">
                                        <Component>
                                            <ext:DateField runat="server"></ext:DateField>
                                        </Component>
                                    </ext:ComponentColumn>
                                    <ext:ComponentColumn runat="server" DataIndex="EndDate" Header="EndDate" Editor="true">
                                        <Component>
                                            <ext:DateField runat="server"></ext:DateField>
                                        </Component>
                                    </ext:ComponentColumn>
                                </Columns>
                            </ColumnModel>
                            <SelectionModel>
                                <ext:RowSelectionModel></ext:RowSelectionModel>
                            </SelectionModel>
                        </ext:GridPanel>

when i click on one of the rightbuttons it gives me following exception

The control with ID 'button-1026' not found

[HttpException (0x80004005): The control with ID 'button-1026' not found]
Ext.Net.ResourceManager.RaisePostBackEvent(String eventArgument) +1079
System.Web.UI.Page.RaisePostBackEvent(IPostBackEve ntHandler sourceControl, String eventArgument) +13
System.Web.UI.Page.RaisePostBackEvent(NameValueCol lection postData) +9528682
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1724

edit:

also tried with a listener instead of a directevent but then i get record is undefined i only need to take the id with me but even when i don't send anything and check the selection model within the controller then it has no selectedrows at all.

and the ext.net version i'm using is 2.5.2.10697 i don't know if this might help.

[sp00k]

guess it's just impossible with these controls then...

how about using plain html within a component column and binding data to it? is it possible and how to do it?

thx in advance :)

[sp00k]

every idea to test is welcome. still can't seem to figure this out :/

[sp00k]

i had to use imagecommands as workarround... is there any update yet on a fix? or will it be forever bugged? :/