EasyUI Forum

Two easyui datagrid on the one page.
The page's 'gridmaster' is successful show data, but the 'gridleft' can not do it.
I check it step by step.when I clear the gridmaster and gridleft class="easyui-datagrid".
like this:
<div id="gridleft" inline="true"></div>
<div id="gridmaster" inline="true"></div>
both of them are successful.

I don't know why?




<div id="tb" style="padding:0px;height:auto">
    <div>
        Code: <input id="btnum" class="easyui-textbox pagetextbox" type="text">
        Name: <input id="btnname" class="easyui-textbox pagetextbox" type="text">
        Status:<select id="comstatus" class="easyui-combobox" editable="false" name="state" style="width:70px;">
            <option value="-1">All</option>
            <option value="0">Normal</option>
            <option value="1">Expire</option>
        </select>
        <a id="btnLoad" href="#" class="easyui-linkbutton" iconcls="icon-search" onclick="doSearchPage()">Query</a>
    </div>
</div>
<div id="ptmain_layout" class="easyui-layout" data-options="fit:true" style="width:100px;height:100px;">
    <div id="ptp1" data-options="region:'west',split:false" title="Function List" style="width:20%;padding:0px">
        <div id="gridleft" class="easyui-datagrid" inline="true"></div>
        </div>
        <div id="ptp2" data-options="region:'center'" title="Detail Information">
            <div id="gridmaster" class="easyui-datagrid" inline="true"></div>
        </div>
 </div>



    <script>
        $(function () {
            var height1 = $(window).height();
            $("#ptmain_layout").attr("style", "width:100%;height:" + height1 + "px");
            $("#ptmain_layout").layout("resize", {
                width: "100%",
                height: height1 + "px"
            });
        
            $('#gridleft').datagrid({
                title: '',
                url: '/Box/PowerType/TypeReload',
                method: 'get',
                dataType: "json",
                collapsible: true,
                fit: true,
                fitColumns: true,
                rownumbers: true,
                striped: true,
                view: scrollview,
                autoRowHeight: false,
                remoteSort: false,
                columns: [[
                    { field: 'type_number', title: 'Code', hidden: true },
                    { field: 'type_name', title: 'Name', width: '150px' }
                ]],
                singleSelect: true,
                onLoadSuccess: function (data2) {
                    if (data2.rows.length > 0) {
                        $(this).datagrid("selectRow", 0);
                    }
                },
                onClickRow: function (rowIndex, rowData) {
                    doSearchPage();
                }
            });




            $('#gridmaster').datagrid({
                title: '',
                url: '/Box/PowerType/Reload',
                method: 'get',
                dataType: "json",
                fit: true,
                toolbar: '#tb',
                fitColumns: true,
                rownumbers: true,
                striped: true,
                view: scrollview,
                autoRowHeight: false,
                pageSize: 20,
                pagination: false,
                remoteSort: false,
                columns: [[
                    { field: 'sp_id', hidden: true, title: 'ID' },
                    { field: 'sp_number', title: 'Code', width: '140px', sortable: true },
                    { field: 'sp_name', title: 'Name', width: '150px', sortable: true },
                    { field: 'sp_default', title: 'Default Value', width: '50px', sortable: true }
                ]],
                queryParams: {
                    typenumber: '0',
                    number: $('#btnum').val(),
                    name: $('#btnname').val(),
                    status: $('#comstatus').combobox('getValue'),
                },
                singleSelect: true,
                selectOnCheck: false,
                checkOnSelect: false,
                onLoadSuccess: function (data) {
                    if (data.rows.length > 0) {
                        $('#gridmaster').datagrid("selectRow", 0);
                    }
                }
            });

    });

There are no problems with the code. You may need to describe the 'gridleft' in more detail. Does the datagrid display properly? If no data loaded, please open browser's debug tool to check if the loading request is normal.

Yes.there no problems with the code.
I opened browse's debug tool.There no detect error.
The data load data from the sqlserver.but can't show data in frontend.
If switch the order. the 'gridmaster' can't display data,the 'gridleft' is normal.
I clear the class="easyui-datagrid" property both of them.
'gridmaster'  and 'gridleft' display data is normal.