Struts 2 jQuery grid load data from JSON string

Question

I found that we can load the jqGird with JSON string.

Please refer to map JSON data to jqGrid.

Is it possible to use this feature with sjg:grid tag?

I look at tag attribute and only find that the data can be loaded from a URL which will call a Struts action and that action returns a JSON data, but in my program I already have the JSON value and need to pass it to jqGird.

If the tag does not support data, what is the best way to use jqGrid which are included in Struts 2 jQuery plugin.

Answer 1

Set the dataType="local" to the sjg:grid and remove href attribute. Then provide row data from the array. For example

<sjg:grid
    id="gridtable"
    caption="Example (Editable/Multiselect)"
    dataType="local"
    pager="true"
    navigator="true"
    navigatorSearchOptions="{sopt:['eq','ne','lt','gt']}"
    navigatorAddOptions="{height:280, width:500, reloadAfterSubmit:true}"
    navigatorEditOptions="{height:280, width:500, reloadAfterSubmit:false}"
    navigatorEdit="true"
    navigatorView="true"
    navigatorViewOptions="{height:280, width:500}"
    navigatorDelete="true"
    navigatorDeleteOptions="{height:280, width:500,reloadAfterSubmit:true}"
    gridModel="gridModel"
    rowList="5,10,15"
    rowNum="5"
    rownumbers="true"
    editurl="%{editurl}"
    editinline="true"
    multiselect="true"
    onSelectRowTopics="rowselect"
    >

    <sjg:gridColumn name="id" index="id" title="Id" formatter="integer" editable="false" sortable="true" search="true" sorttype="integer" searchoptions="{sopt:['eq','ne','lt','gt']}"/>
    <sjg:gridColumn name="name" index="name" key="true" title="Country Name" editable="true" edittype="text" sortable="true" search="true" sorttype="text"/>

</sjg:grid>
<script type="text/javascript">
  $(document).ready(function(){
    var mydata = [{id:"1",name:"Roman C"}];
    //for(var i=0;i<=mydata.length;i++) $("#gridtable").jqGrid('addRowData',i+1,mydata[i]);
    $("#gridtable").jqGrid('setGridParam', {
        data: mydata
    }).trigger("reloadGrid");
  });
</script>

Answer 2

The above code works perfect, it add rows for each grid load. If u want new data every time u can use this:

            var allParameters = $("#gridtable").jqGrid("getGridParam");
                        allParameters.data = myData;
                        $("#gridtable").trigger('reloadGrid');

Instead of:

      $("#gridtable").jqGrid('setGridParam', {
                            data: mydata
                        }).trigger("reloadGrid");

Also if u want to make an ajax call to action and fetch list and parse it to add to myData. Check this:

  $.ajax({
            url: "myAction.action", cache: false, dataType: 'json', data: "employeeId=" +
                    employeeIdList,
            success: function (data) {
                var jsonData = JSON.stringify(data.jsonResponse);
                var parsedData = JSON.parse(jsonData);
                if (parsedData.hasResults) {
                    var myData = parsedData.jsonResults;
                    $(document).ready(function () {
                        var allParameters = $("#gridtable").jqGrid("getGridParam");
                        allParameters.data = myData;
                        $("#gridtable").trigger('reloadGrid');

                    });
                }
            } });