focus a particular cell after make clicking alert box in jqgrid

I wanna create a focus on a particular cell value after clicking the alert box in jqgrid please any one suggest a solution thanks in advance

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css"/>
        <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/css/ui.jqgrid.css" />
        <style type="text/css">
            html, body { font-size: 75%; }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/js/i18n/grid.locale-en.js"></script>
        <script type="text/javascript">
            //$.jgrid.no_legacy_api = true;
            $.jgrid.useJSON = true;
        </script>
        <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/js/jquery.jqGrid.src.js"></script>
        <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.blockUI.js"></script>
        <script type="text/javascript">
        jQuery(document).ready(function(){
          var lastsel2;
          var myGrid = $('#rowed5');
          var selRowId = myGrid.jqGrid ('getGridParam', 'selrow');
          var celValue = myGrid.jqGrid ('getCell', selRowId, 'columnName');
          jQuery("#rowed5").jqGrid({        
            datatype: "local",
            height: 250,
            colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
            colModel:[
              {name:'id',index:'id', width:90, sorttype:"int", editable: true},
              {name:'name',index:'name', width:150,editable: true, editoptions:{size:"20",maxlength:"30"}},
              {name:'stock',index:'stock', width:60, editable: true, edittype:"checkbox",editoptions: {value:"Yes:No"}},
              {name:'ship',index:'ship', width:90, editable: true, edittype:"select",formatter:'select',
        editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},         



       {name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea",
    editoptions:{rows:"2",cols:"10"}}                      
                  ],
        onSelectRow: function(id){
          if(id && id!==lastsel2){
            jQuery('#rowed5').editRow(id,true);
             alert("hi");

//---here i missed alert after clicking this i want to focus on the cell that the user had already clicked--
             setTimeout(function(){celValue.focus();},1);
//--here i get the particular cell value and i try to focus after clicking the alert box---- 

//-- i also try with $(this).focus as setTimeout(function(){$(this).focus();},1); but i did not get any possible output----             
    }
        },

        caption: "Input Types"
      });
      var mydata2 = [
        {id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FE"},
        {id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"IN"},
        {id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TN"},
        {id:"45678",name:"Speakers",note:"note",stock:"No",ship:"AR"},
        {id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FE"},
        {id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FE"},
        {id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"AR"},
        {id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TN"},
        {id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FE"}
        ];
      for(var i=0;i<mydata2.length;i++)
        jQuery("#rowed5").addRowData(mydata2[i].id,mydata2[i]);
    });
    </script>
</head>
<body>
<table id="rowed5" class="scroll"></table>
</body>
</html>

You get the most simple solution if you would use the latest source of free jqGrid which you can download from GitHub (free jqGrid is the fork of jqGrid which I develop). It allows you to implement onSelectRow as below

onSelectRow: function (rowid, status, e) {
    var $self = $(this), savedRow = $self.jqGrid("getGridParam", "savedRow");

    if (savedRow.length > 0 && savedRow[0].id !== rowid) {
        //$self.jqGrid("restoreRow", savedRow[0].id);
        $self.jqGrid("saveRow", savedRow[0].id);
    }

    $self.jqGrid("editRow", rowid, { focusField: e.target });
}

See the demo. The target property of 3-d parameter of onSelectRow is the clicked element. One can use focusField: e.target option of editRow to set the focus on the input/select in the clicked cell.

If you need to use alert but you don't want to change the focus then you can save the current focus in a variable then call alert and set the focus on the element which had focus before calling alert:

var $focused = $(":focus"); // get focus
alert("hi");
$focused.focus();

See the corresponding demo here.

Moreover I recommend you compare the modified code from my demo with your original code. For example it's very bad to fill the grid using addRowData. Instead of that one should use data: mydata2 parameter of jqGrid.

Recommended topics

Hot tags