Skip to main content

Posts

Showing posts with the label Tutorial

How to Add Horizontal Scrollbar and Checkboxes in jqGrid

Adding Horizontal Scrollbar and Checkboxes in jqGrid jqGrid is a powerful jQuery plugin for creating interactive tables. This guide will show you how to add a horizontal scrollbar and enable checkboxes for row selection in jqGrid. Adding a Horizontal Scrollbar To enable horizontal scrolling in jqGrid, you need to: Set a Fixed Width: Define a fixed width for the grid container. Disable Automatic Resizing: Use shrinkToFit: false to prevent automatic column resizing. Enabling Checkboxes for Multi-Selection To add checkboxes for row selection, follow these steps: Include a Checkbox Column: Use formatter: 'checkbox' in the column model. Enable Multi-Select: Set multiselect: true to allow multiple row selections.
1 comment
Read more

Handling Change Events in jqGrid

Handling Change Events in jqGrid In this tutorial, we'll explore how to handle the change event in jqGrid to dynamically update another column based on the selected value. This approach is useful when you need to update related data based on user selections. Example Scenario Let's say we have a jqGrid table with two columns: Country and State. When the user selects a country, the State column should dynamically update to show the relevant states for the selected country. Implementation We'll use the dataEvents option in the colModel configuration to handle the change event. HTML Structure First, let's set up our basic HTML structure: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>H
5 comments
Read more

Passing User Input to the Server with jQuery AJAX

Passing User Input to the Server with jQuery AJAX Many times, you collect input from the user and pass that input to the server for further processing. jQuery AJAX makes it easy to pass collected data to the server using the data parameter of any available Ajax method. Example This example demonstrates how to pass user input to a web server script, which sends the same result back, and we print it: <html> <head> <title>AJAX Input Example</title> <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#driver").click(function(event){ var name = $("#name").val(); $("#stage").load(
Post a Comment
Read more

How To Make Jquery Ajax Call

Beginner's Guide to AJAX Calls in JavaScript Welcome to my first blog post! When I started working on web development, I needed to call a web service in an HTML page to display data. After searching for examples online, I couldn't find a simple, beginner-friendly guide to get started with AJAX. So, I created one myself. I hope this helps you as well! Making an AJAX Call Here's a straightforward example of an AJAX call using jQuery: $.ajax({ type: "POST", url: "test.htm", data: "param1=value1&param2=value2", success: function() { // Code to execute after the AJAX call succeeds }, error: function() { // Code to execute after the AJAX call fails } }); Understanding the AJAX Call Let's break down the code: type:
Post a Comment
Read more