This is a migrated thread and some comments may be shown as answers.

Change Cell value?

7 Answers 752 Views
Grid
This is a migrated thread and some comments may be shown as answers.
mohsinjk jk
Top achievements
Rank 1
mohsinjk jk asked on 05 Aug 2010, 10:21 AM
Hi,

I want to change a cell value using itemtamplate field. and after this leaving this cell i want to update row values.
For example:

In itemtamplate field I have Quantity of Product. When I change Quantity the Total amount should also change. 

Title Quantity  Price  Amount
ABC 5 100 5000

If change quantity

Title Quantity  Price  Amount
ABC 7 100 7000

It should be change when i leave this quantity cell. Please guide me how i can catch particular cell leave event and how i can update value from other cell.

Regards
Mohsin JK

7 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 05 Aug 2010, 10:56 AM
Hi Moshin,

One suggestion would be attaching onfocusout to input textboxes from code behind and pass the textbox id to the event handler. Then in the event handler, it is possible to calculate the result and assign the value to amount textbox.

Check out the following forum link where you can find code for similar scenario.
Calculate the result for the row from client side


-Shinu.
0
mohsinjk jk
Top achievements
Rank 1
answered on 05 Aug 2010, 11:05 AM
Basically i don't want to open a edit panel inside RadGrid. I just want to edit one value in the same row of grid instead of open whole row.

Any idea? 
0
Accepted
Princy
Top achievements
Rank 2
answered on 06 Aug 2010, 10:43 AM
Hello Mohsin,

I think your requirement is you have one TextBox(for the column 'Quantity') in ItemTemplate of GridTemplateColumn. And when the user changes the value in column 'Quantity' it should reflect on column value 'Amount'. If that the case you can try the following code snippet.

ASPX:
<telerik:GridTemplateColumn>
    <ItemTemplate>
        <telerik:RadTextBox ID="RadTextBox1" runat="server" Text='<%#Eval("Quantity") %>'>
        </telerik:RadTextBox>
    </ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server" Text='<%#Eval("Prize") %>'></asp:Label>
    </ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn>
    <ItemTemplate>
        <asp:Label ID="Label2" runat="server" Text='<%#Eval("Amount") %>'></asp:Label>
    </ItemTemplate>
</telerik:GridTemplateColumn>

C#:
protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
  {
   if (e.Item is GridDataItem)
    {
      GridDataItem item=(GridDataItem)e.Item;
      RadTextBox txtQuantity = (RadTextBox)item.FindControl("RadTextBox1");
      Label lblPrize = (Label)item.FindControl("Label1");
      Label lblAmount = (Label)item.FindControl("Label2");
      txtQuantity.Attributes.Add("onblur", "return show('" + txtQuantity.ClientID + "','" + lblPrize.ClientID + "','" + lblAmount.ClientID + "')"); 
    }
  }

Java Script:
<script type="text/javascript">
     function show(txtId, lbl1Id, lbl2Id)
     {
        var textQuantity = $find(txtId);
        var lblPrize = document.getElementById(lbl1Id);
        var lblAmount = document.getElementById(lbl2Id);
        lblAmount .innerHTML = parseInt(textQuantity.get_value()) * parseInt(lblPrize.innerHTML);
      
</script>

Hope this helps,
Princy.
0
mohsinjk jk
Top achievements
Rank 1
answered on 11 Aug 2010, 11:40 AM
thanks dear
0
Sabaratnam
Top achievements
Rank 1
answered on 14 Dec 2012, 10:20 PM
Hi I have a similar request and looking for some guidance wrt an embedded hierarchical grid.
I have a simple grid with a Master and an embedded DetailTables/GridTableView.
I have to access the 'cells' of one of the columns of the embedded GridTableView for client side validation using JavaScript.
I have added an "OnBlur" event triger in ItemCreated of the RadGrid as shown in C# below:-
        protected void rgSampleData_ItemCreated(object sender, GridItemEventArgs e)
            {
                if (e.Item is GridDataItem && e.Item.OwnerTableView.Name == "SampleErrorCauseTotal")
                {
                    GridDataItem item = (GridDataItem)e.Item;
                    GridTableView tableView = (GridTableView)item.NamingContainer;
                    int masterIndex = (tableView.ParentItem as GridDataItem).ItemIndex;
                    RadNumericTextBox txtbox1 = (RadNumericTextBox)item.FindControl("ErrorCauseTotal");
                    txtbox1.Attributes.Add("OnBlur", "UpdateCauseTotal(this,'" + item.ItemIndex + "','" + masterIndex + "');");
                 }
           } .

My Javascript just to access and display the cells of the column goes like
                    function UpdateCauseTotal(obj, index, masterIndex)
                        {
                 var grid = $find("<%=rgSampleData.ClientID %>");
                 var totalAmount = 0;
                 var MasterTable = grid.get_masterTableView();
                 var dataItems = MasterTable.get_dataItems();
                 for (var i = 0; i < dataItems.length; i++)
                     {
                     if (dataItems[i].get_nestedViews().length > 0)
                         {
                         var nestedView = dataItems[i].get_nestedViews()[1];
                         for (var j = 0; j < nestedView.get_dataItems().length; j++) {
                             var ct = nestedView.get_dataItems()[j].get_cell('"ErrorCauseTotal"');   
                             alert("Cell value is = ct.get_value()) ;
                         }
                     }
                 }  





<
P>           
<telerik:RadGrid
<BR>                       
runat="server"<BR>                       
ID="rgSampleData"<BR>                       
Skin="Windows7"
<BR>                       
AutoGenerateColumns="false"
<BR>                       
AllowPaging="true"<BR>                       
PageSize="10"<BR>                       
EnableViewState="true"
<BR>                       
AllowFilteringByColumn="true"<BR>                       
OnPreRender="rgSampleData_PreRender"
<BR>                       
OnNeedDataSource="rgSampleData_NeedDataSource"<BR>                       
OnItemCommand="rgSampleData_ItemCommand"<BR>                       
OnUpdateCommand="rgSampleData_UpdateCommand"<BR>                       
OnInsertCommand="rgSampleData_InsertCommand"<BR>                       
OnItemDataBound="rgSampleData_ItemDataBound"<BR>                       
OnItemCreated="rgSampleData_ItemCreated"<BR>                       
OnDetailTableDataBind="rgSampleData_DetailTableDataBind"<BR>                       
OnItemUpdated="rgSampleData_ItemUpdated"<BR>                       
><BR>                       
<PagerStyle
Mode="Slider"></PagerStyle><BR>                       
<MasterTableView
IsFilterItemExpanded="true"<BR>                               
Name="Master"<BR>                               
datakeynames="PICPSampleId"<BR>                               
bordercolor="LightGray" 
<BR>                               
CommandItemDisplay="Top"<BR>                               
editmode="InPlace"><BR>                           
<CommandItemTemplate><BR>                               
<telerik:RadToolBar runat="server" ID="RadToolBar1" CssClass="customToolBar"
<BR>                               
OnButtonClick="RadToolBar1_ButtonClick"
AutoPostBack="true"><BR>                                   
<Items><BR>                                       
<telerik:RadToolBarButton Text="Apply filter" CommandName="FilterRadGrid"
<BR>                                       
ImageUrl="~/images/stock_filter_data_by_criteria.ico"><BR>                                       
</telerik:RadToolBarButton></P>
<P>                                   
<telerik:RadToolBarButton
<BR>                                       
Text="Add new"
<BR>                                       
CommandName="InitInsert"<BR>                                       
ImageUrl="~/images/add.gif"
<BR>                                       
Visible='<%# !rgSampleData.MasterTableView.IsItemInserted
%>'><BR>                           
<BR>                                   
</telerik:RadToolBarButton><BR>                                   
<telerik:RadToolBarButton Text="Refresh"
CommandName="RebindGrid"<BR>                                    
ImageUrl="~/images/action_refresh.gif"><BR>                                    
</telerik:RadToolBarButton></P>
<P>                                   
</Items><BR>                               
</telerik:RadToolBar><BR>                           
</CommandItemTemplate><BR>                           
<Columns><BR>                               
<telerik:GridButtonColumn ButtonType="ImageButton"
CommandName="ViewSampleDeatils" Text="View
Sample"<BR>                               
ImageUrl="~/images/1x1.gif"
UniqueName="sampleDetailsIcon"><BR>                               
<HeaderStyle Width="3%"
/><BR>                               
<ItemStyle Width="3%" HorizontalAlign="Left" CssClass="SmallLink"
/><BR>                               
</telerik:GridButtonColumn>
<BR>                               
<telerik:GridEditCommandColumn
UniqueName="EditCommandColumn"><BR>                                   
<HeaderStyle Width="60px"
><BR>                                   
</HeaderStyle>                       
<BR>                               
</telerik:GridEditCommandColumn>                                          
<BR>                               
<telerik:GridNumericColumn DataField="PICPSampleId" HeaderText="PICP Sample
Id" DataType="System.Int32"
Visible="false"><BR>                                   
<ItemStyle Width="0%" HorizontalAlign="Center" CssClass="SmallLink"
/><BR>                               
</telerik:GridNumericColumn><BR>                               
<telerik:GridDateTimeColumn DataField="ConductedDate" HeaderText="Conducted
On"
DataFormatString="{0:dd/MM/yyyy}"><BR>                                   
<HeaderStyle Width="15%"
/><BR>                                   
<ItemStyle Width="15%" HorizontalAlign="Left" CssClass="SmallLink"
/><BR>                               
</telerik:GridDateTimeColumn><BR>                               
<telerik:GridNumericColumn DataField="PopulationSize" HeaderText="Population"
DataType="System.Int32"><BR>                                   
<HeaderStyle Width="5%" HorizontalAlign="Center"
/><BR>                                   
<ItemStyle Width="5%" HorizontalAlign="Center" CssClass="SmallLink"
/><BR>                               
</telerik:GridNumericColumn><BR>                               
<telerik:GridNumericColumn DataField="SampleSize" HeaderText="Sample"
DataType="System.Int32"><BR>                                   
<HeaderStyle Width="5%" HorizontalAlign="Center"
/><BR>                                   
<ItemStyle Width="5%" HorizontalAlign="Center" CssClass="SmallLink"
/><BR>                               
</telerik:GridNumericColumn>                          
<BR>                               
<telerik:GridButtonColumn CommandName="Delete" ConfirmText="Are you sure you
want to permanently delete this Point of Contact?" Text="Delete"
UniqueName="Delete"
HeaderStyle-Width="6%">                      
<BR>                               
</telerik:GridButtonColumn>                                                    
<BR>                           
</Columns><BR>                           
<DetailTables><BR>                               
<telerik:GridTableView DataKeyNames="PICPSampleId"
<BR>                                   
Name="SampleErrorCauseTotal"
<BR>                                   
Width="100%"
<BR>                                   
HierarchyLoadMode="Client"<BR>                                   
runat="server"
<BR>                                   
ShowFooter="True"<BR>                                   
AutoGenerateColumns="False"<BR>                                   
AllowFilteringByColumn="false"><BR>                                   
<ParentTableRelation><BR>                                       
<telerik:GridRelationFields DetailKeyField="PICPSampleId"
MasterKeyField="PICPSampleId"
/><BR>                                   
</ParentTableRelation><BR>        
<EditFormSettings  CaptionFormatString="Edit User:
{0}"<BR>        
CaptionDataField="Display name"
EditFormType="Template"><BR>        
<EditColumn UniqueName="EditCommandColumn2"
><BR>        
</EditColumn>                            
<BR>        
<FormTemplate><BR>        
<table style="width:
350px"><BR>      <tr><BR>         
<td><BR>       <asp:Button
ID="Button1" Text="Save Changes" runat="server" CausesValidation="False"
CommandName="SaveChanges"><BR>       </asp:Button>&nbsp;<BR>       <asp:Button
ID="Button2" Text="Cancel" runat="server" CausesValidation="False"
CommandName="Cancel"><BR>       </asp:Button><BR>       &nbsp;&nbsp;<BR>       <asp:Label
ID="lblTotal" runat="server" Text="Total:" CssClass="lbl_boxlabel"
/><BR>       &nbsp;<BR>       <asp:TextBox
ID="txtCausesTotal" runat="server" readonly="true" cssclass="largetxb"
width="50px" /></P>
<P>         
</td><BR>      </tr><BR>        
</table>                           
<BR>        
</FormTemplate><BR>     </EditFormSettings><BR>                                   
<Columns><BR>                                       
<telerik:GridBoundColumn DataField="PICPSampleErrorCauseId" Visible="false"
/><BR>                                       
<telerik:GridBoundColumn DataField="PICPSampleId" Visible="false"
/><BR>                                       
<telerik:GridBoundColumn DataField="PICPErrorCauseId"
HeaderText="PICPErrorCauseId" HeaderStyle-Width="5%"
Visible="false"><BR>                                            
<ItemStyle HorizontalAlign="Left" CssClass="GridChildRowSmall" 
/>                              
<BR>                                       
</telerik:GridBoundColumn><BR>                                       
<telerik:GridBoundColumn DataField="ErrorCause" HeaderText="ERROR CAUSES"
HeaderStyle-Width="15%"><BR>                                            
<ItemStyle HorizontalAlign="Left" Width="120px" CssClass="GridChildRowSmall"
/>                              
<BR>                                       
</telerik:GridBoundColumn></P>
<P>     </telerik:GridNumericColumn><BR>      <telerik:GridTemplateColumn 
HeaderText="ERROR CAUSES" HeaderStyle-Width="15%"
><BR>         
<ItemTemplate><BR>          
<telerik:RadNumericTextBox runat="server" ID="ErrorCauseTotal" Text='<%#
Bind( "ErrorCauseTotal")
%>'<BR>          
MinValue="0" MaxValue="99999"  MaxLength="6" 
><BR>           
<NumberFormat GroupSeparator="" DecimalDigits="0" />
<BR>           
</telerik:RadNumericTextBox><BR>         
</ItemTemplate><BR>      </telerik:GridTemplateColumn><BR>        
</Columns><BR>        
<NoRecordsTemplate><BR>      <em>None
to
Display</em><BR>                      
</NoRecordsTemplate>                      
<BR>                               
</telerik:GridTableView><BR>                           
</DetailTables>                                                                             
<BR>                       
</MasterTableView><BR>           
</telerik:RadGrid></P>
0
Princy
Top achievements
Rank 2
answered on 26 Dec 2012, 08:56 AM
Hi,

Try the following javascript to achieve your scenario.

JS:
function UpdateCauseTotal(obj, index, masterIndex)
 {
    var grid = $find("<%=grid.ClientID %>");
    alert(grid.get_detailTables()[0].get_dataItems()[index].findControl("ErrorCauseTotal").get_textBoxValue());
}

Thanks,
Princy.
0
Sabaratnam
Top achievements
Rank 1
answered on 26 Dec 2012, 06:16 PM
Hi Princy,
Works beautifully. Thanks a lot for your timely help. 
Best wishes for a brilliant 2013..           
Tags
Grid
Asked by
mohsinjk jk
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
mohsinjk jk
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Sabaratnam
Top achievements
Rank 1
Share this question
or