Show the API of the Grid client-side object and view auto-complete suggestions Debug JavaScript and simply use, table(objectReference,).įigure 4. In Google Chrome, you can skip the console.
console.table(objectReference,) in the console lists all available properties and methods. Ctrl+ Space opens the suggestions menu. ↑ and ↓ in the console shows the previous/next executed line. The article, Get Client-side Reference to a Control Object, demonstrates different approaches which we can use directly in the browser console. Get an object reference of a RadGrid client-side object The result of the $find() method will give us a reference to the control's client object.įigure 3. Use the obtained ID value as a parameter to the $find() method. Get the value of the ID attribute of the element which has a class equal to control name (i.e. Inspect the rendered HTML of a control, using the skill we acquired earlier when we inspected the generated HTML of the RadGrid. Let's try it out by following the steps below: Getting a reference to the client-side object of a control is a powerful technique and can save you precious time, because it can reveal all currently available properties and methods on the fly. Get the Client-Side Reference of a Control The computed tab gives you visual representation of the size of the element along the borders, margins and paddings: You can use the color picker when setting color values to some properties. You can use the keyboard arrows to increase/decrease numeric values. See the styles applied to the DOM elements This is also useful in scenarios where the layout or appearance of the control is broken to find out which style is breaking the design.įigure 2. It also allows you to filter the styles, force different states ( :hov) such as hovered, active, focused, add/remove classes easily ( :cls). The side bar of the Elements panel has the Styles and Computed tabs, which allow you to dynamically change the applied styles to the selected element in the Elements panel, and even find the origin of the style rule. 
When styling the page, sometimes you need to tweak the rules like padding, margin or color a little to get the perfect appearance.
You can modify the DOM hierarchy by selecting an element in the Elements panel and then dragging it to the desired location. You can edit the HTML and the HTML attributes of an element on the fly by double-clicking an element's attribute in the Elements panel or right-clicking the element and choosing " Add attribute", " Edit attribute" or " Edit as HTML" option from the context menu. Right-click on an element logged in the console and choose " Reveal in Elements panel.". Click the Inspect Element button ( Ctrl+ Shift+ C) on the top left corner of Chrome DevTools and hover over the control. That will open Chrome DevTools and highlight the element that you clicked on. Right-click an element and select the Inspect Element from the context menu. There are a few possible approaches to check the rendering of a control: 
This can be done by inspecting the HTML using the Elements panel of Chrome DevTools. When you are using prepared controls and components, sometimes you need to know the structure of the generated HTML to get familiar with its rendering so you can fine-tune it to blend in your project. Update: If you're looking for even more advanced tips and tricks, be sure to check out the second post in this series.
Get IntelliSense for the Client-Side Object. Get the Client-Side Reference of a Control. Inspect the Generated HTML of a Control. Most of the tips and tricks are applicable to other browsers developer tools too, and will be presented with the help of the RadGrid in Telerik UI for ASP.NET AJAX. Using the Chrome DevTools, you can easily modify the appearance and functionality of the Telerik UI for ASP.NET AJAX components, or other UI framework components like Kendo UI widgets, on the fly. Check out our best practices and tips which will help you to deal with these struggles and boost your performance. If the answer to at least one of the questions is "yes," then this blog post is meant for you. Have you ever had trouble with incorrectly executed JavaScript? Have you ever struggled with fine-tuning the CSS of the elements on your web page? Are you annoyed every time you test your web page on multiple different mobile devices? In this post we cover best practices and tips for using Chrome DevTools, which will help you solve your web application development struggles more easily.
0 kommentar(er)
