Change cell value in jqGrid

To change the value of a cell in a jqGrid, you can use the setCell method provided by jqGrid. 

Here’s how you can do it:

Syntax:

$("#grid").jqGrid('setCell', rowid, columnname, value, cssclass, properties)

Parameters:

rowid: The ID of the row where the cell is located.

columnname: The name of the column (the name property from the colModel).

value: The new value to set in the cell.

cssclass: (Optional) A class to apply to the cell.

properties: (Optional) An object containing any additional properties to set on the cell.

Examples:
----- ---------- ---------- ---------- ---------- ---------- ----------
    

     $("#gridId").jqGrid('setCell', rowId,'qty', '12345');          

----- ---------- ---------- ---------- ---------- ---------- ----------

                                            OR

----- ---------- ---------- ---------- ---------- ---------- ----------
 
    var rowData = $('#gridId').jqGrid('getRowData', rowId);
    rowData.qty = '12321';
    $('#gridId').jqGrid('setRowData', rowId, rowData);

----- ---------- ---------- ---------- ---------- ---------- ----------

Change JqGrid Row Color

 $("#rowId").css("background","#FFEAEA");
 $("#rowId").css("color", "black");

JQGrid Custom Validation

How to check whether EmailId already exists or not

colModel:[{name:'emailId',index:'emailId', width:200,editable:true, sorttype:'int',editrules:{email:true, required:true, custom:true, custom_func:checkvalid}}],

+
function checkvalid(value, colname)
{                                       
      var gr = jQuery("#list2").getGridParam('selarrrow');
      if(gr=='')
      {
            var flag = false;
            var allRowsInGrid=$("#list2").getGridParam("records");
            for(i=1;i<=allRowsInGrid;i++)
            {
                 var rowId = $("#list2").getRowData(i);
                 var emailId = rowId['emailId'];
                 if(emailId == value)
                 {
                       flag = true;
                 }
            }
            if(flag == true)
                 return [false,"Email Id: Email already exist, Please enter a different email ID."];
            else
                 return [true,""];
      }
      else
      {
          return [true,""];
       }
}  

onSelectRow event in jqgrid

 

The example below specifies the action to take when a row is selected. 

var lastSel;
jQuery("#gridid").jqGrid({
...
   onSelectRow: function(id){ 
      if(id && id!==lastSel){ 
         jQuery('#gridid').restoreRow(lastSel); 
         lastSel=id; 
      } 
      jQuery('#gridid').editRow(id, true); 
   },
...
});

String comparison in javascript

JavaScript String Compare

Comparing strings in JavaScript is quite easy, as long as you know about the equals operator and the JavaScript If Statement. This is all you need to know to find out if two strings of your choosing are equal.

Comparing one String to another String

Below we have created a fake authentication system and use an if statement to see if the user's name will grant them access to a special message.

JavaScript Code:

<script type="text/javascript">
var username = "Agent006";
if(username == "Agent007")
 document.write("Welcome special agent 007"); 
else
 document.write("Access Denied!"); 
document.write("<br /><br />Would you like to try again?<br /><br />");

// User enters a different name
username = "Agent007";
if(username == "Agent007")
 document.write("Welcome special agent 007"); 
else
 document.write("Access Denied!"); 

</script>

Display:

Access Denied!

Would you like to try again?

Welcome special agent 007

Be sure you realize that when you are comparing one string to another, you use two equals operators "==" instead of just one "=". When you use two equals operators, it means you are comparing two values.
In this case, the English translation of our program would be: "If username is equal to Agent007, then print out a welcome message; otherwise, access is denied."

Case Insensitive String Compare

Above, we used a case sensitive compare, meaning that if the capitalization wasn't exactly the same in both strings, the if statement would fail. If you would like to just check that a certain word is entered, without worrying about the capitalization, use the toLowerCase function.

JavaScript Code:

<script type="text/javascript">
var username = "someAgent";
if(username == "SomeAgent")
 document.write("Welcome special agent"); 
else
 document.write("Access Denied!"); 
 
// Now as case insensitive
document.write("<br /><br />Let's try it with toLowerCase<br /><br />");
if(username.toLowerCase() == "SomeAgent".toLowerCase())
 document.write("Welcome special agent"); 
else
 document.write("Access Denied!"); 
</script>

Display:

Access Denied!

Let's try it with toLowerCase

Welcome special agent

JavaScript String Split Function

JavaScript String Split Function

The ability to divide a string into individual parts is a feature supported by many programming languages, including JavaScript. For instance, if you have a long string like "Bobby Susan Tracy Jack Phil Yannis" and want to store each name separately, you can use the split function. By specifying the space character " ", the function will create a new segment each time it encounters a space.

Split Function: Delimiter

The space character " " serves as our delimiter, which the split function uses to divide the string. Each time the function encounters the specified delimiter, it creates a new element in an array. The first argument of the split function is the delimiter itself.

Simple Split Function Example

Let's begin with a simple example where we take a string of numbers and split it at every occurrence of the number 5, making 5 the delimiter in this case. The split function returns an array, which we then store in the variable mySplitResult.

JavaScript Code:

<script type="text/javascript">

var myString = "123456789";

var mySplitResult = myString.split("5");

document.write("The first element is " + mySplitResult[0]); 
document.write("<br /> The second element is  " + mySplitResult[1]); 

</script>

Display:

The first element is 1234
The second element is 6789

Make sure you realize that because we chose the 5 to be our delimiter, it is not in our result. This is because the delimiter is removed from the string and the remaining characters are separated by the chasm of space that the 5 used to occupy.

Larger Split Function Example

Below we have created a split example to illustrate how this function works with many splits. We have created a string with numbered words zero through four. The delimiter in this example will be the space character " ".

JavaScript Code:

<script type="text/javascript">
var myString = "zero one two three four";

var mySplitResult = myString.split(" ");

for(i = 0; i < mySplitResult.length; i++){
 document.write("<br /> Element " + i + " = " + mySplitResult[i]); 
}
</script>

Display:

Element 0 = zero
Element 1 = one
Element 2 = two
Element 3 = three
Element 4 = four

JavaScript Redirect

JavaScript Redirect

When moving to a new domain name, JavaScript redirects can be highly useful, especially if you have a time-delay placeholder on your download site or a list of external web servers that mirror your content.

To inform your visitors about the move, you can create a "redirect page" at the old location. This page can automatically forward visitors to the new site after a brief delay, effectively notifying them of the change. JavaScript redirection is an excellent tool for implementing this kind of transition.

JavaScript Window.Location

Control over which page loads in the browser is managed through the JavaScript property window.location. By assigning a new URL to window.location, you can redirect the current webpage to the specified one. For example, if you wanted to redirect all your visitors to www.google.com upon arriving at your site, you would simply use the following script:

HTML & JavaScript Code:

<script type="text/javascript">

window.location = "http://www.google.com/"

</script>

JavaScript Time Delay

Implementing a timed delay in JavaScript can be beneficial in several scenarios, such as:

• Displaying an "Update your bookmark" page when you need to change URLs or page locations.
• Introducing a timed delay before a download begins on download sites.
• Refreshing a webpage at specified intervals.

While the code for setting up a timed delay is somewhat complex and beyond the scope of this tutorial, we've tested it, and it works reliably.

HTML & JavaScript Code:

<html>
<head>
<script type="text/javascript">

function delayerFun(){
    window.location = "../page_name.html"
}

</script>
</head>
<body onLoad="setTimeout('delayerFun()', 3000)">
<h2>Prepare to be redirected!</h2>
<p>This page is a time delay redirect, please update your bookmarks to our new 
location!</p>

</body>
</html>

View Page:

The most important part of getting the delay to work is being sure to use the JavaScript function setTimeout. We want the delayer() function to be used after 5 seconds or 5000 milliseconds (5 seconds), so we pass the setTimeout() two arguments.

• 'delayerFun()' - The function we want setTimeout() to execute after the specified delay.
• 3000 - the number of millisecods we want setTimeout() to wait before executing our function. 1000 miliseconds = 1 second.