Table Using JQGrid in Extenal Javascript

Question

I have following code for dispay items. like :-

enter image description here

function DisplayNewList()
{

                $("#list").jqGrid({
                    datatype: 'json',

                    url: 'Service.svc/json/getIngredients/',

                    mtype: 'GET',


                    colNames: ['Ingredents', 'Value'],
                    colModel: [
                        { name: 'Ingredents', index: 'Ingredents', width: 100 },
                        { name: 'value' }


                    ]
                });



}

I used the above jqgrid. But not getting table in proper place and not displaying any data on it.

I'm getting 2 cells(heading of table) in the bottom of my page. Not inside the box where i specified.

'list' is table id and it is there in .aspx file. The above code is there in external java script file.

Can you please tell me where to place jqgrid. and how to use it here.

Now Getting the table like this:-

enter image description here

For getIngredients I have Service Like this:- IService:

[OperationContract]
         [WebInvoke(Method = "GET",
          UriTemplate = "json/getIngredients",
          ResponseFormat = WebMessageFormat.Json,
          BodyStyle = WebMessageBodyStyle.Wrapped)]
         [return: MessageParameter(Name = "Status")]
         List<ItemList> GetIngredients;

Thank you.

score 1 · Answer 1 · edited May 23 '17 at 12:06

1

You should place empty table <table id="list"></table> inside of HTML fragment. You should convert the empty table to grid by usage $("#list").jqGrid({...}); after the <table> is already placed on the page.

UPDATED: You have the problem with loading data from url: kimsHost + 'Service.svc/json/getIngredients/'. I recommend you to do the following:

Add loadError callback. See the answer for details.
Add the following options/callbacks:

ajaxGridOptions: { contentType: "application/json" },
serializeRowData: function (data) {
    return JSON.stringify(data);
},
gridview: true,
autoencode: true

I recommend you to consider to use loadonce: true option. You should use it if the server returns all data and not implemented server side paging, sorting and filtering/searching.
I recommend to remove unneeded index properties from colModel, verify that sortname: 'Timestamp' is the option which you really need. You should remove trailing , at the end of colModel. The syntax ...},] is error in JavaScript. The error will be ignored by most modern web browsers, but some web browsers, like IE8, can find it critical. It's better to fix syntax of JavaScript code.

edited May 23 '17 at 12:06

Community

1
1

answered Mar 23 '15 at 11:13

Oleg

220,925
34
403
798

Yes. Same thing I have done. The values inside jqgrid is not displaying. While debugging i will get 2 rows. But those are not displaying here. – IMRUP Mar 23 '15 at 11:33
@IMRUP: Where is the code which you use now? Do you see nothing or you see empty grid with column headers? Do you sure that `
` is already placed on the page at the moment? You can insert `alert($("#list").length);` directly before creating the grid. If alert displays 1 then the table is on the page. If you will see 0 then you try to create grid in the wrong moment. – Oleg Mar 23 '15 at 11:51
is there in aspx and the grid is in external java script – IMRUP Mar 24 '15 at 04:45
@IMRUP: see **UPDATED** part of my answer. – Oleg Mar 24 '15 at 06:04
I updated every unneeded code . I forgot to change here. My problem is , Now i cant display the data inside that table. Getting 2 rows of data, but its not displaying inside the table. – IMRUP Mar 24 '15 at 06:21
@IMRUP: Did you seem my previous comment? Do you included `loadError`, `ajaxGridOptions`, ... I recommend you to use [Fiddler](http://www.telerik.com/fiddler) or Developer tools of IE/Chrome/Firefox to trace HTTP traffic. You should append your question with exact response of the server. – Oleg Mar 24 '15 at 06:26
Yes. Its not showing error. I added loadcomplete: function(){ alert("Function works");} and loaderror: .... It executed loadcomplete. and got alert function works. – IMRUP Mar 24 '15 at 06:31
@IMRUP: Sorry, but I don't want to repeat everything twice. **You need include the exact JSON response**. By the way you should **not use `name: '%'`**. `name` value will be used to construct ids of HTML elements. – Oleg Mar 24 '15 at 06:41
In my code i used value. The same name what i used in procedure. Im not able to display the data inside table. that is the problem – IMRUP Mar 24 '15 at 06:47
@IMRUP: `colModel` and `jsonReader` have to corresponds the format of JSON data. One can't help you without to see JSON data. – Oleg Mar 24 '15 at 07:49

Table Using JQGrid in Extenal Javascript

1 Answers1