[ASP.NET]C 1 Webgridで編集と計算を実現

WebGrid/GridViewなどのコントロールでは、カラムを編集して計算するアプリケーションによく遭遇します.以下は経験です.
アプリケーション要件
次のコードは実際と一致しない可能性があります.本来はC 1 WebGridとC 1 WebNumbericEditを使用しているからです.

   1: <C1WebGrid:C1WebGrid ID="cwgRealSingle" runat="server" 

   2:                                 AutoGenerateColumns="False" BackColor="White"

   3:                                 BorderStyle="Solid" BorderWidth="1px" BorderColor="ActiveBorder" CallbackOptions="Sorting" CellPadding="3"

   4:                                 Font-Names="Verdana" Font-Size="11px" Width="100%" Height="100%" 

   5:                                 CssClass="gridView" onitemcreated="cwgRealSingle_ItemCreated" 

   6:                                 oneditingcommand="cwgRealSingle_EditingCommand" 

   7:                                 oncancelingcommand="cwgRealSingle_CancelingCommand" 

   8:                                 onupdatingcommand="cwgRealSingle_UpdatingCommand">

   9:                                 <footerstyle backcolor="White" />

  10:                                 <selecteditemstyle backcolor="#669999" forecolor="White" BorderColor="AliceBlue" BorderWidth="1px" BorderStyle="Solid"/>                  

  11:                                 <Columns>

  12:                                     <C1WebGrid:C1TemplateColumn Visible="False" HeaderText="    ">

  13:                                         <ItemTemplate>

  14:                                             <asp:Label ID="lblItemName" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.itemname") %>' Width="80%"></asp:Label>

  15:                                         </ItemTemplate>                                   

  16:                                     </C1WebGrid:C1TemplateColumn>

  17:                                     <C1WebGrid:C1BoundColumn DataField="workProcId" Visible="False" HeaderText="    "></C1WebGrid:C1BoundColumn>

  18:                                     <C1WebGrid:C1BoundColumn DataField="workprocname" HeaderText="    " 

  19:                                         RowMerge="Free" ReadOnly="True"></C1WebGrid:C1BoundColumn>

  20:                                     <C1WebGrid:C1TemplateColumn HeaderText="    " RowMerge="Restricted">

  21:                                         <EditItemTemplate>

  22:                                            <c1i:c1webnumericedit id="txtOutput" runat="server" width="92%" updownalign="None" text='<%# DataBinder.Eval(Container, "DataItem.Output") %>'

  23:                                             maxvalue="1E+28" height="22px" __designer:wfdid="w2" OnClientTextChanged="calcTotal(this);" ></c1i:c1webnumericedit>                                        

  24:                                         </EditItemTemplate>

  25:                                         <ItemTemplate>

  26:                                            <asp:Label ID="lblOutput" runat="server" Width ="80%" Text='<%# DataBinder.Eval(Container, "DataItem.Output") %>'></asp:Label>

  27:                                         </ItemTemplate>                                        

  28:                                     </C1WebGrid:C1TemplateColumn>                                    

  29:                                     <C1WebGrid:C1BoundColumn DataField="energyid" HeaderText="    " Visible="False"></C1WebGrid:C1BoundColumn>

  30:                                     <C1WebGrid:C1BoundColumn DataField="energyname" HeaderText="    " 

  31:                                         ReadOnly="True"></C1WebGrid:C1BoundColumn>

  32:                                     <C1WebGrid:C1BoundColumn DataField="keyname" HeaderText="    " Visible="False"></C1WebGrid:C1BoundColumn>

  33:                                     <C1WebGrid:C1BoundColumn DataField="Propertyname" HeaderText="  " 

  34:                                         ReadOnly="True"></C1WebGrid:C1BoundColumn>

  35:                                     <C1WebGrid:C1BoundColumn DataField="Compute_Consingel" DataFormatString="{0:0.00}" 

  36:                                         HeaderText="    " ReadOnly="True">

  37:                                     </C1WebGrid:C1BoundColumn>

  38:                                     <C1WebGrid:C1TemplateColumn HeaderText="    ">

  39:                                         <EditItemTemplate>

  40:                                             <table>

  41:                                                <tr>

  42:                                                    <td>

  43:                                                          <asp:DropDownList ID="ddlConsumpt" runat="server" OnSelectedIndexChanged="ddlConsumpt_SelectedIndexChanged" AutoPostBack="true" Width="120px"></asp:DropDownList>

  44:                                                    </td>

  45:                                                    <td>

  46:                                                           <c1i:c1webnumericedit id="txtConsumpt" runat="server" width="92%" updownalign="None" text='<%# DataBinder.Eval(Container, "DataItem.Plan_Consingel") %>'

  47:                                             maxvalue="1E+28" height="22px" __designer:wfdid="w2" OnClientTextChanged="calcTotal(this);" ></c1i:c1webnumericedit>   

  48:                                                     </td>

  49:                                                 </tr>  

  50:                                             </table>                                   

  51:                                         </EditItemTemplate>

  52:                                         <ItemTemplate>

  53:                                            <asp:Label ID="lblPlan_cons" runat="server" Width ="80%" Text='<%# DataBinder.Eval(Container, "DataItem.Plan_Consingel") %>'></asp:Label>

  54:                                         </ItemTemplate>

  55:                                     </C1WebGrid:C1TemplateColumn>

  56:                                     <C1WebGrid:C1TemplateColumn HeaderText="   ">

  57:                                         <EditItemTemplate>

  58:                                             <asp:TextBox ID="txtValues" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Values") %>' Width="80%"></asp:TextBox>

  59:                                         </EditItemTemplate>

  60:                                         <ItemTemplate>

  61:                                             <asp:Label ID="lblValues" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Values") %>' Width="80%"></asp:Label>

  62:                                         </ItemTemplate>

  63:                                     </C1WebGrid:C1TemplateColumn>

  64:                                     <C1WebGrid:C1EditCommandColumn EditText="  " HeaderText="  " CancelText="  " 

  65:                                         UpdateText="  ">

  66:                                     </C1WebGrid:C1EditCommandColumn>

  67:                                 </Columns>

  68:                                 <itemstyle verticalalign="Middle" horizontalalign="Center" BorderColor="Control" />

  69:                                 <pagerstyle backcolor="White" horizontalalign="Left" />

  70:                                 <headerstyle font-bold="True" forecolor="White" verticalalign="Middle" cssclass="gt" />

  71:                             </C1WebGrid:C1WebGrid>

トリガ計算
C 1 WebGridでは、C 1 WebNumbericEditコントロールのOnClientValueChangedイベントを直接使用できます.コードは次のとおりです.

   1: OnClientTextChanged="calcTotal(this);" 

処理するJSスクリプトは以下の通りです.

   1: <script type="text/javascript">

   2:         function calcTotal(source )

   3:         {

   4:             var row_id = source.id.substr(0, source.id.lastIndexOf('_') + 1);

   5:             var textbox1 = document.getElementById(row_id + 'txtOutput');

   6:             var textbox2 = document.getElementById(row_id + 'txtConsumpt');

   7:             var label = document.getElementById(row_id + 'txtValues');

   8:             label.value = Number(textbox1.value) * Number(textbox2.value);

   9:         }

  10:     </script>

そうでなければ、TextBoxのクライアントイベント(実際にはこの時点でTextBoxは既にInputタグに置き換えられているが、Inputのイベントしか使用できない.OnTextChangedイベントを直接使用できるという)を処理する必要がある.つまりGridViewのRowDataBoundイベントを処理する.次のコードは、編集時にドロップダウン・ボックスに値をバインドする必要がある場合に使用します.TextBoxの値変更を追加するだけであれば、以下の注記のコードのようにtxtUnitを追加することができる.Attributes.Add(“onblur”,"'onblur”).

   1:  

   2:     protected void cwgRealSingle_ItemCreated(object sender, C1ItemEventArgs e)

   3:     {

   4:         if (e.Item.ItemType == C1.Web.C1WebGrid.C1ListItemType.EditItem)

   5:         {

   6:             DropDownList ddl = e.Item.Cells[9].FindControl("ddlConsumpt") as DropDownList;

   7:             if (ddl == null) return;

   8:  

   9:             //     

  10:             //ddl.Attributes.Add("onchange","changeddl(this);");

  11:  

  12:             //              

  13:             PlanComputeV compute = e.Item.DataItem as PlanComputeV;

  14:  

  15:             BindDropDown(ddl, compute);

  16:         }

  17:     }

ドロップダウンボックスの処理イベントでは、SelectedIndexChangedイベントは、保存ボタンをクリックして再送をコミットした場合にのみトリガーされるため、以下の方法が使用されます.
1.C 1 WebGridのAutoPostBackイベントをTrueに設定する.
2.スクロールバーの位置を保存するために、ページを設定したM i n t i n S t r o l l PositionOnPostbackをTrueとします.
このようにドロップダウンすると明らかなページ更新操作があり、データ量が大きい場合やネットワークが悪い場合は性能が問題となり、改善が待たれる.UpdatepanelでGridViewを含めて一時的に解決できます.
 
 
問題を残す

RowDataBoundとRowCreatedイベントの違いは?

非編集フィールドの場合、編集時にデータを表示するにはReadonlyをTrueに設定する必要がありますか?

VS 2008では、RowUpdatingイベントでLabelの値を取ることができず(TextBoxなどで可能)、Requestを使用する.Formも入手できませんが、VS 2005では可能だそうです.