Rectangle 27 0

First you should not reload the complete grid after edit or add or any operation. Load only the grid's data. Use refreshstate: current as a grid parameter. Use reloadAfterSubmit: true.

You can also study the following link:

Thanks for the answer. I am trying to use it but after add reloadAfterSubmit: true my grid is not loading. Can u tel me how to use it.

jquery - retain grid parameters in jqgrid in reload - Stack Overflow

jquery jqgrid
Rectangle 27 0

Sometimes you don't want to initialize your jqgrid on the show event as all your data is similar and can be pulled in one request. In this case, you can set the widths of all jqgrids to the width of the visible one

var tab_width = $("#tabs div.ui-tabs-panel:not(.ui-tabs-hide)").width();

Then set the width parameter of each jqgrid to this value when initializing.

Wow! What a clean-n-simple solution! I tested setting 'width: tab_width' and worked like a charm. I like it :D Thanks.

html - jqGrid and JQuery UI tabs showing grids expanded only on primar...

jquery html jqgrid tabs size
Rectangle 27 0

Yes, this can be done using jqGrid or other data grid options such as SlickGrid.

html - jQuery & jqGrid - multiple options within grid column - Stack O...

jquery html jqgrid submit html-select
Rectangle 27 0

then add a function after the grid code to handle the increment

var counter; //when calling the service you can increase your value to the counter
function incrementingValue(cellvalue, options, rowObject) {
    //var cellValueInt = parseInt(cellvalue); // this bring the existing cell value
    return counter=1;
    }
};

jquery - In jqgrid how to maintain the state of the grid even after so...

jquery jqgrid
Rectangle 27 0

You could do this by making a separate AJAX request to retrieve the dynamic columns. Once you have that data, you would need to dynamically generate the colmodel and colnames options, and create the jqGrid using them. At this point, you could pass it a URL to retrieve data from, as long as the URL result set is guaranteed to contain all of the dynamic columns.

This is helpful and similar to another Stack Overflow response I found. See stackoverflow.com/questions/2277962/. I was hoping not to have to do 2 queries to the data source, because it responds relatively slowly and overall performance will be negatively affected.

Unfortunately you will need to make two requests, unless you can somehow do the dynamic column calculations on the server, before you render the initial page...

jquery - How can jqGrid be used when the number of columns is dynamic ...

jquery datagrid jqgrid grid
Rectangle 27 0

Subgrids has no support of loading whole data at once. In the answer I described two approaches how you can construct a workaround to implement what you need.

One more alternative would be to use some other feature of jqGrid like TreeGrid or Grouping instead of subgrids. See the answer and the next one for details.

TreeGrid

@Paul: You are welcome!

jquery - Send subgrid data back with initial grid data in jqGrid - Sta...

jquery jqgrid
Rectangle 27 0

!important

Do you have a page we can look at?

I did try !important - but it must have been at the same time I was trying margin-left. "padding-left: 1px !important" seems to have worked, just checking all my grids now

Thanks looks good, and seems to work in all browsers too (grid lines are a few px off in IE7, but that might be a different issue). Accepted answer, nice and easy fix.

JQuery JQGrid - how to CSS right/left align without touching the grid ...

jquery css jqgrid
Rectangle 27 0

Use firebug's net console (for Firefox) while you start the request to see if you're getting the json from the server. Tell us what happens after that.

json - empty grid returned to JQgrid 4.1.1 with Jquery 1.5.2 - Stack O...

jquery json jqgrid
Rectangle 27 0

There are different ways to implement your requirements. The answer for example describes how one can fill userdata inside of beforeProcessing based on subData part of every item. I would recommend you additionally to read the answer which seems could makes visualization of your data more comfortable for the user.

Please help Oleg....answer the following answer or pls give some idea stackoverflow.com/questions/25883390/

jquery - How to populate list of list json in jqgrid? that is list for...

jquery jqgrid jqgrid-php
Rectangle 27 0

One of the simplest way to enumerate all data in the grid you can implement using rows and cells. It's important to understand, that jqGrid use HTML <table> for represent the data of the grid and <tr> represent the rows. jQuery objects are wrapper on DOM elements. For example jQuery("#jgrid")[0] is the DOM element which implements HTMLTableElement. DOM is supported by really all web browsers, so you can safe use it. Internally jqGrid uses HTMLTableElement, HTMLTableRowElement and HTMLTableCellElement really permanently. If you examine the source code of getDataIDs and getRowData which you use in your current code you will see that jqGrid uses rows DOM property of the <table> intensively.

In the asnwer and in another one you will find an example of the code which enumerate the grid data.

In general the enumeration consists from

var $grid = jQuery("#jgrid"), rows = $grid[0].rows, cRows = rows.length,
    iRow, rowId, row, cellsOfRow;

for (iRow = 0; iRow < cRows; iRow++) {
    row = rows[iRow];
    if ($(row).hasClass("jqgrow")) {
        cellsOfRow = row.cells;
        // row represent the row with cellsOfRow.length cells.
        // So one can use for loop with iCol between 0 and cellsOfRow.length
        // cellsOfRow[iCol] represent the cell with the index iCol
        // and $(cellsOfRow[iCol]).text() - the text of the cell
    }
}

jquery - JqGrid Traversing Through Row Data and Cell Data - Stack Over...

jquery jqgrid
Rectangle 27 0

I hope that the demo created based on your JSON data and the jqGrid will help you to find the error in your code. Probably you just forgot to place the code which create the grid inside of jQuery(function(){/**/});.

Only one tip: If you would like that some tree node will be shown expanded like in my demo, you will have to set not only the "true" value in the last column ("expanded" hidden column), but add "true" value for the hidden "loaded" column of the tree grid. See here and here for more details.

Thank you both very much for your help! :-) Turns out it was an external error regarding the project configuration causing the error. I will make good use of both of your demos!

@Nicolay: You are welcome!

javascript - jqGrid initialized empty when using JSON data - Stack Ove...

javascript jquery json jqgrid treegrid
Rectangle 27 0

If I understand your requirements correctly the jQuery event jqGridInitGrid or onInitGrid callback is what you need. It's the first events/callbacks which will be called once during creating the grid after the outer part of jqGrid will be constructed and before the first filling of jqGrid with data. The event/callback can be used in jqGrid 4.6/4.7

The new version of free jqGrid, which I'm developing now, contains additionally beforeInitGrid callback and jqGridBeforeInitGrid event. The callback/event will be called before jqGrid start processing of input parameters. So it's possible for example make any modification of the parameter. You can for example modify/generate colModel based on the input data.

So the best choice of the callbacks/events depend on at what moment of initialization you need to do some changes and from which version of jqGrid you use.

@hamed: Sorry, but I don't see any changes of your question. Which version of jqGrid you use? Do you tried onInitGrid or other? Is it not what you need? What should be already initialized in the grid at the moment of the call of your callback/event? What you need to do in the callback/event?

I need to disable the grid after initialization. But just once and not always after every server request.

onInitGrid
jqGridInitGrid
$("#grid").bind("jqGridInitGrid", function() {alert("in jqGridInitGrid");})
setGridParam

javascript - jqGrid - event on grid initialization - Stack Overflow

javascript jquery events jqgrid
Rectangle 27 0

$(function() {
    $('#someButton').click(function() {
        // when the button is clicked 
        // send an AJAX call to the server to fetch data:
        $.ajax({
            url: '/home/someaction',
            data: { 
                // Use the data hash to send values to the server action
                date1: $('#date1').val(), 
                date2: $('#date2').val(), 
                ddlValue: $('#ddl').val() 
            },
            success: function(result) {
                //TODO: setup jqGrid here based on the results
                // returned from the server action
            }
        });
    });
});

jqgrid - rendering jquery grid on button click asp.net mvc - Stack Ove...

asp.net-mvc-2 jqgrid
Rectangle 27 0

Because jqGrid doesn't provide the hooks to conveniently modify the data, it was necessary to drop back a level and hook into jQuery. I replaced the $.ajax() method with my own. Firstly it checks whether the operation is one being initiated by jqGrid and if so, it pads the data, calls the original jqGrid success handler, and then adds the radio buttons to the grid. Sorting still works, the datatype is still json, and there are no manual calls to addJSONData and I am still able to achieve what I needed from the previous solution. Essentially, making this small jQuery hack allows me to get by without making any jqGrid hacks which is far messier.

// Set up $.ajax() hook for modifying the data before jqGrid receives it
if (!this._ajaxOverridden) {
    var oldAjax = $.ajax;
    $.ajax = function (options) {
        // Check whether this call is from jqGrid to our web service
        if (options.url == config.eventSearchUrl && options.success) {
            // Wrap the success event handler with our own handler that pads the data and creates the radio buttons
            var oldSuccess = options.success;
            options.success = function () {
                thisEventSearchDialog._padData(arguments[0]);
                oldSuccess.apply(this, arguments);
                thisEventSearchDialog._createRadioButtons();
            }
        }
        oldAjax(options);
    };
    this._ajaxOverridden = true;
}

jquery - How do you modify the data returned from an AJAX call before ...

jquery ajax jqgrid
Rectangle 27 0

Probably you should don't create jqGrid inside of click handle. You should do this one time outside of click handle and call jQuery("list").trigger('reloadGrid') inside of the handler. If at the beginning the data should be not loaded in the grid, you can use datatype: 'local' an the beginning. If it needed, you can makes div with jqGrid sometimes visitable and sometimes invisible using using hide() and show() jQuery functions. Inside of click handler you can change the datatype to 'json' with respect of setGridParam() and then call trigger('reloadGrid'). In a lot of situation you also change some parameters of URL before calling trigger('reloadGrid') (see http://stackoverflow.com/questions/2660226/should-one-replace-the-usage-addjsondata-of-jqgrid-to-the-usage-of-setgridparam), but probably you need it not in your case.

jqGrid is not loading data - Stack Overflow

jqgrid
Rectangle 27 0

protected void Page_Load(object sender, EventArgs e)
  {
    if (!IsPostBack) {
        string myString = "";
        myString = "window.onload = function() { ";
        myString += "jQuery(document).ready(function() {";

        myString += "        $('#list').jqGrid({";

        myString += "       url: 'WebService1.asmx/GetUsersFromSP',";
        myString += "       data: {},";
        myString += "       datatype: 'json',";
        myString += "       mtype: 'POST',";
        myString += "       ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },";
        myString += "       serializeGridData: function(postData) {";
        myString += "       if (postData.filters === undefined) postData.filters = null;";
        myString += "       if (postData.searchField === undefined) postData.searchField = null;";
        myString += "       if (postData.searchOper === undefined) postData.searchOper = null;";
        myString += "       if (postData.searchString === undefined) postData.searchString = null;";
        myString += "       return JSON.stringify(postData);";
        myString += "       },";
        myString += "       jsonReader: {";
        myString += "       root: function(obj) { return obj.d.rows; },";
        myString += "       page: function(obj) { return obj.d.page; },";
        myString += "       total: function(obj) { return obj.d.total; },";
        myString += "       records: function(obj) { return obj.d.records; }";
        myString += "       },";

        myString += "            colNames: ['UserID', 'UserName'],";
        myString += "            colModel: [";
        myString += "  { name: 'UserID', index: 'UserID', width: 80, align: 'left', editable: true },";
        myString += "  { name: 'UserName', index: 'UserName', width: 80, align: 'left', editable: true }],";
        myString += "            pager: jQuery('#pager'),";
        myString += "            rowList: [10, 20, 300],";
        myString += "            rowNum: 10,";
        myString += "            sortname: 'UserID',";
        myString += "            sortorder: 'asc',";
        myString += "            width: 400,";
        myString += "            viewrecords: true,";
        myString += "editurl:  'WebService1.asmx/ModifyData',";
        myString += "caption:  'My first grid'";
        myString += "        }).navGrid('#pager', { edit: true, add: true, del: true, search: true }";

        //myString += "        { editData: { TableName: Inp1, ColumnValue: myArray} },";
        //myString += "        { editData: { TableName: Inp1, ColumnValue: myArray} });";
        myString += "        );";

        myString += "        jQuery.extend(jQuery.jgrid.edit, {";
        myString += "            ajaxEditOptions: { contentType: 'application/json' },";
        myString += "            recreateForm: true,";
        myString += "            serializeEditData: function(postData) {";
        myString += "                if (postData.Col1 === undefined) { postData.Col1 = null; }";
        myString += "                myArray[0] = postData.Col1;";
        myString += "                myArray[1] = postData.Col2;";
        myString += "                myArray[2] = postData.Col3;";
        myString += "                return JSON.stringify(postData);";
        myString += "            }";
        myString += "        });";

        myString += "        jQuery.extend(jQuery.jgrid.del, {";
        myString += "            ajaxDelOptions: { contentType: 'application/json' },";
        myString += "            serializeDelData: function(postData) {";
        myString += "                if (postData.Col1 === undefined) { postData.Col1 = null; }";
        myString += "                return JSON.stringify(postData);";
        myString += "            }";
        myString += "        });";

        myString += "    });";

        myString += "}";

        ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), Guid.NewGuid().ToString(), myString, true);
 }
}

Hi Thanks for your reply. I also tried with Ispostback....but the grid is no appering after the post back. The page which i am working had html table with pagination of records fetched from DB and i am trying to change that html table to JQGRID now...And in the same page i have lots of submit button and when i click those buttons its refreshing the page as well as JQGRID. My question is their any way that we can maintain the (previous values as such) state of the grid and refresh the page after the Post Back.

JQGRID Should not refresh after post back - Stack Overflow

jqgrid
Rectangle 27 0

Because jqGrid doesn't provide the hooks to conveniently modify the data, it was necessary to drop back a level and hook into jQuery. I replaced the $.ajax() method with my own. Firstly it checks whether the operation is one being initiated by jqGrid and if so, it pads the data, calls the original jqGrid success handler, and then adds the radio buttons to the grid. Sorting still works, the datatype is still json, and there are no manual calls to addJSONData and I am still able to achieve what I needed from the previous solution. Essentially, making this small jQuery hack allows me to get by without making any jqGrid hacks which is far messier.

// Set up $.ajax() hook for modifying the data before jqGrid receives it
if (!this._ajaxOverridden) {
    var oldAjax = $.ajax;
    $.ajax = function (options) {
        // Check whether this call is from jqGrid to our web service
        if (options.url == config.eventSearchUrl && options.success) {
            // Wrap the success event handler with our own handler that pads the data and creates the radio buttons
            var oldSuccess = options.success;
            options.success = function () {
                thisEventSearchDialog._padData(arguments[0]);
                oldSuccess.apply(this, arguments);
                thisEventSearchDialog._createRadioButtons();
            }
        }
        oldAjax(options);
    };
    this._ajaxOverridden = true;
}

jquery - How do you modify the data returned from an AJAX call before ...

jquery ajax jqgrid
Rectangle 27 0

If you have to read the JSON data and can't change the data on the server side you can makes small transformation of the data returned from the server on the client side inside of beforeProcessing callback. The demo do this and displays the following results

It uses the following code

loadonce: true,
jsonReader: { root: "abc" },
beforeProcessing: function (data) {
    var root = data.abc, i, item, cItems = root.length;
    for (i = 0; i < cItems; i++) {
        item = root[i];
        item.sd = data.sd;
        item.id = $.jgrid.randId();
        item.total = data.total;
        item.xys = data.xys;
        if (item.transTime === null) {
            item.transTime = "null";
        }
    }
}

Oleg, I am getting the following error: Uncaught TypeError: Cannot read property 'id' of undefined jquery.jqGrid.min.js:66

@user3420947: Which version of jqGrid you use? I included item.id = $.jgrid.randId(); line in the code, but it's not required. You should always use jquery.jqGrid.src.js instead of jquery.jqGrid.min.js if you have an error and post the line number in SRC-version of jqGrid.

I use jquery.jqGrid.min.js version 4.2.0. I changed to jquery.jqGrid.src.js and I still get Uncaught TypeError: Cannot read property 'id' of undefined jquery.jqGrid.src.js:1281

@user3420947: I suppose that you don't used item.id = $.jgrid.randId(); line in beforeProcessing. I don't recommend you to use so old version of jqGrid. It was published in 2011. In any way the modified demo works too with jqGrid 4.2.0. If you will still have the same error with your data you can include cell: false property in jsonReader.

@onelazyguy: You are welcome!

jquery - jsonReader and jqgrid not populating json onto grid - Stack O...

jquery ajax json jqgrid jsonreader
Rectangle 27 0

The reason of the problem is the bug in setFrozenColumns method of jqGrid. If you fill jqGrid from datatype : "local" or if just the grid is already filled with data before calling of setFrozenColumns the method setFrozenColumns works incorrect. As the workaround you can include the line

jQuery("#single").triggerHandler("jqGridAfterGridComplete");

directly after jQuery("#single").jqGrid('setFrozenColumns');. I described the problem multiple times. After the post here the bug is fixed in the code of jqGrid on github (see the fix here). So you can remove the line later if you would use new version of jqGrid (version higher as the current 4.5.2).

Thank you very much!!!! Ive been looking for something to fix this issue, but never found this answer and I was very worried about it. Sincerenly, thank you very much.

@cescari: You are welcome! By the way the same problem exist since long time, but one have to call _complete function before (see the answer which is almost two years old). If the problem is solved now and jQuery("#single").triggerHandler("jqGridAfterGridComplete") fixes the problem you can "accept" the answer.

Is there any possibilities to last column as frozen column in jqGrid? @Oleg

here is that question link. sorry to post that question link here. stackoverflow.com/questions/27549268/ @Oleg

jquery - jqGrid error in frozen columns - Stack Overflow

jquery css jqgrid
Rectangle 27 0

Probably clearGridData method is what you need. If you use some custom data binding to elements of the grid you will have to set deepempty:true option of jqGrid also, but typically it is not needed.

jquery - how to empty the jqgrid grid after sending the data? - Stack ...

jquery ajax jqgrid grid