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

How to compare Total of All row of Grid Numeric Column with the Numeric column web page control

11 Answers 197 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Syed
Top achievements
Rank 1
Syed asked on 08 Dec 2013, 10:09 PM

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

Sort by
0
Konstantin Dikov
Telerik team
answered on 10 Dec 2013, 02:21 PM
Hello Syed,

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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Syed
Top achievements
Rank 1
answered on 11 Dec 2013, 01:46 AM

 

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

0
Konstantin Dikov
Telerik team
answered on 13 Dec 2013, 02:52 PM
Hello 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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Syed
Top achievements
Rank 1
answered on 16 Dec 2013, 09:12 PM
Hi Konstantin
Great, it worked
Thanks
Syed
0
Syed
Top achievements
Rank 1
answered on 03 Apr 2014, 03:25 AM
Hi Konstantin
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
0
Konstantin Dikov
Telerik team
answered on 04 Apr 2014, 10:24 AM
Hello Syed,

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.

 
0
Syed
Top achievements
Rank 1
answered on 07 Apr 2014, 03:39 AM

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

0
Syed
Top achievements
Rank 1
answered on 08 Apr 2014, 09:18 PM
Hi

I am still waiting for some response to my problem

Please update, it is urgent

Thanks

Syed

0
Konstantin Dikov
Telerik team
answered on 09 Apr 2014, 08:52 AM
Hello 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.

 
0
Syed
Top achievements
Rank 1
answered on 09 Apr 2014, 09:36 AM
Hi There
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>
This is where I am defining that dropdown box and you can clearly see that this is telerik control not the asp dropdown.
I will look forward for your response
many thanks
Syed

0
Konstantin Dikov
Telerik team
answered on 09 Apr 2014, 12:07 PM
Hello 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.

 
Tags
Grid
Asked by
Syed
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Syed
Top achievements
Rank 1
Share this question
or