Textbox with rightbuttons in grid componentcolumn

  1. #1

    Textbox with rightbuttons in grid componentcolumn

    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 :)
  2. #2
    Add the following css rule to the page
    .no-padding .x-form-text 
            {
                padding:0px !important;
            }
    Add Cls="no-padding" to the textfield
    Vladimir Shcheglov
    Sr. Developer
  3. #3
    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 :/
    Last edited by Daniil; Aug 01, 2014 at 5:45 AM. Reason: Please use [CODE] tags
  4. #4
    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.
    Last edited by sp00k; Aug 01, 2014 at 12:34 PM.
  5. #5
    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 :)
    Last edited by sp00k; Aug 04, 2014 at 9:16 AM.
  6. #6
    every idea to test is welcome. still can't seem to figure this out :/
  7. #7
    i had to use imagecommands as workarround... is there any update yet on a fix? or will it be forever bugged? :/

Similar Threads

  1. Replies: 4
    Last Post: Dec 11, 2013, 4:01 AM
  2. [CLOSED] textfield + RightButtons
    By John_Writers in forum 2.x Premium Help
    Replies: 4
    Last Post: Jun 03, 2013, 4:51 PM
  3. Replies: 6
    Last Post: Mar 08, 2013, 4:40 PM
  4. Replies: 3
    Last Post: Aug 14, 2012, 12:58 PM
  5. Replies: 1
    Last Post: Dec 25, 2008, 7:32 AM

Posting Permissions