Questions on UI for ASP.NET AJAX Forum

110,813 questions

1 answer

215 views

How to calculate total of all the Grid ItemTemplate Textboxes values on change of any value -- CLIENTSIDE ONLY

Hi, I am developing a Webpage where I have RadGrid for multiple Products Entry.

It has Product Name, Quantity, UnitPrice and Total Price Fields.

User can keep adding products, quantity, UnitPrice and also can change any of the existing quantity, unitprice.

Total Price should always be calculated automatically as Quantity * Unit Price, upon any change on Quantity TextBox or UnitPrice Textbox.

I also have one more Server Label where I display Total of Total Price.

Now what I am looking for is a JavaScript Function to calculate all the Rows Quantity * its Unit Price and display it to its Total Price. And total of the Total price ( of all the rows ) should be displayed to the server side Label.

Can someone please help me for this JavaScript function? I think I can attach it to the ItemTemplate's Controls while binding Grid so that if there is any change in that Control Values, It should always calculate Total of All the Rows of Grid.

Here is my Grid: In the given code,

I always want to calculate lblTotalCost Value to be txtQty * txtUnitCost. And total of all the Rows lblTotalCost Value should be displayed in lblSubTotal.Text. These values should be changed always when user enters or changes any value in txtQty or txtUnitCost. It should always recalculate all the total upon any change in any rows quantity or unit cost value.

In the Footer Template, lblFooterTotalCost should always be calculated when entered txtEnterQty * txtEnterUnitCost

#############################################################

    
            <telerik:RadGrid ID="RadGridDetails" runat="server" AllowPaging="false"      
        
            AllowSorting="true" AutoGenerateColumns="False" GridLines="Both"      
        
            OnNeedDataSource="RadGridDetails_needdatasource" Skin="Default"    
        
            OnItemCreated="RadGridDetails_ItemCreated"      
        
            OnItemDataBound="RadGridDetails_ItemDataBound"    
        
            ShowFooter="true"    
        
            >     
        
            <PagerStyle Mode="NextPrevAndNumeric" />     
        
            <ClientSettings EnableRowHoverStyle="true">     
        
            </ClientSettings>     
        
                                                    <MasterTableView ShowHeadersWhenNoRecords="true">     
        
                                                        <Columns>     
        
                                                            <telerik:GridTemplateColumn >     
        
                                                                <ItemTemplate>     
        
                                                                    <asp:Button runat="server" ID="btnDeleteProduct" text="Delete"      
        
                                                                        CssClass="ButtonCSS"    
        
                                                                        ToolTip="Click here to delete this product"    
        
                                                                        CausesValidation="true"      
        
                                                                        OnClientClick="javascript:return confirm('Are you sure you want to delete this Product Information? ');"    
        
                                                                        onclick="btnDeleteProduct_Click"      
        
                                                                        CommandArgument='<%#      
        
                                                                        Eval ( "RequestInfoProductDetailID").ToString()      
        
                                                                        + ";" +       
        
                                                                        Eval ( "Row_Number").ToString()     
        
                                                                        %>'     
        
                                                                        />     
        
                                                                </ItemTemplate>     
        
                                                                <FooterTemplate>     
        
                                                                    <asp:Button runat="server" ID="btnAddProduct" text="Add New Product"      
        
                                                                        CssClass="ButtonCSS"    
        
                                                                        ToolTip="Click here to add this new product to the list"    
        
                                                                        CausesValidation="true" onclick="btnAddProduct_Click"      
        
                                                                        />     
        
                                                                </FooterTemplate>     
        
                                                            </telerik:GridTemplateColumn>           
        
                                                            <telerik:GridTemplateColumn HeaderText="Quantity" UniqueName="Quantity">     
        
                                                                <ItemTemplate>     
        
                                                                    <asp:TextBox ID="txtQty" Runat="server" MaxLength="7"      
        
                                                                        Text='<%# Bind("Quantity") %>'      
        
                                                                        ToolTip="Enter quantity"      
        
                                                                        ></asp:TextBox>     
        
                                                                                <asp:CompareValidator ID="cvQty" runat="server"      
        
                                                                                Display="Dynamic" ErrorMessage="Please enter a valid quantity"      
        
                                                                                ControlToValidate="txtQty"  Operator="DataTypeCheck"       
        
                                                                                Type="Integer" ></asp:CompareValidator>     
        
                                                                </ItemTemplate>     
        
                                                                <FooterTemplate>     
        
                                                                    <asp:TextBox ID="txtEnterQty" Runat="server" MaxLength="7"      
        
                                                                        ToolTip="Enter quantity"      
        
                                                                        ></asp:TextBox>     
        
                                                                                <asp:CompareValidator ID="cvEnterQty" runat="server"      
        
                                                                                Display="Dynamic" ErrorMessage="Please enter a valid quantity"      
        
                                                                                ControlToValidate="txtEnterQty"  Operator="DataTypeCheck"       
        
                                                                                Type="Integer" ></asp:CompareValidator>     
        
                                                                </FooterTemplate>     
        
                                                            </telerik:GridTemplateColumn>           
        
                                                            <telerik:GridTemplateColumn HeaderText="Product Name" SortExpression="ProductName"      
        
                                                                UniqueName="ProductName">     
        
                                                                <ItemTemplate>     
        
                                                                    <asp:TextBox ID="txtProductName" Runat="server" MaxLength="50"      
        
                                                                        Text='<%# Bind("ProductName") %>'      
        
                                                                        ToolTip="Enter ProductName"      
        
                                                                        ></asp:TextBox>                                         
        
                                                                </ItemTemplate>     
        
                                                                <FooterTemplate>     
        
                                                                    <asp:TextBox ID="txtEnterProductName" Runat="server" MaxLength="50"      
        
                                                                        ToolTip="Enter ProductName"      
        
                                                                        ></asp:TextBox>                                         
        
                                                                </FooterTemplate>     
        
                                                            </telerik:GridTemplateColumn>     
        
                                                            <telerik:GridTemplateColumn HeaderText="Unit Cost"  SortExpression="UnitCost" UniqueName="UnitCost">     
        
                                                                <ItemTemplate>     
        
                                                                    <asp:TextBox ID="txtUnitCost" Runat="server" MaxLength="10"      
        
                                                                        Text='<%# Bind("UnitCost") %>'      
        
                                                                        ToolTip="Enter Unit Cost"      
        
                                                                        ></asp:TextBox>     
        
                                                                                <asp:CompareValidator ID="cvUnitCost" runat="server"      
        
                                                                                Display="Dynamic" ErrorMessage="Please enter a valid amount"      
        
                                                                                ControlToValidate="txtUnitCost"  Operator="DataTypeCheck"       
        
                                                                                Type="Double" ></asp:CompareValidator>     
        
                                                                </ItemTemplate>     
        
                                                                <FooterTemplate>     
        
                                                                    <asp:TextBox ID="txtEnterUnitCost" Runat="server" MaxLength="10"      
        
                                                                        ToolTip="Enter Unit Cost"      
        
                                                                        ></asp:TextBox>     
        
                                                                                <asp:CompareValidator ID="cvEnterUnitCost" runat="server"      
        
                                                                                Display="Dynamic" ErrorMessage="Please enter a valid amount"      
        
                                                                                ControlToValidate="txtEnterUnitCost"  Operator="DataTypeCheck"       
        
                                                                                Type="Double" ></asp:CompareValidator>     
        
                                                                </FooterTemplate>     
        
                                                            </telerik:GridTemplateColumn>           
        
                                                            <telerik:GridTemplateColumn HeaderText="Total Cost"       
        
                                                                SortExpression="TotalCost"      
        
                                                                UniqueName="TotalCost">     
        
                                                                <ItemTemplate>     
        
                                                                    <asp:Label runat="server" ID="lblTotalCost" Text='<%# Bind("TotalCost") %>' ></asp:Label>     
        
                                                                </ItemTemplate>     
        
                                                                <FooterTemplate>     
        
                                                                    <asp:Label runat="server" ID="lblFooterTotalCost" ></asp:Label>     
        
                                                                </FooterTemplate>     
        
                                                            </telerik:GridTemplateColumn>           
        
                                                        </Columns>     
        
                                                        <EditFormSettings>     
        
                                                            <PopUpSettings ScrollBars="None" />     
        
                                                        </EditFormSettings>     
        
                                                        <ExpandCollapseColumn Resizable="False" Visible="False">     
        
                                                            <HeaderStyle />     
        
                                                        </ExpandCollapseColumn>     
        
                                                        <RowIndicatorColumn Visible="False">     
        
                                                            <HeaderStyle />     
        
                                                        </RowIndicatorColumn>     
        
                                                    </MasterTableView>     
        
                                                </telerik:RadGrid>      
        
            <asp:Label ID="lblSubTotal" runat="server" ></asp:Label>

#############################################################

Grid

answered on 09 Dec 2009

5 answers

219 views

[Solved] Ajax Panel and Radcharts

When i place a RadGrid in an ajax panel, the RadGrid grays out and the spinny icon shows overtop the center of the RadGrid. This is an excellent effect which i use often in my websites.

On my current website, I have tried to do the same thing with a RadChart, with some unexpected behavior. When I place the RadChart in an ajax panel, the RadChart does not gray out and the spinny icon shows up at the top of the RadChart, BEHIND the title. Note the little blue semicircle in the attached picture for reference.

How can i acheive the nice effect i get with the RadGrid when i use the RadChart?

P.S.>
I have the BackgroundPosition set to Center and the RadChart is WITHIN the ajax panel.

Ajax

answered on 09 Dec 2009

1 answer

59 views

About Rad Grid

Hi,

I am using Q2 2009. I have grid.and there are Two Arrows button Right and left .I want to do the following functionality

When these arrows are clicked, the data grid should move 3 cells to the right or left accordingly

Please give me the solutions ASAP.

Regards

Rahul

Grid

answered on 09 Dec 2009

2 answers

135 views

[Solved] Client side formatting - undesired visual effect

Hello,

I have the following scenario at my application:

Columns are auto-generated, I don't know which columns I will get at design time.

I should display cell contents in max two rows.

If cell content doesn't fit on two rows I have to get a shorter version of the cell content and also add an ellipsis script to expand/collapse the content.

I have been reading RadGrid documentation related to grid formatting from client side and as far as I've seen I should use OnGridCreating and OnGridCreated client events to do it.

Everything works OK formatting my cell's content from one of those events except that the user is able to see the grid before I apply any format and a few milliseconds later the formatted version. This flickering effect the user sees is very annoying specially when the contents of the grid are very large.

Is there any way to format cell's content at client side BEFORE the grid is displayed?

Thanks ahead,

Maria Henao

Grid

answered on 09 Dec 2009

1 answer

93 views

Launching AdvEdit Form Outside of Scheduler Control

I have the need to be able to launch the edit form of the scheduler from a control other than the scheduler itself (a button in this case).

The code below retrieves the appointment, etc... and all of it works perfectly in the debugger. I thought all I needed to call was editappointment, but the advedit template is never shown and the code behind method (form created, etc...) are never hit.

What am I doing that is so painfully wrong that I cannot see it? :)

    
                            function Huh(sender, e) {  
        
                                // Find the scheduler  
        
                                var rsScheduler = $find('ctl00_ContentPlaceHolder1_rsScheduler');  
        
                                // Get the variable for the active lease  
        
                                var nActiveLeaseID = document.getElementById("ctl00_ContentPlaceHolder1_m_nActiveLease");  
        
                                // Get the appointments from the schduler  
        
                                var Appointments = rsScheduler.get_appointments();  
        
                                // Get our appointment  
        
                                var MyAppt = Appointments.findByID(nActiveLeaseID.value);  
        
                                //Edit the appointment  
        
                                rsScheduler.editAppointment(MyAppt);  
        
                            }

Scheduler

answered on 09 Dec 2009

1 answer

58 views

menu seperator no show when skin set to Web20

if I set skin to Telerik, menu divider does show up.

but if I set skin to Web20, menu divider is no show, even I have

<telerik:RadMenuItem IsSeparator="true" Text="|" />

please help and let me know what I need to do to make the divider appear. thanks.

answered on 09 Dec 2009

2 answers

267 views

How to access all the ItemTemplate controls through JavaScript?

Hi, I am using Tekerik:RadGrid and I have columns as Quantity, UnitPrice and TotalPrice.

I provide Textboxes to enter Quantity and Unit Price and upon these entry, immediately TotalPrice Label should be calculated as quantity * Unit Price.

Now, I also display the total of all the Total Price in a different Label control.

I want to know how can I write a Javascript function to attach it on "onkeyup" event of Quantity and Unit Price textboxes so that whenever there is any change in any quantity or any unit price, it calculates every thing and fills out total also.

Just for information, here is my RadGrid Control:

#####################################

    
            <telerik:RadGrid ID="RadGridDetails" runat="server" AllowPaging="false"   
        
            AllowSorting="true" AutoGenerateColumns="False" GridLines="Both"   
        
            OnNeedDataSource="RadGridDetails_needdatasource" Skin="Default" 
        
            OnItemDataBound="RadGridDetails_ItemDataBound" 
        
            ShowFooter="true" 
        
            > 
        
                                                    <PagerStyle Mode="NextPrevAndNumeric" /> 
        
                                                    <ClientSettings EnableRowHoverStyle="true" > 
        
                                                    </ClientSettings> 
        
                                                    <MasterTableView ShowHeadersWhenNoRecords="true">  
        
                                                        <Columns> 
        
                                                            <telerik:GridTemplateColumn HeaderText="Row_Number"   
        
                                                                SortExpression="Row_Number" UniqueName="Row_Number">  
        
                                                                <ItemTemplate> 
        
                                                                    <asp:Label ID="lblRow_Number" runat="server"   
        
                                                                        Text='<%# Bind("Row_Number")%>'></asp:Label> 
        
                                                                </ItemTemplate> 
        
                                                            </telerik:GridTemplateColumn> 
        
                                                            <telerik:GridTemplateColumn > 
        
                                                                <ItemTemplate> 
        
                                                                    <asp:Button runat="server" ID="btnDeleteProduct" text="Delete"   
        
                                                                        CssClass="ButtonCSS" 
        
                                                                        ToolTip="Click here to delete this product" 
        
                                                                        CausesValidation="true"   
        
                                                                        OnClientClick="javascript:return confirm('Are you sure you want to delete this Product Information? ');" 
        
                                                                        onclick="btnDeleteProduct_Click"   
        
                                                                        CommandArgument='<%#   
        
                                                                        Eval ( "RequestInfoProductDetailID").ToString()   
        
                                                                        + ";" +    
        
                                                                        Eval ( "Row_Number").ToString()  
        
                                                                        %>'  
        
                                                                        /> 
        
                                                                </ItemTemplate> 
        
                                                                <FooterTemplate> 
        
                                                                    <asp:Button runat="server" ID="btnAddProduct" text="Add New Product"   
        
                                                                        CssClass="ButtonCSS" 
        
                                                                        ToolTip="Click here to add this new product to the list" 
        
                                                                        CausesValidation="true" onclick="btnAddProduct_Click"   
        
                                                                        /> 
        
                                                                </FooterTemplate> 
        
                                                            </telerik:GridTemplateColumn>        
        
                                                            <telerik:GridTemplateColumn HeaderText="Quantity" UniqueName="Quantity">  
        
                                                                <ItemTemplate> 
        
                                                                    <asp:TextBox ID="txtQty" Runat="server" MaxLength="7"   
        
                                                                        Text='<%# Bind("Quantity") %>'   
        
                                                                        onkeyup='isNumber(this)' 
        
                                                                        ToolTip="Enter quantity"   
        
                                                                        ></asp:TextBox> 
        
                                                                                <asp:CompareValidator ID="cvQty" runat="server"   
        
                                                                                Display="Dynamic" ErrorMessage="Please enter a valid quantity"   
        
                                                                                ControlToValidate="txtQty"  Operator="DataTypeCheck"    
        
                                                                                Type="Integer" ></asp:CompareValidator> 
        
                                                                </ItemTemplate> 
        
                                                                <FooterTemplate> 
        
                                                                    <asp:TextBox ID="txtEnterQty" Runat="server" MaxLength="7"   
        
                                                                        ToolTip="Enter quantity"   
        
                                                                        ></asp:TextBox> 
        
                                                                                <asp:CompareValidator ID="cvEnterQty" runat="server"   
        
                                                                                Display="Dynamic" ErrorMessage="Please enter a valid quantity"   
        
                                                                                ControlToValidate="txtEnterQty"  Operator="DataTypeCheck"    
        
                                                                                Type="Integer" ></asp:CompareValidator> 
        
                                                                </FooterTemplate> 
        
                                                            </telerik:GridTemplateColumn>        
        
                                                            <telerik:GridTemplateColumn HeaderText="Unit Cost"  SortExpression="UnitCost" UniqueName="UnitCost">  
        
                                                                <ItemTemplate> 
        
                                                                    <asp:TextBox ID="txtUnitCost" Runat="server" MaxLength="10"   
        
                                                                        Text='<%# Bind("UnitCost") %>'   
        
                                                                        ToolTip="Enter Unit Cost"   
        
                                                                        visible="false" 
        
                                                                        ></asp:TextBox> 
        
                                                                                <asp:CompareValidator ID="cvUnitCost" runat="server"   
        
                                                                                Display="Dynamic" ErrorMessage="Please enter a valid amount"   
        
                                                                                ControlToValidate="txtUnitCost"  Operator="DataTypeCheck"    
        
                                                                                Type="Double" ></asp:CompareValidator> 
        
                                                                </ItemTemplate> 
        
                                                                <FooterTemplate> 
        
                                                                    <asp:TextBox ID="txtEnterUnitCost" Runat="server" MaxLength="10"   
        
                                                                        ToolTip="Enter Unit Cost"   
        
                                                                        ></asp:TextBox> 
        
                                                                                <asp:CompareValidator ID="cvEnterUnitCost" runat="server"   
        
                                                                                Display="Dynamic" ErrorMessage="Please enter a valid amount"   
        
                                                                                ControlToValidate="txtEnterUnitCost"  Operator="DataTypeCheck"    
        
                                                                                Type="Double" ></asp:CompareValidator> 
        
                                                                </FooterTemplate> 
        
                                                            </telerik:GridTemplateColumn>        
        
                                                            <telerik:GridTemplateColumn HeaderText="Total Cost"    
        
                                                                SortExpression="TotalCost"   
        
                                                                UniqueName="TotalCost">  
        
                                                                <ItemTemplate> 
        
                                                                    <asp:Label runat="server" ID="lblTotalCost" Text='<%# Bind("TotalCost") %>' ></asp:Label> 
        
                                                                </ItemTemplate> 
        
                                                                <FooterTemplate> 
        
                                                                    <asp:Label runat="server" ID="lblFooterTotalCost" ></asp:Label> 
        
                                                                </FooterTemplate> 
        
                                                            </telerik:GridTemplateColumn>        
        
                                                        </Columns> 
        
                                                        <EditFormSettings> 
        
                                                            <PopUpSettings ScrollBars="None" /> 
        
                                                        </EditFormSettings> 
        
                                                        <ExpandCollapseColumn Resizable="False" Visible="False">  
        
                                                            <HeaderStyle /> 
        
                                                        </ExpandCollapseColumn> 
        
                                                        <RowIndicatorColumn Visible="False">  
        
                                                            <HeaderStyle /> 
        
                                                        </RowIndicatorColumn> 
        
                                                    </MasterTableView> 
        
                                                </telerik:RadGrid>     
        
            <asp:Label ID="lblSubTotal" runat="server" ></asp:Label>

#####################################

Grid

answered on 09 Dec 2009

1 answer

99 views

Implementing FileBrowserContentProvider doesn't enable Upload Button.

Hi, I'm creating FileBrowserContentProvider, and the Treeview is populated with "folders" which are actualljust database records. How can I enable the Upload tab? I tried setting the ImagsPath and the UploadImagesPath to an existing subfolder, but the Upload button remains disabled.

Any ideas?

FileExplorer

answered on 09 Dec 2009

5 answers

106 views

Modal RadWindow is not modal pressing on a component

Hi all,

I have a big big problem, I try to explain it but is not simple.

I open a modal radwindow... works fine... in the popped-up windows I have some input component (RadComboBox, RadDatePicker...)... when I click on RadComboBox for example appens a crazy thing: in the main page there is a button in the same position of the RadComboBox of the popped-up windows, and clicking on the RadComboBox for select a value also triggered the event of the button of the main page.

I hope to be able to explain the problem.

How I can fix this issue

EDIT: I've made a simple demo with a screenshot to reproduce this very big problem that in my opinion is a big BUG

Window

answered on 09 Dec 2009

2 answers

118 views

[Solved] De-selecting RadGrid Rows After Closing RadWindow

Hello,

I'm hoping for some quick advice on how to tackle this problem.

I am using a RadGrid along with the GridClientSelectColumn column for selecting rows in the RadGrid. Once the user selects 1 or more rows, they can click a separate button which opens up a RadWindow where they can then perform an action on the ID's that were passed to the RadWindow from the selected rows of the RadGrid.

How can I deselect the rows of the RadGrid after closing the RadWindow?

Thanks so much!
Jason

Grid

answered on 09 Dec 2009

Top users last month