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

Javascript Debug in Visual Studio 2008

4 Answers 141 Views

General Discussions

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

Rebecca Peltz asked on 10 Jun 2010, 08:18 PM

Most of the time I can use the Debugger in VS 2008 to debug javascript. Occasionally it seems to stop working, i.e. the processor doesn't stop at my breakpoints.

Can anyone set me straight as to why this might happen - maybe I am using it incorrectly or have placed my JS in the wrong part of the document. I currently have it in a RadCodeBlock within the form of the doc.

    
              <form id="form1" runat="server"> 
        
                <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> 
        
                    <script type="text/javascript"> 
        
                    <!-- 
        
                        //Custom js code section used to edit records, store changes and switch the visibility of column editors 
        
                        //global variables for edited cell and edited rows ids 
        
                        var editedCell; 
        
                        var arrayIndex = 0; 
        
                        var editedItemsIds = []; 
        
                        function RowCreated(sender, eventArgs) { 
        
                            var dataItem = eventArgs.get_gridDataItem();

4 Answers, 1 is accepted

answered on 14 Jun 2010, 05:30 PM

Thanks for responding. Moving code out of the RadCodeBlock didn't make a difference, and then it seemed I had to move the javascript to a different location. The code I'm attaching to this post is what I eventually came up with. It involved moving some javascript around. It doesn't use the RadCodeBlock control.

Javascript that runs when the page loads only run if you refresh the page. I think that is the intention of the Microsoft debugger. For example this code cannot be located above the form controls. And you can't debug except on refresh.

    
               var gridName = "<%= RadGrid1.ClientID %>";

I'm wondering what the RadCodeBlock's purpose is. I though maybe it would allow you to place your javascript anywhere in the aspx page.

Can you verify that I am following best practices in structuring my aspx/telerik/javascript page.
Here is the complete page

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"> 
        
                <title></title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                     <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
        
                     <script type="text/javascript"> 
        
                         function onRowDropping(sender, args) { 
        
                             //alert (String.format("edit mode = {0}",IsEditMode)); 
        
                             if (sender.get_id() == gridName) { 
        
                                 var node = args.get_destinationHtmlElement(); 
        
                                 if (!isChildOf(gridName, node) && !isChildOf(gridName, node)) { 
        
                                     args.set_cancel(true); 
        
                                 } 
        
                             } 
        
                         } 
        
                         function isChildOf(parentId, element) { 
        
                             while (element) { 
        
                                 if (element.id && element.id.indexOf(parentId) > -1) { 
        
                                     return true; 
        
                                 } 
        
                                 elementelement = element.parentNode; 
        
                             } 
        
                             return false; 
        
                         } 
        
                    </script> 
        
                <div> 
        
                    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="Default,Select,Textbox" 
        
                        EnableRoundedCorners="false" /> 
        
                    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" /> 
        
                    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"  
        
                        DefaultLoadingPanelID="RadAjaxLoadingPanel1"> 
        
                        <AjaxSettings> 
        
                            <telerik:AjaxSetting AjaxControlID="RadGrid1"> 
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1"> 
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                        </AjaxSettings> 
        
                    </telerik:RadAjaxManager> 
        
                    <telerik:RadGrid ID="RadGrid1" Width="97%" ShowStatusBar="True" PageSize="15" GridLines="None" 
        
                        AllowPaging="True" runat="server" AutoGenerateColumns="False" OnItemCreated="RadGrid1_ItemCreated" 
        
                        OnRowDrop="RadGrid1_RowDrop"> 
        
                        <MasterTableView TableLayout="Fixed" DataKeyNames="ID" EditMode="InPlace" ClientDataKeyNames="ID"> 
        
                            <Columns> 
        
                                <telerik:GridBoundColumn UniqueName="ID" DataField="ID" HeaderText="ID" ReadOnly="True" 
        
                                    HeaderStyle-Width="5%" /> 
        
                                <telerik:GridBoundColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID" 
        
                                    ReadOnly="True" HeaderStyle-Width="5%" /> 
        
                                <telerik:GridTemplateColumn UniqueName="Color" HeaderText="Color" HeaderStyle-Width="10%"> 
        
                                    <ItemTemplate> 
        
                                        <asp:Label ID="lblColor" runat="server" Text='<%# Eval("ColorName") %>' /> 
        
                                        <asp:DropDownList ID="dropDownColor" runat="server" DataSourceID="ColorDS" DataTextField="ColorName" 
        
                                            DataValueField="ColorID" SelectedValue='<%#Bind("ColorID") %>' Style="display: none"> 
        
                                        </asp:DropDownList> 
        
                                    </ItemTemplate> 
        
                                </telerik:GridTemplateColumn> 
        
                            </Columns> 
        
                        </MasterTableView> 
        
                        <ClientSettings AllowRowsDragDrop="true"> 
        
                            <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" /> 
        
                            <ClientEvents OnRowDropping="onRowDropping" /> 
        
                            <ClientEvents /> 
        
                        </ClientSettings> 
        
                    </telerik:RadGrid> 
        
                    <asp:Button ID="Button1" runat="server" OnClientClick="EditModeClick();return false;" 
        
                        Text="Client Edit" /> 
        
                         <asp:Button ID="Button2" runat="server"  
        
                        Text="Server Edit" onclick="Button2_Click" /> 
        
                    <br /> 
        
                    <asp:ObjectDataSource ID="ColorDS" runat="server" SelectMethod="GetColors" TypeName="BatchUpdate.Color" /> 
        
                </div> 
        
                </form> 
        
                <script type="text/javascript"> 
        
                    /* control names */ 
        
                    var gridName = "<%= RadGrid1.ClientID %>"; 
        
                    document.writeln(gridName); 
        
                    /* global */ 
        
                      var IsEditMode = false; 
        
                      function EditModeClick() { 
        
                          IsEditMode = true; 
        
                          PlaceDropDownColumnInEditMode("Color"); 
        
                      } 
        
                      function PlaceDropDownColumnInEditMode(columnUniqueName) { 
        
                          var items = $find(gridName).get_masterTableView().get_dataItems(); 
        
                          for (i = 0; i < items.length; i++) { 
        
                              var cell = items[i].get_cell(columnUniqueName); 
        
                              var label = cell.getElementsByTagName('span')[0]; 
        
                              var dropdown = cell.getElementsByTagName('select')[0]; 
        
                              label.style.display = "none"; 
        
                              dropdown.style.display = ""; 
        
                          } 
        
                      } 
        
                        function onRowDropping(sender, args) { 
        
                        //alert (String.format("edit mode = {0}",IsEditMode)); 
        
                            if (sender.get_id() == "<%=RadGrid1.ClientID %>") { 
        
                                var node = args.get_destinationHtmlElement(); 
        
                                if (!isChildOf('<%=RadGrid1.ClientID %>', node) && !isChildOf('<%=RadGrid1.ClientID %>', node)) { 
        
                                    args.set_cancel(true); 
        
                                } 
        
                            } 
        
                        } 
        
                        function isChildOf(parentId, element) { 
        
                            while (element) { 
        
                                if (element.id && element.id.indexOf(parentId) > -1) { 
        
                                    return true; 
        
                                } 
        
                                elementelement = element.parentNode; 
        
                            } 
        
                            return false; 
        
                        } 
        
                    </script> 
        
                </script> 
        
            </body> 
        
            </html>

Thanks for your attention!

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Javascript Debug in Visual Studio 2008

4 Answers, 1 is accepted