Customizing the search dialog in JQGrid to adjust the width of the input fields

Can the width of the text box in Jqgrid default search dialog be increased?

Check out the image:

Updated Code for the search functionality:

jQuery("#subscriptions").jqGrid(
    'navGrid',
    '#pager',
    { del: false, add: false, edit: false },
    {},
    {},
    {},
    {
        multipleSearch: true,
        closeAfterSearch: true,
        beforeShowSearch: function ($form) {
            $(".searchFilter table td .input-elm").attr('style', 'width:400px');
            $('#searchmodfbox_subscriptions').width(750);
            return true;
        },
        afterRedraw: function ($form) {
            $(".searchFilter table td .input-elm").attr('style', 'width:400px');
            return true;
        }
    });

The grid is set to loadonce option as true, enabling local searches without making server calls.

Answer №1

To adjust the style, make use of the beforeShowSearch and afterRedraw event triggers.

The beforeShowSearch event is triggered just before the search dialog is displayed, while afterRedraw is activated when new search parameters are added.

I have incorporated these changes into the code:

$(".searchFilter table td .input-elm")
. Here, searchFilter refers to the parent div's class and input-elm indicates the text box's class. The width set to 300px can be adjusted according to your requirements:

jQuery("#subscriptions").jqGrid(
    'navGrid',
    '#pager',
    { del: false, add: false, edit: false },
    {},
    {},
    {},
    {
        multipleSearch: true,
        closeAfterSearch: true,
        beforeShowSearch: function($form) {
           $(".searchFilter table td .input-elm").attr('style','width:300px');
           return true;
        },
        afterRedraw: function($form) {
          $(".searchFilter table td .input-elm").attr('style','width:300px');
          return true;
        }
    }); 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing a JavaScript function in ASP.NET after a button click has been completed

Here is an ASP.NET button: <asp:Button ID="okButton" runat="server" Text="Okay" OnClick="okButton_Click" /> This is the okButton_Click function: protected void okButton_Click(object sender, EventArgs e){ //perform tasks here } There is also a Ja ...

"Troubleshooting the issue of Angular not functioning with Coffeescript

Although I have had success using straight coffeescript in my development environment, I recently encountered issues when trying to incorporate AngularJS. It seems that my current setup is not running correctly with coffeescript. Here's what works: ...

Access JSON file without considering any custom comments

Is there a way to extract the JSON data from 'file.json' without including any comments? # Comment01 # Comment02 { "name": "MyName" } I have tried using this code snippet: var fs = require('fs'); var obj; fs.readFile('./file. ...

What can be done to enhance this particular element?

I've created a Component that uses a 3rd party joke API to fetch jokes with a specific category upon page load. The component also includes a refresh button for fetching new jokes. export default function Jokes() { const { cat } = useParams(); const [ ...

What is the best way to access a Node/Express API key from the .env file in front-end JavaScript code?

Currently, I am utilizing an OpenWeatherMap API key within my client-side JavaScript for a basic weather application built using Node and Express. However, I understand that this approach is not secure for production environments, so I have installed doten ...

Instructions on configuring the oddslib JavaScript library

I am experimenting with a unique odds library I discovered at the following link: https://github.com/1player/oddslib Interestingly, upon importing it, I encountered a warning. I followed the setup for oddslib by running npm install oddslib Despite that ...

The alignment and sizing issues with stacking icons using fontawesome are still unresolved

I have been exploring the use of stacked icons with fontawesome, following a helpful blog post by Dave Gandy. Although stacking is working well, I am facing an issue aligning a stacked icon with a non-stacked icon (which is fa-5x). It's challenging t ...

Each time new scripts are loaded, the Angular 13 window.ng.ɵcompilerFacade gets swapped out for a fresh

New Update: After observing the behavior of loading components/modules in my application, I have noticed a conflict arising between window.ng.ɵcompilerFacade and v13 compliance format when switching between Angular versions. The issue occurs when loading ...

Unable to view image when using material-ui CardMedia component

Hello, I've encountered a problem with rendering an image in my application. Let me explain the issue in a simplified manner. So, I have a card component (MyCardComponent) where I need to pass a string prop containing the image file location. The goa ...

Watching a service's attribute from within a route in the EmberJS framework

There seems to be a concept that I'm struggling to grasp here. To my understanding, any instance of Ember.object should be able to observe properties on another instance of Ember.object. In my scenario, there is a service, a router, and a component i ...

Basic title in material-ui navigation bar

I was hoping to display a simple label on the right side of the AppBar. Currently, I am using the iconElementRight prop and inserting a disabled flat button: <AppBar iconElementRight={<FlatButton label="My Label" disabled={true}/>} /> Thi ...

Display options in a dropdown menu according to the value selected in another dropdown menu on an edit form in Laravel

After discovering a solution on another website, I successfully implemented it. However, I am facing an issue when trying to use this setup in my edit form (ideally within the same form as my create form since they both share the same structure). On the ed ...

Having trouble clicking or interacting with JavaScript using Selenium and Python

Issue: Unable to interact with elements on a specific webpage after opening a new tab. Using WebDriver Chrome. I can successfully navigate the initial webpage until I click a link that opens a new tab, at which point I am unable to perform any actions. ...

adjusting the spacing between lines for a specific li element

I am seeking to vertically align the phone number and email address with the little icons next to them. When I try to adjust the line-height, it affects all the li's in that section. I believe this is because they are inline elements. Here is the webs ...

Issues with Bootstrap components not functioning correctly on a remote server

After developing a website using Boostrap and WAMP Server, I am now in the process of transferring it to a virtual server to allow more people to access it. While the site appears to be functioning correctly, there is an issue with a drop-down toggle - wh ...

Struggling to locate an element with jQuery's closest() method?

Currently, I am utilizing jQuery and Ruby on Rails for my project. Within a table with 3 columns, there is a form element in the form of a select box that utilizes AJAX to submit the result. My goal is to change the color of a check mark by adding or remov ...

What are some methods to design distinct angular ui bootstrap dialogs?

Is there a way to customize angular-ui bootstrap modal dialogs so that they have distinct colors and sizes from each other? I can style them globally for the site but not individually. I came across a similar question, but it only addresses changing all d ...

Learn the steps to import and utilize individual BootStrap 5 JavaScript Plugins

I am currently diving into the world of Bootstrap (v5.1.0) and gulp, but I'm a bit confused about how to import specific Bootstrap JavaScript plugins. I attempted to bring in only the modal plugin from Bootstrap, but encountered either a syntax error ...

The radio buttons are stuck and not changing their selection

Having a group of radio buttons with the same name, when one is checked, it automatically selects another one in the group. Here is my current code: <input name="a" type="radio"> <input name="a "type="radio" checked> JS $("input[type='r ...

How can one create a hidden color box?

$.colorbox({ href:"/check.html", transition:"elastic", speed: 150, innerWidth:"910", iframe:true, fastIframe:false, fixedPosition:fixedPos, onComplete:function(){ var $ ...