What's New?

[CLOSED] [1.0] EditableGrid Apply to selection apply to all

  1. #1
    Feb 23, 2010, 10:50 PM

    [CLOSED] [1.0] EditableGrid Apply to selection apply to all

    I have setup a headerrow with textbox,etc for editing in my grid view. And a button bar that has an apply to all button and apply to selection.

    I want to use the value in the headerrow for a given column to apply that value to all the rows editors for that column in the EDITABLEGRID.

    i was trying to use some javascript like this below to find the CellEditor and set its value. It appears to get set but never rendered on screen. I need some help understanding how to do this. (i am not really trying to set the STORE at this point either. I would like the store not to get updated until the user hits a save button. And then I want to process this on the server side.)

    function setSelection(grid)
        {
            var rows = grid.getRowsValues({selectedOnly : selection});
            var i=0;
            for(i=0;i<rows.length;i++)
            {
                grid.getColumnModel().getCellEditor(1,i).setValue(col1HeaderEditor.getValue());
             }
        }
  2. #2
    Feb 24, 2010, 6:37 AM

    RE: [CLOSED] [1.0] EditableGrid Apply to selection apply to all

    Hi,

    I am not sure why do you need that functionality with EditableGrid plugin. That plugin allows editing inline therefore editing in the header looks strange

    Anyway, here is the sample which demonstrates load/save record to the header controls
    <%@ Page Language="C#" %>

<%@ Import Namespace="System.Collections.Generic" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.GridPanel1.Store.Primary.DataSource = new List<object>
            {
                new { 
                    Value = 1, 
                    Text = "One"
                },
                new { 
                    Value = 2, 
                    Text = "Two"
                },
                new { 
                    Value = 3, 
                    Text = "Three"
                },
                new { 
                    Value = 4, 
                    Text = "Four"
                },
                new { 
                    Value = 5, 
                    Text = "Five"
                }
            };

            this.GridPanel1.Store.Primary.DataBind();
        }
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    
    <script type="text/javascript">
        function load(grid, save){
            var cols = grid.view.headerRows[0].columns,
                rec = grid.getSelectionModel().getSelected();
            
            for (var colIndex = 0; colIndex < cols.length; colIndex++) {
                var col = cols[colIndex];
                
                if (Ext.isEmpty(col.component) || Ext.isEmpty(col.component.dataIndex, false)) {
                    continue;
                }
                
                if(save){
                    rec.set(col.component.dataIndex, col.component.getValue());
                }
                else{
                   col.component.setValue(rec.get(col.component.dataIndex));
                }
            }
        }
        
        function save(grid){
            load(grid, true);
        }
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server"
            Width="300"
            Height="200"
            Title="EditableGrid lugin">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:JsonReader>
                            <Fields>
                                <ext:RecordField Name="Value" Type="Int" />
                                <ext:RecordField Name="Text" Type="String" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column 
                        Header="Value" 
                        DataIndex="Value" 
                        Width="130" 
                        Sortable="true">
                        <Editor>
                            <ext:NumberField runat="server" AllowBlank="false" />
                        </Editor>
                    </ext:Column>
                    <ext:Column 
                        Header="Text" 
                        DataIndex="Text" 
                        Width="130" 
                        Sortable="true">
                        <Editor>
                            <ext:TextField runat="server" AllowBlank="false" />
                        </Editor>
                    </ext:Column>
                    <ext:Column Width="28" DataIndex="" Sortable="false" MenuDisabled="true" Header="&amp;nbsp;" Fixed="true">
                    </ext:Column>
                </Columns>
            </ColumnModel>
            
            <SelectionModel>
                <ext:RowSelectionModel runat="server">
                    <Listeners>
                        <RowSelect Handler="load(#{GridPanel1});" />
                    </Listeners>
                </ext:RowSelectionModel>
            </SelectionModel>
            
            <View>
                <ext:GridView runat="server">
                    <HeaderRows>
                        <ext:HeaderRow>
                            <Columns>
                                                                
                                <ext:HeaderColumn Cls="x-small-editor">
                                    <Component>
                                        <ext:NumberField ID="ValueEditor" runat="server" DataIndex="Value" >
                                        </ext:NumberField>
                                    </Component>
                                </ext:HeaderColumn>
                                
                                <ext:HeaderColumn Cls="x-small-editor">
                                    <Component>
                                        <ext:TextField ID="TextEditor" runat="server" DataIndex="Text" >
                                        </ext:TextField>
                                    </Component>
                                </ext:HeaderColumn>
                                
                                                              
                                <ext:HeaderColumn AutoWidthElement="false">
                                    <Component>
                                        <ext:Button ID="SaveButton" runat="server" Icon="Disk">
                                            <Listeners>
                                                <Click Handler="save(#{GridPanel1});" />
                                            </Listeners>                                            
                                        </ext:Button>
                                    </Component>
                                </ext:HeaderColumn>
                            </Columns>
                        </ext:HeaderRow>
                    </HeaderRows>
                </ext:GridView>
            </View>
        </ext:GridPanel>
    </form>  
</body>
</html>
  3. #3
    Feb 24, 2010, 4:53 PM

    RE: [CLOSED] [1.0] EditableGrid Apply to selection apply to all

    I tried to analyze what you said and posted to see if was helpful but I can't say I got anywhere useful. the dataindex never works for me. But I see what your trying to say, but haven't had success.

    I attached a screen shot of the look.

    I also think you stated the situation in reverse of what I am trying to do. I also hope the image explains the scenario. The header row is there to allow the input once and have that value be applied to the components below it. (providing more option). They don't want to enter the same value over and over again. The best example here is the data and the crew. enter it once in the header and apply to all fields. then fill in the rest manually.

    I can easily read the value from any object in the header. No concern there. What I can't get to happen is to get the boxes under say "crew" in my table to populate based on the header value for crew. At least not seeing get rendered on the client side. I have seen in javascript that when i setValue and getValue on objects they read correctly but the user can't see them, so i know I am setting the wrong object or component. 
    <ext:Store ID="CleaningStore" runat="server">
            <Proxy>
                <ext:HttpProxy runat="server" Method="POST" Url="Services/Cleanings.asmx/GetCleanings" />
            </Proxy>
            <Reader>
                <ext:XmlReader Record="Cleaning">
                    <Fields>
                        <ext:RecordField Name="id" Type="String" Mapping="ID" />
                        <ext:RecordField Name="system" Type="String" Mapping="SYSTEM" />
                        <ext:RecordField Name="order" Type="String" Mapping="ORDER" />
                        <ext:RecordField Name="sewer_id" Type="String" Mapping="SEWER_ID" />
                        <ext:RecordField Name="from_mh" Type="String" Mapping="FROM_MH" />
                        <ext:RecordField Name="to_mh" Type="String" Mapping="TO_MH" />
                        <ext:RecordField Name="size" Type="String" Mapping="SIZE" />
                        <ext:RecordField Name="length" Type="String" Mapping="LENGTH" />
                        <ext:RecordField Name="material" Type="String" Mapping="MATERIAL" />
                        <ext:RecordField Name="siphon" Type="String" Mapping="SIPHON" />
                        <ext:RecordField Name="o_m_rating" Type="String" Mapping="O_M_RATING" />
                        <ext:RecordField Name="crew" Type="String" Mapping="CREW" />
                        <ext:RecordField Name="frequency" Type="String" Mapping="FREQUENCY" />
                        <ext:RecordField Name="app_date" Type="Date" Mapping="APP_DATE" DateFormat="d" />
                        <ext:RecordField Name="cctv" Type="String" Mapping="CCTV" />
                        <ext:RecordField Name="comment" Type="String" Mapping="COMMENT" />
                    </Fields>
                </ext:XmlReader>
            </Reader>
            <BaseParams>
                <ext:Parameter Name="system" Value="1" Mode="Raw" />
            </BaseParams>
            <Listeners>
            </Listeners>
        </ext:Store>
        <ext:Viewport runat="server">
            <Items>
                <ext:BorderLayout runat="server">
                    <North Split="true">
                        <ext:panel AutoScroll="true"  runat="server" Height="350">
                           <Content>
                            <center>
                            <ext:Image ID="systemimage" runat="server" ImageUrl="" 
                            Height="608" Width="784">
                            </ext:Image>
                            </center>
                           </Content>
                        </ext:panel>
                    </North>
                    <Center>
                    <ext:Panel runat="server" AutoScroll="true">
                    <Items>
                    <ext:GridPanel ID="GridPanel1" Layout="Fit" runat="server"
                        StoreID="CleaningStore" AutoScroll="true" AutoHeight="true"
                                Title="Pipe Cleanings">
                               <Plugins>
                                    <ext:EditableGrid ID="EditGrid" runat="server" Enabled="true">
                                    </ext:EditableGrid>
                                </Plugins>
                                <View>
                                    <ext:GridView ID="GridView2" runat="server" MarkDirty="false">
                                    <HeaderRows>
                                        <ext:HeaderRow>
                                        <Columns>
                                            <ext:HeaderColumn >
                                            <Component>
                                            </Component>
                                            </ext:HeaderColumn>
                                            <ext:HeaderColumn>
                                            <Component>
                                            </Component>
                                            </ext:HeaderColumn>
                                            <ext:HeaderColumn>
                                            <Component>
                                            </Component>
                                            </ext:HeaderColumn>
                                            <ext:HeaderColumn>
                                            <Component>
                                            </Component>
                                            </ext:HeaderColumn>
                                            <ext:HeaderColumn>
                                            <Component>
                                            </Component>
                                            </ext:HeaderColumn>
                                            <ext:HeaderColumn>
                                            <Component>
                                            </Component>
                                            </ext:HeaderColumn>
                                            <ext:HeaderColumn>
                                            <Component>
                                            </Component>
                                            </ext:HeaderColumn>
                                            <ext:HeaderColumn>
                                            <Component>
                                            </Component>
                                            </ext:HeaderColumn>
                                            <ext:HeaderColumn>
                                            <Component>
                                            </Component>
                                            </ext:HeaderColumn>
                                            <ext:HeaderColumn>
                                            <Component>
                                                </Component>
                                            </ext:HeaderColumn>
                                            <ext:HeaderColumn>
                                            <Component>
                                                <ext:TextField id="g1Crew" runat="server"></ext:TextField>
                                            </Component>
                                            </ext:HeaderColumn>
                                            <ext:HeaderColumn>
                                            <Component>
                                                <ext:TextField ID="TextField15" runat="server"></ext:TextField>
                                            </Component>
                                            </ext:HeaderColumn>
                                            <ext:HeaderColumn>
                                            <Component>
                                                <ext:DateField ID="TextField16" Format="MM/dd/yyyy" runat="server">
                                                </ext:DateField>
                                            </Component>
                                            </ext:HeaderColumn>
                                            <ext:HeaderColumn>
                                            <Component>
                                                <ext:Checkbox ID="TextField17" runat="server"></ext:Checkbox>
                                            </Component>
                                            </ext:HeaderColumn>
                                            <ext:HeaderColumn>
                                            <Component>
                                                <ext:TextField ID="TextField18" runat="server"></ext:TextField>
                                            </Component>
                                            </ext:HeaderColumn>
                                        </Columns>
                                        </ext:HeaderRow>
                                    </HeaderRows>
                                    </ext:GridView>
                                </View>
                                <ColumnModel>
                                    <Columns>
                                        <ext:RowNumbererColumn />
                                        <ext:Column  Editable="false" 
                                            Header="ID"
                                            DataIndex="id" Width="20">
                                            <Editor>
                                                <ext:TextField ID="TextField14" runat="server">
                                                </ext:TextField>
                                            </Editor>
                                        </ext:Column>
                                        <ext:Column Editable="false" 
                                            Header="SYSTEM" 
                                            DataIndex="system" Width="55">
                                            <Editor>
                                                <ext:TextField ID="TextField13" runat="server">
                                                </ext:TextField>
                                            </Editor>
                                        </ext:Column>
                                        <ext:Column  Editable="false" 
                                        Header="ORDER" DataIndex="order" Width="55">
                                        <Editor>
                                                <ext:TextField ID="TextField12" runat="server">
                                                </ext:TextField>
                                            </Editor>
                                        </ext:Column>
                                        <ext:Column  Editable="false" 
                                        Header="Sewer_ID" DataIndex="sewer_id" Width="100">
                                        <Editor>
                                                <ext:TextField ID="TextField11" runat="server">
                                                </ext:TextField>
                                            </Editor>
                                        </ext:Column>
                                        <ext:Column  Editable="false" 
                                        Header="FROM_MH" DataIndex="from_mh" Width="100">
                                        <Editor>
                                                <ext:TextField ID="TextField10" runat="server">
                                                </ext:TextField>
                                            </Editor>
                                        </ext:Column>
                                        <ext:Column  Editable="false" 
                                        Header="TO_MH" DataIndex="to_mh" Width="100">
                                        <Editor>
                                                <ext:TextField ID="TextField9" runat="server">
                                                </ext:TextField>
                                            </Editor>
                                        </ext:Column>
                                        <ext:Column  Editable="false" 
                                        Header="SIZE" DataIndex="size" Width="40">
                                        <Editor>
                                                <ext:TextField ID="TextField8" runat="server">
                                                </ext:TextField>
                                            </Editor>
                                        </ext:Column>
                                        <ext:Column  Editable="false" 
                                        Header="LENGTH" DataIndex="length" Width="50">
                                        <Editor>
                                                <ext:TextField ID="TextField7" runat="server">
                                                </ext:TextField>
                                            </Editor>
                                        </ext:Column>
                                        <ext:Column  Editable="false" 
                                        Header="MATERIAL" DataIndex="material"
                                         Width="100">
                                         <Editor>
                                                <ext:TextField ID="TextField6" runat="server">
                                                </ext:TextField>
                                            </Editor>
                                        </ext:Column>
                                        <ext:Column Editable="true" Header="CREW" DataIndex="crew" Width="40">
                                            <Editor>
                                                <ext:TextField ID="TextField1" runat="server">
                                                </ext:TextField>
                                            </Editor>
                                        </ext:Column>
                                        <ext:Column  Editable="true" Header="FREQUENCY" 
                                        DataIndex="frequency" Width="75">
                                            <Editor>
                                                <ext:TextField ID="TextField2" runat="server">
                                                </ext:TextField>
                                            </Editor>
                                        </ext:Column>
                                        <ext:DateColumn Editable="true" Header="APP_DATE"
                                         Format="d" 
                                           DataIndex="app_date" Width="75">
                                            <Editor>
                                                <ext:DateField ID="DateField1" runat="server">
                                                </ext:DateField>
                                            </Editor>
                                        </ext:DateColumn>
                                        <ext:Column  Editable="true" Header="CCTV" 
                                        DataIndex="cctv" Width="40">
                                           <Editor>
                                                <ext:Checkbox ID="Checkbox1" runat="server">
                                                </ext:Checkbox>
                                            </Editor>
                                        </ext:Column>
                                        <ext:Column ColumnID="COMMENT"  Editable="true" 
                                        Header="COMMENT" DataIndex="comment" Width="75">
                                            <Editor>
                                                <ext:TextField ID="TextField3" runat="server">
                                                </ext:TextField>
                                            </Editor>
                                        </ext:Column>
                                    </Columns>
                                </ColumnModel>
                                <LoadMask ShowMask="true" />
                                <SaveMask ShowMask="true" />
                                <SelectionModel>
                                    <ext:RowSelectionModel SingleSelect="false" ID="RowSelectionModel2" runat="server" />
                                </SelectionModel>
                                <TopBar>
                                    <ext:Toolbar runat="server">
                                        <Items>
                                            <ext:Button StandOut="true" ID="Button3" runat="server" Icon="TableSave" Text="Save"></ext:Button>
                                            <ext:ToolbarSeparator runat="server"></ext:ToolbarSeparator>
                                            <ext:Button StandOut="true" runat="server" Icon="TableColumnAdd" Text="Apply to All">
                                            <Listeners>
                                                <Click Handler="setSelection(#{GridPanel1},null,null,true);" />
                                            </Listeners>
                                            </ext:Button>
                                            <ext:Button StandOut="true" ID="Button2" runat="server" Icon="TableRowInsert" Text="Apply to Selection"></ext:Button>
                                            <ext:ToolbarFill runat="server"></ext:ToolbarFill>
                                            <ext:Button StandOut="true" icon="ControlRewind" text="Previous" runat="server">
                                            <Listeners>
                                            <Click Handler="#{GridPanel1}.hide();#{GridPanel2}.show();" />
                                            </Listeners>
                                            </ext:Button>
                                            <ext:Button StandOut="true" icon="ControlFastforward" text="Next" runat="server">
                                            <Listeners>
                                            <Click Handler="#{GridPanel1}.hide();#{GridPanel2}.show();" />
                                            </Listeners>
                                            </ext:Button>
                                        </Items>
                                    </ext:Toolbar>
                                </TopBar>
                            </ext:GridPanel>
                     </Items>
                    </ext:Panel>
                       </Center>
                </ext:BorderLayout>
            </Items>
        </ext:Viewport>
  4. #4
    Feb 24, 2010, 5:08 PM

    RE: [CLOSED] [1.0] EditableGrid Apply to selection apply to all

    Hi,

    Did you miss the screenshot?
    I amnot sure why my sample doen't satisfy your requirements? It shows how to move data from header's controls to the selected row. If you need apply to the all selected rows then get selections and apply for each row
    // get selections - return array of the rows
    GridPanel1.getSelectionModel().getSelections()

    If I misunderstood you then please correct me
  5. #5
    Feb 24, 2010, 5:49 PM

    RE: [CLOSED] [1.0] EditableGrid Apply to selection apply to all

    Vladimir,

    Ok we just solved it.

    Misunderstanding on grid display and store. i thought the view of the data grid would just have the columns that you bound to the grid. and then you could loop that view and update the records for a dirty view.

    Your code didn't work the same as mine didn't work because the header index do not match the store index.

    there are two columns that get omitted in my sample do to the users role in the grid. which now explains why I was seeing valid values in javascript but on to the user.

    I misunderstood your example as well some.

    Thank you again, it was helpful to talk through even though a none issue.

    I appreciate your help as always.


Similar Threads

  1. m.apply is not a function
    By Rupesh in forum 1.x Help
    Replies: 0
    Last Post: Apr 30, 2012, 12:31 PM
  2. Can not apply layout using RenderExtPartial
    By zhangjiagege in forum 1.x Help
    Replies: 2
    Last Post: Mar 04, 2012, 2:21 PM
  3. how to apply datasource to combobox
    By moa1961 in forum 1.x Help
    Replies: 1
    Last Post: Dec 21, 2010, 9:58 AM
  4. [CLOSED] how to apply themes
    By yobnet in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 22, 2010, 12:39 PM
  5. [CLOSED] Css apply
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Apr 30, 2009, 10:20 AM

Posting Permissions