
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
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
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.
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?
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:
C#:
Java Script:
Hope this helps,
Princy.
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
> <
BR
> <
asp:Button
ID
=
"Button2"
Text
=
"Cancel"
runat
=
"server"
CausesValidation
=
"False"
CommandName
=
"Cancel"
><
BR
> </
asp:Button
><
BR
> <
BR
> <
asp:Label
ID
=
"lblTotal"
runat
=
"server"
Text
=
"Total:"
CssClass
=
"lbl_boxlabel"
/><
BR
> <
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:
Thanks,
Princy.
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..
Works beautifully. Thanks a lot for your timely help.
Best wishes for a brilliant 2013..