Click here to Skip to main content
15,868,141 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am working on a sample of JQ Grid. I worked with JQ Grid so many times in simple web application and website, there i didn't face any problem. But this is the first time i am working with MVC 4 . I am creating 1 million data dynamically and converting it to the json. In the view i am accepting the json and bind to the jqGrid. But even document.ready function is not firing. Here i am giving my codes. Any help is appreciated .


View :

Razor
@{
    ViewBag.Title = "getJson";
}
@Styles.Render("~/css/jquery-ui.css")
@Styles.Render("~/css/jquery-ui-1.10.4.css")
@Styles.Render("~/themes/ui.jqgrid.css")

@Scripts.Render("~/js/jquery-2.1.1.js")
@Scripts.Render("~/js/trirand/i18n/grid.locale-en.js")  
@Scripts.Render("~/js/trirand/jquery.jqGrid.js")
@Scripts.Render("~/js/trirand/jquery.jqDatePicker.js")  
@Scripts.Render("~/js/trirand/jquery.jqAutoComplete.js")
@Scripts.Render("~/js/JQGridSettings.js")
     
<style type="text/css">
    /* set the size of the datepicker search control for Order Date*/
    #ui-datepicker-div {
        font-size: 11px;
    }

    /* set the size of the autocomplete search control*/
    .ui-menu-item {
        font-size: 11px;
    }

    .ui-autocomplete {
        font-size: 11px;
    }
</style>
   
<table id="jqGrid"></table>
<div id="jqGridPager"></div>






My JS :

C#
$(document).ready(function () {
    alert("");
       $("#jqGrid").jqGrid({
        async: false,
        url: '/Home/getJson',
        mtype: "GET",
        datatype: "json",
        page: 1,
        colNames: ['Order ID', 'Customer ID', 'Order Date', 'Freight', 'Ship Name'],
        colModel: [
            { name: 'OrderID', key: true, width: 75 },
            {
                name: 'CustomerID',
                width: 150,
                // stype defines the search type control - in this case HTML select (dropdownlist)
                stype: "select",
                // searchoptions value - name values pairs for the dropdown - they will appear as options
                searchoptions: { value: "[All]:[All];ALFKI:ALFKI;ANATR:ANATR;ANTON:ANTON;AROUT:AROUT;BERGS:BERGS;BLAUS:BLAUS;BLONP:BLONP;BOLID:BOLID;BONAP:BONAP;BOTTM:BOTTM;BSBEV:BSBEV;CACTU:CACTU;CENTC:CENTC;CHOPS:CHOPS;COMMI:COMMI;CONSH:CONSH;DRACD:DRACD;DUMON:DUMON;EASTC:EASTC;ERNSH:ERNSH;FAMIA:FAMIA;FOLIG:FOLIG;FOLKO:FOLKO;FRANK:FRANK;FRANR:FRANR;FRANS:FRANS;FURIB:FURIB;GALED:GALED;GODOS:GODOS;GOURL:GOURL;GREAL:GREAL;GROSR:GROSR;HANAR:HANAR;HILAA:HILAA;HUNGC:HUNGC;HUNGO:HUNGO;ISLAT:ISLAT;KOENE:KOENE;LACOR:LACOR;LAMAI:LAMAI;LAUGB:LAUGB;LAZYK:LAZYK;LEHMS:LEHMS;LETSS:LETSS;LILAS:LILAS;LINOD:LINOD;LONEP:LONEP;MAGAA:MAGAA;MAISD:MAISD;MEREP:MEREP;MORGK:MORGK;NORTS:NORTS;OCEAN:OCEAN;OLDWO:OLDWO;OTTIK:OTTIK;PERIC:PERIC;PICCO:PICCO;PRINI:PRINI;QUEDE:QUEDE;QUEEN:QUEEN;QUICK:QUICK;RANCH:RANCH;RATTC:RATTC;REGGC:REGGC;RICAR:RICAR;RICSU:RICSU;ROMEY:ROMEY;SANTG:SANTG;SAVEA:SAVEA;SEVES:SEVES;SIMOB:SIMOB;SPECD:SPECD;SPLIR:SPLIR;SUPRD:SUPRD;THEBI:THEBI;THECR:THECR;TOMSP:TOMSP;TORTU:TORTU;TRADH:TRADH;TRAIH:TRAIH;VAFFE:VAFFE;VICTE:VICTE;VINET:VINET;WANDK:WANDK;WARTH:WARTH;WELLI:WELLI;WHITC:WHITC;WILMK:WILMK;WOLZA:WOLZA" }
            },
             {
                 name: 'OrderDate',
                 width: 150,
                 searchoptions: {
                     // dataInit is the client-side event that fires upon initializing the toolbar search field for a column
                     // use it to place a third party control to customize the toolbar
                     dataInit: function (element) {
                         $(element).datepicker({
                             id: 'orderDate_datePicker',
                             dateFormat: 'M/d/yy',
                             minDate: new Date(2010, 0, 1),
                             maxDate: new Date(2020, 0, 1),
                             showOn: 'focus'
                         });
                     }
                 }
             },
            { name: 'Freight', width: 150 },
            {
                name: 'ShipName',
                width: 150,
                searchoptions: {
                    // dataInit is the client-side event that fires upon initializing the toolbar search field for a column
                    // use it to place a third party control to customize the toolbar
                    dataInit: function (element) {
                        $(element).autocomplete({
                            id: 'AutoComplete',
                            source: 'data.json',
                            autoFocus: true
                        });
                    }
                }
            }
        ],

        width: 750,
        height: 250,
        rowNum: 20,
        pager: "#jqGridPager"
    });

    $('#jqGrid').filterToolbar();
});



My controller :

namespace JQGrid.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
        public JsonResult getJson()
        {
            JsonModel jsm = new JsonModel();  
            var collection=jsm.jsonResultString();
            return (Json(collection, JsonRequestBehavior.AllowGet));           
        }
        protected override JsonResult Json(object data, string contentType, System.Text.Encoding contentEncoding, JsonRequestBehavior behavior)
        {
            return new JsonResult()
            {
                Data = data,
                ContentType = contentType,
                ContentEncoding = contentEncoding,
                JsonRequestBehavior = behavior,
                MaxJsonLength = Int32.MaxValue
            };
        }
       

    }
}


And when i checked in the browser console. The page rendered as the following . Please look.

HTML
<html>

    <head></head>
    <body>
        <pre>

            "[{\"OrderID\":\"0\",\"CustomerID\":\"SCT0\",\"Ord…

       
    </body>

</html>

Thank you.
Posted
Updated 12-Oct-14 20:08pm
v10
Comments
[no name] 13-Oct-14 1:19am    
Have you checked in the console if the scripts references are getting rendered??
[no name] 13-Oct-14 1:32am    
Yes i checked . The script reference is not rendered and DOM element is not added. In the browser it just write the entire json.

1.Maybe your jQuery libraries are added in the final page bellow the invocation of your $(document).ready, so you should check this in your master page and also in the browser by using "View page source".

2.If you are not using Layout (master page) for your page, you should not use "@section Scripts" block and put your script directly in your view.
 
Share this answer
 
v2
Comments
[no name] 13-Oct-14 1:29am    
I am not using the master page. and also i checked in the browser , The DOM element is not even loaded. Only it loaded the json file in browser
Raul Iloc 13-Oct-14 1:46am    
See my update (2nd point) in my solution above!
[no name] 13-Oct-14 1:49am    
Yeah now i removed that section part and made that js codes to separate file and tried. But still its not working . Please see my updated question.
Raul Iloc 13-Oct-14 2:23am    
1.You should also clear your browser cache, then try again.
2.Check also in your browser (view source code) if the scripts section contain the referenced .JS files in the proper order.
[no name] 13-Oct-14 2:28am    
I cleared my cache, and as i said both js and DOM is not rendering . I think thats the issue. Is there anything that we need to do special in MVC 4?
The default behaviour on debug mode true is to ignore jquery.jqGrid.min.js,
So please try with the normal js file,
jquery.jqGrid.js
I hope this works out.
Please post back your comments if any issue.
Thanks
:)
 
Share this answer
 
Comments
[no name] 13-Oct-14 1:31am    
Can you please explain your idea? Is there any such diff between min and normal version?
[no name] 13-Oct-14 1:38am    
Yes i had gone through some solution actually they had mentioned that jquery.jqGrid.min.js is ignored in debug mode. So please try with changing the .min.js files to .js files and try.
[no name] 13-Oct-14 1:40am    
Buddy Alert is not firing even i changed the debug mode. And can you please check my updated question. I have added the output also. And i removed the debugging. Now also DOM is not even generating.
[no name] 13-Oct-14 1:42am    
Buddy please check here http://stackoverflow.com/questions/12466204/why-isnt-my-scripts-rendersection-working-for-jqgrid
You could do one thing, let the debug mode be on/true and just comment the .min.js files and add the .js files and check.
[no name] 13-Oct-14 1:58am    
Buddy Any improvement!!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900