Skip to main content

Posts

Showing posts from April, 2012

Converting HTML Tables to jqGrid

Converting HTML Tables to jqGrid jqGrid is an excellent jQuery plugin for displaying data in a grid format. One of its useful features is the ability to convert HTML tables into jqGrid, which allows for enhanced user experience and additional functionality. Calling Convention To use the tableToGrid function, ensure that you mark the "Table to Grid" option when you download the grid. The calling convention for the function is: tableToGrid(selector, options) Note: This is a function, not a method. The parameters are: selector (string): Can be either the table's class or id. options (array): An array with grid options. HTML Table Structure The HTML table should have the following structure: <table class="mytab...
Post a Comment
Read more

Persisting jqGrid State with Cookies

Persisting jqGrid State with Cookies jqGrid is an excellent jQuery plugin for displaying a grid. To enhance user experience, we added some filter possibilities and used jQuery to update the URL where data was fetched from. However, when users navigated away from the grid and returned, it would reset to its start position, losing any filtering or sorting they had set. To solve this, we needed to store the user's selections. Here are two JavaScript functions that achieve this using cookies: function saveGridToCookie(name, grid) { var gridInfo = new Object(); name = name + window.location.pathname; gridInfo.url = grid.jqGrid('getGridParam', 'url'); gridInfo.sortname = grid.jqGrid('getGridParam', 'sortname'); gridInfo.sortorder = grid.jqGrid('getGridParam', 'sortorder'); gridInfo.selrow = grid.jqGrid('getGridParam', 'selro...
Post a Comment
Read more

Handling Row Selection in jqGrid with jQuery

Handling Row Selection in jqGrid with jQuery The example below specifies the action to take when a row is selected in a jqGrid: var lastSel; jQuery("#gridid").jqGrid({ ... onSelectRow: function(id) { if(id && id !== lastSel) { jQuery('#gridid').restoreRow(lastSel); lastSel = id; } jQuery('#gridid').editRow(id, true); }, ... }); Explanation This script sets up a jqGrid with a custom action for when a row is selected. Here’s a step-by-step explanation: var lastSel; : A variable to store the last selected row ID. jQuery("#gridid").jqGrid({ ... }); : Initializes the jqGrid on the element with ID gridid . onSelectRow: function(id) { ... } : Defines a function to execute when a row is selected. ...
2 comments
Read more

Advanced Usage of $(document).ready() in jQuery

Advanced Usage of $(document).ready() in jQuery One more great thing about $(document).ready() that I didn't mention in my previous tutorial is that you can use it more than once. In fact, if you don't care at all about keeping your code small, you could litter your JavaScript file with them. It's great to be able to group your functions within a file or even across multiple files, and jQuery's flexible $(document).ready() function allows you to do that, pain-free. Using Multiple $(document).ready() You could, for example, have one .js file that is loaded on every page, and another one that is loaded only on the homepage, both of which would call $(document).ready() . So, inside the <head> tag of your homepage, you would have three references to JavaScript files altogether, like so: <script src="/scripts/jquery.js"><...
Post a Comment
Read more

Understanding $(document).ready() in jQuery

Understanding $(document).ready() in jQuery To ensure an event works on your page, use the $(document).ready() function. This function loads everything inside it as soon as the DOM is ready, before the page contents are fully loaded. Basic Usage Here's how to use the $(document).ready() function to ensure your jQuery code runs when the document is ready: $(document).ready(function() { // put all your jQuery code here }); Advantages of $(document).ready() The $(document).ready() function has several advantages: Separation of Concerns: Keep your JavaScript/jQuery code in a separate file for better maintainability. Inline JavaScript Avoidance: Avoid adding "behavioral" markup in the HTML, which keeps the HTML cleaner. Multiple Functions: Unlike t...
Post a Comment
Read more