Asp.net-fineui Development Practice-10

Nested grid, Singles month Big broadcast, do not hide tucked. Really write bad, not ashamed to hide ah ~ only to consider the display of sort changes or whatever!

Extension line is how I came out, I really did not understand, but to achieve the effect there are methods, first think about, 1. The nested grid data should be dynamic, I only know in the back of the tie, the event is triggered by the foreground, that is, the ID is passed backstage on the line. 2. A drop-down to generate a grid, background generation to the front desk I will not, the front desk with ExtJS generated too complex, to write a lot of ExtJS native. 3. Combined with the above two points of the approximate code is this, the foreground trigger ID to the background, the background binding data, in the foreground copy of the existing control, display. Start 1. Prepare a grid, then do not write, prepare row extension columns

            <f:templatefield columnid= "GridItem" hidden= "true" renderasrowexpander= "true" >                <ItemTemplate>                    <div runat= "Server" id= "Divitem" class= "Expander" >                    </div>                </ItemTemplate>            < /f:templatefield>

　　

Copy the extended grid to Id=divitem when each line is expanded. 2. Trigger Event API really did not see, found on the Internet, to take over to use,

            F (' <% =grid1.clientid%> '). View.on (' Expandbody ', function (Rownode, record, Expandrow, eopts) {                //upload to background, parameter is row ID, row bound data ID                f.customevent (' griditem_ ' + rownode.id + ' _ ' + record.get (' ItemId '));            });

　　

3. Prepare an extended grid It's OK, I put it in the panel. JQ is designed to control the style of the Grid2.

    <f:panel runat= "Server" id= "PanelGrid1" height= "0px" hidden= "false" > <Items> <f:grid Id= "Grid2" width= "200px" runat= "Server" showborder= "false" showgridheader= "true" showheader= "false" Allowco lumnlocking= "True" > <Columns> <f:templatefield width= "60px" headertext= "Serial number" &                        Gt <ItemTemplate> <asp:label runat= "server" text= ' <%# Container.dataitemindex + 1%&gt ;‘                    ></asp:Label> </ItemTemplate> </f:TemplateField> <f:boundfield runat= "Server" headertext= "height" datafield= "Shengao"/> <f:boundfield Run at= "Server" headertext= "Weight" datafield= "Tizhong"/> <f:boundfield runat= "Server" headertext= "low blood pressure" datafield= "Xueyadi"/> <f:boundfield runat= "Server" headertext= "high blood pressure" datafield= "Xueyagao"/&Gt </Columns> </f:Grid> </Items> </f:Panel>

　　

        F.ready (function () {            F (' <% =grid2.clientid%> '). Autowidth = true;            F (' <% =grid2.clientid%> '). Autoheight = true;            F (' <% =grid2.clientid%> '). SetWidth (f (' <% =grid1.clientid%> '). GetWidth ()-+);        });

　　

4. Prepare the Copy method just said the foreground copy, two, one is ExtJS can copy grid2 element and then display to the specified location, did not try to come out, really no time will. The second method is the core of the whole process is the most lazy place, directly copy HTML, copy HTML The biggest problem is the ID, two ID the same ExtJS will be chaotic, fortunately he only recognized one, I put PanelGrid1 on the Grid1 above, Backstage found Grid2 is in the panel, copy HTML will also copy Grid2 all properties, if grid2.hidden=ture that also copied past, do not show, so PanelGrid1 height=0, is hidden meaning. Another important is to get the HTML copy with JQ to find the source and target, directly on the code, we do not have to find

        function Showgirditme (ROWID) {            //select row hidden column id,rowid from background            var itemid = $ (' # ' + rowid). Find (' div. Expander '). attr (' Id ');            Copy the HTML            $ (' # ' + itemid). HTML ($ (' #<% =panelgrid1.clientid%>-innerct '). html ());        }

　　

Manual trigger Showgirditme Normal, rowid where, in the event received. There is also a closing event that still falls off the copy of the thing, saving the land,

            F (' <% =grid1.clientid%> '). View.on (' Collapsebody ', function (Rownode, record, Expandrow, eopts) {                var itemid = $ (' # ' + rownode.id). Find (' div. Expander '). attr (' id ');                $ (' # ' + itemid). html (');            });

　　

5. Background trigger the background method, the method is typed out

            if (E.eventargument.indexof ("griditem_") >= 0) {string rowid = E.eventargument.s Plit ('_') [1].                ToString (); String id = E.eventargument.split ('_') [2].                ToString ();                DataTable table = getdatatable (); datarow[] Drs = table.                Select ("id = '" + ID + "'");                DataTable dt = new DataTable (); DT = table.                Clone (); foreach (DataRow Dr in Drs) {//Analog data dt. Rows.Add (Dr.                    ItemArray); Dt. Rows.Add (Dr.                    ItemArray); if (Convert.ToInt32 (ID) >102) {dt. Rows.Add (Dr.                        ItemArray); Dt. Rows.Add (Dr.                    ItemArray);                }}//bind grid2.datasource = DT;                Grid2.databind (); Note the delay method string sc = "window.settimeout (function () {Showgirditme ('" + rowID + "');},100);";            FineUI.PageContext.RegisterStartupScript (SC); }

　　

is to get the data, bind, but see there is a settimeout method, because ExtJS is lazy loading, he will first execute JS and then bind, so can only bind over in the execution of replication, this is a small trick to deal with. No, the last figure should also pay attention to the nested grid point, because one is the choice of the Grid1 line, should be the style can be adjusted, do not get, I do not use. Source code, see, have the mood on it, no self-touch It should also have the face to take out also counted the first person, lazy, and so mature (I will) again perfect it.

Asp.net-fineui Development Practice-10