API tools faq
paste
Advertisement
absjabed

Uncaught TypeError: $(...).jqxGrid is not a function

absjabed
May 27th, 2018
831
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
ASP 10.76 KB | None | 0 0
raw download clone embed print report
  1. @*@section Menu {
  2.     @Scripts.Render("~/Scripts/Forms/Advanced/menu")
  3. }*@
  4. @Styles.Render("~/Styles/Elements/General")
  5. @Styles.Render("~/AdminLTE/plugins/select2/css")
  6. @Styles.Render("~/AdminLTE/dist/css")
  7. <link href="~/App_Content/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
  8. <link rel="stylesheet" href="~/App_Content/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
  9. @*@Scripts.Render("~/AdminLTE/plugins/jquery/js")*@
  10. @Scripts.Render("~/jqwidgets/js")
  11. <style>
  12.  
  13.     #table-wrapper {
  14.   position:relative;
  15.  
  16. }
  17.     #table-scroll {
  18.   height:250px;
  19.   overflow:auto;
  20. }
  21.     #table-wrapper table {
  22.   width:100%;
  23.  
  24. }
  25. #table-wrapper table thead th .text {
  26.   position:absolute;
  27.   top:-20px;
  28.   z-index:2;
  29. }
  30. </style>
  31.  
  32. <div class="row">
  33.  
  34.     <div class="col-md-2"></div>
  35.     <div class="col-md-8">
  36.         <div class="nav-tabs-custom">
  37.             <ul class="nav nav-tabs">
  38.                 <li class="active"><a href="#tab_1" data-toggle="tab">Add Scorecard (SC)</a></li>
  39.                 <li><a href="#tab_2" data-toggle="tab">Assign KPI to SC</a></li>
  40.  
  41.                 @*<li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li>*@
  42.             </ul>
  43.             <div class="tab-content">
  44.                 <div class="tab-pane active" id="tab_1">
  45.  
  46.  
  47.                     <form role="form">
  48.                         <div class="box-body">
  49.                             <div class="form-group">
  50.                                 <label for="txtScName">Scorecard Name:<span style="color:red"> *</span></label>
  51.                                 <input type="text" class="form-control" id="txtScName" placeholder="Ex: SectionName/Department_Designation_SC">
  52.                             </div>
  53.  
  54.                         </div>
  55.                         <div class="box-body">
  56.                             <div class="form-group">
  57.                                 <label for="txtScDes">Scorecard Description:<span style="color:red"> *</span></label>
  58.                                 <input type="text" class="form-control" id="txtScDes" placeholder="Ex: Who will be the user of this scorecard?">
  59.                             </div>
  60.  
  61.                         </div>
  62.                         <div class="box-footer">
  63.                             <button id="submitSc" class="btn btn-primary">Add Scorecard</button>
  64.                         </div>
  65.                     </form>
  66.  
  67.                     <div class="box">
  68.                         <div class="box-header">
  69.                             <h3 class="box-title">Existing Scorecard's in KDS PMS</h3>
  70.                         </div>
  71.                         <div class="box-body no-padding">
  72.                             <div id="table-wrapper">
  73.                                 <div id="table-scroll">
  74.                                     <table id="sctable" class="table table-bordered">
  75.                                         <tr>
  76.                                             <th style="text-align: left; width: 10px">#</th>
  77.                                             <th style="text-align: left">Scorecard Name</th>
  78.                                             <th style="text-align: left">Description</th>
  79.                                         </tr>
  80.                                     </table>
  81.                                 </div>
  82.                             </div>
  83.                         </div>
  84.                     </div>
  85.  
  86.  
  87.  
  88.                 </div>
  89.                 <div class="tab-pane" id="tab_2">
  90.  
  91.  
  92.                     <form role="form">
  93.                         <div class="box-body">
  94.                             <div class="form-group">
  95.                                 <label>Scorecard:<span style="color:red"> *</span></label>
  96.                                 <div id='jqxSelect'>
  97.                                 </div>
  98.                                 <br />
  99.                                 <div id="kraKpiGrid">
  100.                                 </div>
  101.                             </div>
  102.                         </div>
  103.                         <div class="box-footer">
  104.                             <button type="submit" id="submitsckpi" class="btn btn-primary">Assign Scorecard</button>
  105.                         </div>
  106.                     </form>
  107.  
  108.                 </div>
  109.             </div>
  110.         </div>
  111.     </div>
  112.     <div class="col-md-2"></div>
  113.     </div>
  114.  
  115. <script>
  116.  
  117.         var scorecardInfoData = @Html.Raw(Json.Encode(ViewBag.scInfo));
  118.         @*var kpiData = @Html.Raw(Json.Encode(ViewBag.kpis));*@
  119.         var kpiViewData = @Html.Raw(Json.Encode(ViewBag.kpiView));
  120.         var doItNow = 0;
  121.         var krakpiViewDataSource =
  122.       {
  123.           datatype: "json",
  124.           datafields: [
  125.                         { name: 'iVisionID', type: 'number' },
  126.                         { name: 'vVisionName', type: 'string' },
  127.                         { name: 'vStartingYear', type: 'string' },
  128.                         { name: 'vTargetYear', type: 'string' },
  129.                         { name: 'iPerspectiveID', type: 'number' },
  130.                         { name: 'vPerspectiveName', type: 'string' },
  131.                         { name: 'fPerspectiveWeight', type: 'number' },
  132.                         { name: 'iKRA_ID', type: 'number' },
  133.                         { name: 'vKRA_Name', type: 'string' },
  134.                         { name: 'iKPI_ID', type: 'number' },
  135.                         { name: 'vKPI_Name', type: 'string' },
  136.                         { name: 'vKPI_Cal_type', type: 'string' },
  137.                         { name: 'vKPI_type', type: 'string' },
  138.                    
  139.                         { name: 'fWeightage', type: 'number' },
  140.                         { name: 'fTarget', type: 'number' },
  141.                         { name: 'fMinimum', type: 'number' }
  142.           ],
  143.  
  144.           localdata: kpiViewData
  145.       }
  146.  
  147.  
  148.         var krakpiViewDataAdapter = new $.jqx.dataAdapter(krakpiViewDataSource);
  149.  
  150.  
  151.         $("#kraKpiGrid").jqxGrid(
  152.             {
  153.                 width: '100%',
  154.                 height: '100%',
  155.                 // autoheight: true,
  156.                 source: krakpiViewDataAdapter,
  157.                 showfilterrow: true,
  158.                 //    height: 30,
  159.                 filterable: true,
  160.                 //  filtermode: 'excel',
  161.                 //selectionmode: 'singlerow',
  162.                 enabletooltips: true,
  163.                 selectionmode: 'checkbox',//'singlecell',
  164.                 //showstatusbar: true, showaggregates: true,
  165.                 //autoheight: true,
  166.                 theme: 'energyblue',
  167.                 //autorowheight: true,
  168.                 groupable: true,
  169.                 //selectionmode: 'checkbox',
  170.                 editable: true,
  171.  
  172.                 sortable: true,
  173.                 columnsresize: true,
  174.                 //    groupable: true,
  175.                 //ready: function () {
  176.                 //    $('#GridMonthWise').jqxGrid('addgroup', 'vBuyerName');
  177.                 //    $('#GridMonthWise').jqxGrid('expandgroup', 0);
  178.                 //},hidden: true   { name: 'vDHID', type: 'string' },
  179.                 columns: [
  180.                       { text: 'iVisionID', datafield: 'iVisionID', width: '1%', editable: false, hidden: true },
  181.                       { text: 'vVisionName', datafield: 'vVisionName', width: '5%', editable: false, hidden: true},
  182.                       { text: 'vStartingYear', datafield: 'vStartingYear', width: '8%', editable: false, hidden: true },
  183.                       { text: 'vTargetYear', datafield: 'vTargetYear', width: '10%', editable: false, hidden: true },
  184.                       { text: 'iPerspectiveID', datafield: 'iPerspectiveID', width: '8%', editable: false , hidden: true},
  185.                       { text: 'vPerspectiveName', datafield: 'vPerspectiveName', width: '8%', editable: false, hidden: true },
  186.                       { text: 'fPerspectiveWeight', datafield: 'fPerspectiveWeight', width: '3%', editable: false, hidden: true },
  187.                  
  188.                       { text: 'KPI ID', datafield: 'iKPI_ID', width: '5%', editable: false },
  189.                       { text: 'KPI Name', datafield: 'vKPI_Name', width: '40%', editable: false },
  190.                       { text: 'iKRA_ID', datafield: 'iKRA_ID', width: '3%', editable: false , hidden: true },
  191.                       { text: 'KRA Name', datafield: 'vKRA_Name', width: '35%', editable: false },
  192.                  
  193.                       { text: 'Calculation type', datafield: 'vKPI_Cal_type', width: '10%', editable: false },
  194.                       { text: 'KPI type', datafield: 'vKPI_type', width: '10%', editable: false},
  195.  
  196.                       { text: 'Weightage', datafield: 'fWeightage', columnformat: 'd', width: '10%', editable: true},
  197.                       { text: 'Target', datafield: 'fTarget', columnformat: 'd', width: '10%', editable: true},
  198.                       { text: 'Minimum', datafield: 'fMinimum', columnformat: 'd', width: '10%', editable: true}
  199.  
  200.                 ]
  201.             });
  202.  
  203.         var sourcelen = scorecardInfoData.length;
  204.         var source = [];
  205.        
  206.         for(var i =0; i<sourcelen; i++){
  207.             source[i] = {
  208.                 value: scorecardInfoData[i].iAutoID,
  209.                 text:  scorecardInfoData[i].vScoreCardName + ' --> ' + scorecardInfoData[i].vScorecardDescription
  210.                
  211.             };
  212.         }
  213.         // Create a jqxDropDownList
  214.         $("#jqxSelect").jqxDropDownList({
  215.             source: source,  
  216.             theme: 'energyblue',
  217.             width: '100%',
  218.             height: '33px',
  219.             displayMember: 'text',
  220.             selectedIndex: 0,
  221.             valueMember: 'value'});
  222.  
  223.         $('#jqxSelect').on('change', function (event)
  224.         {    
  225.             var args = event.args;
  226.             // index represents the item's index.                      
  227.             var index = args.index;
  228.             var item = args.item;
  229.             // get item's label and value.
  230.             var label = item.label;
  231.             var value = item.value;
  232.             var type = args.type; // keyboard, mouse or null depending on how the item was selected.
  233.             var count =0;
  234.  
  235.             $.ajax({
  236.                 type: 'POST',
  237.                 url: '/KraKpi/getScoreCardWiseKPI',
  238.                 data: { scorecardID: value },
  239.                 cache: false,
  240.                 success: function (result) {
  241.  
  242.                     scWiseKpiData = result;
  243.  
  244.                     count = Object.keys(scWiseKpiData).length;
  245.                     console.log(count);
  246.                     debugger;
  247.                     var rows = $('#kraKpiGrid').jqxGrid('getrows');
  248.                     debugger;
  249.                     var s;
  250.                 }
  251.             });
  252.         });
  253.  
  254. </script>
  255. @section Scripts {
  256.     @Scripts.Render("~/AdminLTE/plugins/select2/js")
  257. }
  258. <script src="~/JsControllers/kraKpiController/setupScoreCard.js"></script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!