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

Question

I am trying to make use of EasyUI library. I am having issues getting the Data grid working.

I have provided below what I have so far:

Header

<script type="text/javascript" src="assets/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.easyui.min.js"></script>

HTML

<div id="user_control_datagrid"></div>

JavaScript

$( document ).ready(function() {
    console.log( "ready!" );

    $( ".user_control_search" ).click(function( event ) {
        event.preventDefault();
        console.log("FORM SEARCH CLICKED");

        var formData = $('#user_control_form').serializeArray();

        console.log("Form Data: ", formData);

        $('#user_control_datagrid').datagrid({
            url:'user.php',
            queryParams:formData,
            columns:[[
                {field:'code',title:'Code',width:100},
                {field:'name',title:'Name',width:100},
                {field:'price',title:'Price',width:100,align:'right'}
            ]]
        });
    });
});

Every time I try to run this, I am getting this error :

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

Please can someone advise me what I am doing wrong and how I could fix this issue ?

Thank You

Answer 1

Try this code,

var index=$('#user_control_datagrid').datagrid('getRows').length-1;         
$('#dgItmInfo').datagrid('selectRow', index).datagrid('getEditors', index);