date picker in jqgrid asp.net mvc

Question

in my jqgrid need a popup date picker for EntryDate..but don't what is wrong

<script type="text/javascript"> 
    jQuery("#Countrylist").jqGrid({
        url: '/Country/GetAllCountries/',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['EntryDate','EntryBy'],
        colModel: [
         {
             name: 'EntryDate', index: 'EntryDate', width: 90, editable: true,
             editoptions: {
                 dataInit: function (el)
                 { setTimeout(function () { $(el).datepicker(); }, 200); }
             }
         },
          { name: 'EntryBy', index: 'EntryBy', width: '200', align: 'center', editable: true, editable: true }

        ],
        editurl: "/Country/Edition",
        }); jQuery("#Countrylist").jqGrid('navGrid', '#Countrypager',
    { edit: true, add: true, del: true, search: false, refresh: true },
             {
                 closeOnEscape: true, reloadAfterSubmit: true,
                 closeAfterEdit: true, left: 450, top: 300, width: 520
             },
             { closeOnEscape: true, reloadAfterSubmit: true, left: 450, top: 300, url: "/Country/Deletion", mtype: "POST" },
            { closeOnEscape: true, reloadAfterSubmit: true, left: 450, top: 300 });
  });
    </script>

in my layout page i have following reference

<link href="~/Scripts/jquery.jqGrid-4.5.2/css/ui.jqgrid.css" rel="stylesheet" />
        <link href="~/Scripts/pepper-grinder/jquery.ui.theme.css" rel="stylesheet" />
        <script src="~/jquery-ui-1.9.2.custom/js/jquery-1.8.3.js"></script>
        <script src="~/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js"></script>
        <script src="~/jquery-ui-1.9.2.custom/development-bundle/ui/jquery.ui.datepicker.js"></script>
        <script src="~/Scripts/jquery.jqGrid-4.5.2/src/jquery.jqGrid.js"></script>
        <script src="~/Scripts/jquery.jqGrid-4.5.2/src/i18n/grid.locale-en.js"></script>
        <script src="~/Scripts/jquery.jqGrid-4.5.2/src/jquery.jqGrid.js"></script>
        <script src="~/Scripts/jquery.jqGrid-4.5.2/src/jqModal.js"></script>
        <script src="~/Scripts/jquery.jqGrid-4.5.2/src/jqDnR.js"></script>

firebug shows the following error

$(...).datepicker is not a function

but i can see that datepicker is loading successfully in the firebugs net tab

Answer 1

i just removed

@Scripts.Render("~/bundles/jquery")

from my layout.cshml now

$(function () {
        jQuery("#Countrylist").jqGrid({**mycode**})}); 

as @TheCodeDestroyer told.. now its working

Answer 2

You need to wait until everything is loaded until you init plugins in this case

$(function () {
   jQuery("#Countrylist").jqGrid({ 
        url: '/Country/GetAllCountries/',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['EntryDate','EntryBy'],
        colModel: [
         {
             name: 'EntryDate', index: 'EntryDate', width: 90, editable: true,
             editoptions: {
                 dataInit: function (el)
                 { setTimeout(function () { $(el).datepicker(); }, 200); }
             }
         },
          { name: 'EntryBy', index: 'EntryBy', width: '200', align: 'center', editable: true, editable: true }

        ],
        editurl: "/Country/Edition",
        }); jQuery("#Countrylist").jqGrid('navGrid', '#Countrypager',
        { edit: true, add: true, del: true, search: false, refresh: true },
             {
                 closeOnEscape: true, reloadAfterSubmit: true,
                 closeAfterEdit: true, left: 450, top: 300, width: 520
             },
             { closeOnEscape: true, reloadAfterSubmit: true, left: 450, top: 300, url: "/Country/Deletion", mtype: "POST" },
            { closeOnEscape: true, reloadAfterSubmit: true, left: 450, top: 300 });
   });
});

EDIT: You can get more info at http://api.jquery.com/ready/

Answer 3

I've done his in the past http://jsfiddle.net/Yenros/bbPeP/

Excuse me... but i haven't used this component in quite a while but the code should still be relevant

   initDateEdit = function (elem) {
            setTimeout(function () {
                $(elem).datepicker({
                    dateFormat: 'dd-M-yy',
                    ...
                });
            }, 100);
        };

then in your col model

{ name: 'Week_Start', formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, datefmt: 'd-M-Y', editoptions: { dataInit: initDateEdit }, searchoptions: { dataInit: initDateSearch } }