Hi There
I have a situation in which I have grid with numeric column on the web page and I have a numeric column on the web page as well.
I would like to compare the sum of all the grid numeric column values with the value of numeric column on the web page.
For example I have a value of 10,000 on the numeric column on the page and I have four records in the grid with the value 1000, 2000, 4000,2500 total=9500 which is less than 10,000 the value of my numeric column on the web page
And I am going to edit the fourth record (using Edit form mode) with the value say 5000 from 2500. Now the total value is greater than 10000 so I would like to warn my user using client side Java script and put the focus back again inside the grid numeric column so that he can change the value so that the value should not be greater than 10,000
So I would like to know the way how to calculate the total of particular numeric column of all rows including the edited row using Java script on focus out or on update client side event
In short I need to find a way to loop through all the rows including the one I am editing on the client side
Your help will be much appreciated
Many thanks
Syed
11 Answers, 1 is accepted
For achieving such functionality you could handle the client-side OnCommand event of the grid when the args.get_commandName() is "Update", get reference to the newly entered value and traverse through every data item to sum their values.
For your convenience I have prepared a sample page with the above approach. Please give it a try and see if it works for your scenario.
Regards,
Konstantin Dikov
Telerik

Hi There
Thanks for your reply and it is working but I need to do this action while inserting the record not just updating. Can you please let me know how would I do this while inserting new record to check all the rows plus the new row which is about to insert
Thanks
Syed
I have modified my previously attached project, so it could work with inserting too. Please refer to the attached sample page and see if it works as expected on your end.
Hope that helps.
Regards,
Konstantin Dikov
Telerik

Great, it worked
Thanks
Syed

Can you please guide me how to access the telerik:GridDropDownColumn value inside both insert as well as Edit form as You have did in the above attached sample
if I use the following code using your logic
var dataItems = sender.get_masterTableView().get_dataItems();
var insertForm = sender.MasterTableView.get_insertItem();
var PhaseIDValue = $telerik.findControl(insertForm, "RNTB_ProjectPhaseID").get_value();
alert(PhaseIDValue);
It always show me the null value.
can you please give some insight to this and what is that RNTB_ stand for which you have put inside your code.
Please elaborate further
I will much appreciate that.
Many thanks
Syed Qazafi
RNTB_ is a prefix added to the editor for a GridNumericColumn. Actually, the end of the editor ID is generated by "RNTB_" plus the column UniqueName or the DataField if the UniqueName is not specified.
You should have in mind that for different columns, specific to the column editor will be used and the prefix will differ. For an example, for a simple GridBoundColumn a TextBox control will be used for editing and the prefix will be "TB". For the GridDropDownColumn the prefix is "RCB" with RadComboBox as editor and "DDL" for DropDownList.
Finally, for template columns you could use directly the ID set to the edit control within the EditItemTemplate.
If in some cases you are not sure what the prefix is, you could always inspect the generated HTML when you open an item for edit/insert and see the ID for the editor.
Hope that helps.
Regards,
Konstantin Dikov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Hi Konstantin
Thanks for your reply, but this does not help. I have
tried using your example but I still get null if I use "DDL_ProjectPhaseID"
Please have a look on my html for Grid
<
telerik:RadGrid
ID
=
"GRDProjectPhaseInfo"
OnItemCreated
=
"GRDProjectPhaseInfo_ItemCreated"
OnItemDataBound
=
"GRDProjectPhaseInfo_ItemDataBound"
OnInsertCommand
=
"GRDProjectPhaseInfo_InsertCommand"
OnUpdateCommand
=
"GRDProjectPhaseInfo_UpdateCommand"
runat
=
"server"
CellSpacing
=
"0"
DataSourceID
=
"DSProjectPhaseSetupInfo"
GridLines
=
"None"
Skin
=
"Glow"
Style
=
"z-index: 1; left: 820px; top: 445px; position: absolute; height: 329px; width: 840px"
AllowSorting
=
"True"
AutoGenerateEditColumn
=
"True"
>
<
ClientSettings
>
<
Selecting
AllowRowSelect
=
"True"
/>
<
Scrolling
AllowScroll
=
"True"
UseStaticHeaders
=
"True"
/>
<
ClientEvents
OnCommand
=
"GridCommand"
/>
</
ClientSettings
>
<
MasterTableView
AutoGenerateColumns
=
"False"
CommandItemDisplay
=
"Top"
DataKeyNames
=
"ProjectPhaseSetUpID"
DataSourceID
=
"DSProjectPhaseSetupInfo"
>
<
CommandItemSettings
AddNewRecordText
=
"Add Project Phase"
/>
<
Columns
>
<
telerik:GridBoundColumn
DataField
=
"ProjectPhaseSetUpID"
DataType
=
"System.Int32"
Display
=
"False"
FilterControlAltText="Filter
ProjectPhaseSetUpID column"
HeaderText
=
"ProjectPhaseSetUpID"
ReadOnly
=
"True"
SortExpression
=
"ProjectPhaseSetUpID"
UniqueName
=
"ProjectPhaseSetUpID"
>
<
ColumnValidationSettings
>
<
ModelErrorMessage
Text
=
""
/>
</
ColumnValidationSettings
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"PhaseSetUpProgrammeID"
DataType
=
"System.Int32"
Display
=
"False"
FilterControlAltText
=
"Filter ProgrammeID column"
HeaderText
=
"PhaseSetUpProgrammeID"
ReadOnly
=
"True"
SortExpression
=
"PhaseSetUpProgrammeID"
UniqueName
=
"PhaseSetUpProgrammeID"
>
<
ColumnValidationSettings
>
<
ModelErrorMessage
Text
=
""
/>
</
ColumnValidationSettings
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"PhaseSetUpProjectID"
DataType
=
"System.Int32"
Display
=
"False"
FilterControlAltText
=
"Filter ProjectID column"
HeaderText
=
"PhaseSetUpProjectID"
ReadOnly
=
"True"
SortExpression
=
"PhaseSetUpProjectID"
UniqueName
=
"PhaseSetUpProjectID"
>
<
ColumnValidationSettings
>
<
ModelErrorMessage
Text
=
""
/>
</
ColumnValidationSettings
>
</
telerik:GridBoundColumn
>
<
telerik:GridDropDownColumn
DataSourceID
=
"DSProjectPhase"
ListTextField
=
"ProjectPhaseDetailDescription"
ListValueField
=
"ProjectPhaseID"
HeaderText
=
"Phase"
DataField
=
"ProjectPhaseID"
UniqueName
=
"ProjectPhaseID"
DropDownControlType
=
"DropDownList"
AllowAutomaticLoadOnDemand
=
"true"
AllowVirtualScrolling
=
"true"
ShowMoreResultsBox
=
"true"
ItemsPerRequest
=
"10"
EnableEmptyListItem
=
"True"
EmptyListItemValue
=
"-1"
EmptyListItemText
=
"Select a value"
>
<
HeaderStyle
Font-Names
=
"Verdana"
Font-Size
=
"10pt"
Width
=
"250px"
Font-Bold
=
"False"
/>
<
ItemStyle
Font-Names
=
"Verdana"
Font-Size
=
"10pt"
Width
=
"250px"
/>
<
ColumnValidationSettings
EnableRequiredFieldValidation
=
"True"
>
<
RequiredFieldValidator
ErrorMessage
=
"Phase is required Field"
Font-Bold
=
"True"
Font-Names
=
"Verdana"
Font-Size
=
"10pt"
ForeColor
=
"Red"
InitialValue
=
"-1"
SetFocusOnError
=
"True"
ToolTip
=
"Phase is required Field"
>Phase is required Field</
RequiredFieldValidator
>
<
ModelErrorMessage
Text
=
""
></
ModelErrorMessage
>
</
ColumnValidationSettings
>
<
FilterTemplate
>
<
telerik:RadComboBox
ID
=
"RadComboBoxTitle"
Skin
=
"BlackMetroTouch"
DataSourceID
=
"DSProjectPhase"
DataTextField
=
"ProjectPhaseDetailDescription"
DataValueField
=
"ProjectPhaseID"
Height
=
"250px"
AppendDataBoundItems
=
"true"
SelectedValue='<%# TryCast(Container, GridItem).OwnerTableView.GetColumn("ProjectPhaseTypeID").CurrentFilterValue%>'
runat="server" OnClientSelectedIndexChanged="TitleIndexChanged" Font-Names="verdana" Font-Size="12">
<
Items
>
<
telerik:RadComboBoxItem
Text
=
"All"
/>
</
Items
>
</
telerik:RadComboBox
>
<
telerik:RadScriptBlock
ID
=
"RadScriptBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
function TitleIndexChanged(sender, args) {
var tableView = $find("<%# TryCast(Container,GridItem).OwnerTableView.ClientID %>");
tableView.filter("ProjectPhaseTypeID", args.get_item().get_value(), "EqualTo");
}
</
script
>
</
telerik:RadScriptBlock
>
</
FilterTemplate
>
</
telerik:GridDropDownColumn
>
<
telerik:GridNumericColumn
DataField
=
"PhasePercentageofOverallProject"
DataType
=
"System.Int64"
FilterControlAltText
=
"Filter PhasePercentageofOverallProject column"
HeaderText
=
"% of Project"
ReadOnly
=
"false"
SortExpression
=
"PhasePercentageofOverallProject"
UniqueName
=
"PhasePercentageofOverallProject"
MaxLength
=
"12"
AllowFiltering
=
"True"
>
<
ColumnValidationSettings
EnableRequiredFieldValidation
=
"true"
>
<
RequiredFieldValidator
ForeColor
=
"Red"
ErrorMessage
=
"% of Project is required field"
></
RequiredFieldValidator
>
</
ColumnValidationSettings
>
<
HeaderStyle
HorizontalAlign
=
"Left"
Width
=
"100px"
/>
<
ItemStyle
Width
=
"100px"
/>
</
telerik:GridNumericColumn
>
<
telerik:GridTemplateColumn
HeaderText
=
"Start Date"
UniqueName
=
"BaseLineStartDate"
HeaderStyle-HorizontalAlign
=
"Left"
GroupByExpression
=
"HoldiayStartDate Group By HoldiayStartDate"
SortExpression
=
"BaseLineStartDate"
>
<
EditItemTemplate
>
<
telerik:RadDatePicker
ID
=
"dpBaseLineStartDate"
runat
=
"server"
DbSelectedDate='<%# Bind("BaseLineStartDate", "{0:d}")%>'
SharedCalendarID="" MinDate="1900/01/01" ZIndex="10000000" DateInput-DateFormat="MMMM dd, yyyy" Calendar-CultureInfo="en-NZ">
<
ClientEvents
OnDateSelected
=
"DateSelected"
/>
</
telerik:RadDatePicker
>
<
asp:RequiredFieldValidator
ForeColor
=
"Red"
ID
=
"rfvBaseLineStartDate"
runat
=
"server"
ErrorMessage
=
"Baseline Start Date is Require Field"
ControlToValidate
=
"dpBaseLineStartDate"
Display
=
"Dynamic"
></
asp:RequiredFieldValidator
>
</
EditItemTemplate
>
<
ItemTemplate
>
<
asp:Label
ID
=
"lblBaseLineStartDate"
runat
=
"server"
Text='<%# Eval("BaseLineStartDate", "{0:d}")%>' />
</
ItemTemplate
>
<
ItemStyle
Width
=
"20%"
HorizontalAlign
=
"Left"
/>
</
telerik:GridTemplateColumn
>
<
telerik:GridTemplateColumn
HeaderText
=
"Baseline Due Date"
UniqueName
=
"BaseLineDueDate"
HeaderStyle-HorizontalAlign
=
"Left"
GroupByExpression
=
"BaseLineDueDate Group By BaseLineDueDate"
SortExpression
=
"BaseLineDueDate"
>
<
EditItemTemplate
>
<
telerik:RadDatePicker
ID
=
"dpBaseLineDueDate"
runat
=
"server"
DbSelectedDate='<%# Bind("BaseLineDueDate", "{0:d}")%>'
SharedCalendarID="" MinDate="1900/01/01" ZIndex="10000000" DateInput-DateFormat="MMMM dd, yyyy">
<
DateInput
ID
=
"DateInput1"
runat
=
"server"
>
<
ClientEvents
OnLoad
=
"onClientLoadHandler"
/>
</
DateInput
>
</
telerik:RadDatePicker
>
<
asp:RequiredFieldValidator
ForeColor
=
"Red"
ID
=
"rfvBaseLineDueDate"
runat
=
"server"
ErrorMessage
=
"Baseline due Date is Require Field"
ControlToValidate
=
"dpBaseLineDueDate"
Display
=
"Dynamic"
></
asp:RequiredFieldValidator
>
<
asp:CompareValidator
ForeColor
=
"Red"
ID
=
"cvBaseLineDueDate"
runat
=
"server"
Display
=
"Dynamic"
SetFocusOnError
=
"true"
ControlToValidate
=
"dpBaseLineDueDate"
ControlToCompare
=
"dpBaseLineStartDate"
Type
=
"Date"
Operator
=
"GreaterThanEqual"
ErrorMessage
=
"Baseline Due Date must be Greater Then or equal Baseline Start Date"
></
asp:CompareValidator
>
</
EditItemTemplate
>
<
ItemTemplate
>
<
asp:Label
ID
=
"lblBaseLineDueDate"
runat
=
"server"
Text='<%# Eval("BaseLineDueDate", "{0:d}")%>' />
</
ItemTemplate
>
<
ItemStyle
Width
=
"20%"
HorizontalAlign
=
"Left"
/>
</
telerik:GridTemplateColumn
>
<
telerik:GridNumericColumn
DataField
=
"BaseLineCostEstimate"
DataType
=
"System.Int64"
FilterControlAltText
=
"Filter BaseLineCostEstimate column"
HeaderText
=
"Current Year Baseline Cost"
ReadOnly
=
"false"
SortExpression
=
"BaseLineCostEstimate"
UniqueName
=
"BaseLineCostEstimate"
MaxLength
=
"12"
AllowFiltering
=
"True"
>
<
ColumnValidationSettings
EnableRequiredFieldValidation
=
"true"
>
<
RequiredFieldValidator
ForeColor
=
"Red"
ErrorMessage
=
"Baseline Cost Estimate is required field"
></
RequiredFieldValidator
>
</
ColumnValidationSettings
>
<
HeaderStyle
HorizontalAlign
=
"Left"
Width
=
"100px"
/>
<
ItemStyle
Width
=
"100px"
/>
</
telerik:GridNumericColumn
>
<
telerik:GridNumericColumn
DataField
=
"WholeProjectBaseLineCostEstimate"
DataType
=
"System.Int64"
FilterControlAltText
=
"Filter WholeProjectBaseLineCostEstimate column"
HeaderText
=
"Whole Phase Cost Estimate"
ReadOnly
=
"false"
SortExpression
=
"WholeProjectBaseLineCostEstimate"
UniqueName
=
"WholeProjectBaseLineCostEstimate"
MaxLength
=
"12"
AllowFiltering
=
"True"
>
<
ColumnValidationSettings
EnableRequiredFieldValidation
=
"true"
>
<
RequiredFieldValidator
ForeColor
=
"Red"
ErrorMessage
=
"Whole phase Baseline Cost Estimate is required field"
></
RequiredFieldValidator
>
</
ColumnValidationSettings
>
<
HeaderStyle
HorizontalAlign
=
"Left"
Width
=
"100px"
/>
<
ItemStyle
Width
=
"100px"
/>
</
telerik:GridNumericColumn
>
</
Columns
>
</
MasterTableView
>
</
telerik:RadGrid
>
and please have a look on my JavaScript which I m using your sample project file
var dataItems = sender.get_masterTableView().get_dataItems();
var insertForm = sender.MasterTableView.get_insertItem();
var PhaseIDValue = $telerik.findControl(insertForm, "DDL_ProjectPhaseID").get_value();
alert(PhaseIDValue);
Please send me some smaple code to get the value of telerik:GridDropDownColumn both while inserting or editing grid
I will apprecaite that
Thanks
Syed Qazafi

I am still waiting for some response to my problem
Please update, it is urgent
Thanks
Syed
Actually, the issue you are facing is due to the fact that the DropDownList is a asp:DropDownList control and could not be found with $telerik.findControl() method. Instead, the $telerik.findElement() should be used, which will return the Select element.
Following is JavaScript that you will need to get reference to the DropDownList element and retrieve the selected value:
else
if
(args.get_commandName() ==
"PerformInsert"
) {
var
dataItems = sender.get_masterTableView().get_dataItems();
var
insertForm = sender.MasterTableView.get_insertItem();
var
PhaseIDValue = $telerik.findElement(insertForm,
"DDL_ProjectPhaseID"
);
var
selectedValue = PhaseIDValue.options[PhaseIDValue.options.selectedIndex].value;
....
Hope that helps.
Regards,
Konstantin Dikov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Thanks for your response again. I don't think that I am using Asp drop down control, please look the aspx code,
<
telerik:GridDropDownColumn
DataSourceID
=
"DSProjectPhase"
ListTextField
=
"ProjectPhaseDetailDescription"
ListValueField
=
"ProjectPhaseID"
HeaderText
=
"Phase"
DataField
=
"ProjectPhaseID"
UniqueName
=
"ProjectPhaseID"
DropDownControlType
=
"DropDownList"
AllowAutomaticLoadOnDemand
=
"true"
AllowVirtualScrolling
=
"true"
ShowMoreResultsBox
=
"true"
ItemsPerRequest
=
"10"
EnableEmptyListItem
=
"True"
EmptyListItemValue
=
"-1"
EmptyListItemText
=
"Select a value"
>
<
HeaderStyle
Font-Names
=
"Verdana"
Font-Size
=
"10pt"
Width
=
"250px"
Font-Bold
=
"False"
/>
<
ItemStyle
Font-Names
=
"Verdana"
Font-Size
=
"10pt"
Width
=
"250px"
/>
<
ColumnValidationSettings
EnableRequiredFieldValidation
=
"True"
>
<
RequiredFieldValidator
ErrorMessage
=
"Phase is required Field"
Font-Bold
=
"True"
Font-Names
=
"Verdana"
Font-Size
=
"10pt"
ForeColor
=
"Red"
InitialValue
=
"-1"
SetFocusOnError
=
"True"
ToolTip
=
"Phase is required Field"
>Phase is required Field</
RequiredFieldValidator
>
<
ModelErrorMessage
Text
=
""
></
ModelErrorMessage
>
</
ColumnValidationSettings
>
<
FilterTemplate
>
<
telerik:RadComboBox
ID
=
"RadComboBoxTitle"
Skin
=
"BlackMetroTouch"
DataSourceID
=
"DSProjectPhase"
DataTextField
=
"ProjectPhaseDetailDescription"
DataValueField
=
"ProjectPhaseID"
Height
=
"250px"
AppendDataBoundItems
=
"true"
SelectedValue='<%# TryCast(Container, GridItem).OwnerTableView.GetColumn("ProjectPhaseTypeID").CurrentFilterValue%>'
runat="server" OnClientSelectedIndexChanged="TitleIndexChanged" Font-Names="verdana" Font-Size="12">
<
Items
>
<
telerik:RadComboBoxItem
Text
=
"All"
/>
</
Items
>
</
telerik:RadComboBox
>
<
telerik:RadScriptBlock
ID
=
"RadScriptBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
function TitleIndexChanged(sender, args) {
var tableView = $find("<%# TryCast(Container,GridItem).OwnerTableView.ClientID %>");
tableView.filter("ProjectPhaseTypeID", args.get_item().get_value(), "EqualTo");
}
</
script
>
</
telerik:RadScriptBlock
>
</
FilterTemplate
>
</
telerik:GridDropDownColumn
>
I will look forward for your response
many thanks
Syed
When the DropDownControlType property of the GridDropDownColumn is set to DropDownList, a standard DropDownList control is used as a column editor. Detailed information on this could be found at the following help article:
You could also test this locally by handling the server-side ItemDataBound event and get reference to the GridEditableItem to see the Controls collection of the GridDropDownColumn:
protected
void
RadGrid1_ItemDataBound(
object
sender, GridItemEventArgs e)
{
if
(e.Item
is
GridEditableItem && e.Item.IsInEditMode)
{
GridEditableItem editItem = e.Item
as
GridEditableItem;
DropDownList dropDownList = editItem[
"ProjectPhaseID"
].Controls[0]
as
DropDownList;
}
}
However, if you set the DropDownControlType to RadComboBox, since it is a control from Telerik UI for ASP.NET AJAX suite, you could then use $telerik.findControl() method to get reference to the client-side API of the control.
Having in mind the above, please try the approach provided in my previous post and see if everything is working as expected.
Regards,
Konstantin Dikov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.