SHARE
TWEET

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

absjabed May 27th, 2018 147 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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>
RAW Paste Data
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
Top