Question

我想使用拆分器在点击左侧网格的特定记录时刷新右侧网格。我正在使用Kendo UI。这是我的表单代码

<div id="vertical_beemmfg">
<div id="horizontal_beemmfg">

    <div id="left-pane_beemmfg" >
           <div id="enquiry_grid"></div>
    </div>

    <div id="right-pane_beemmfg">
        <div id="view_transaction_record_grid"></div>
    </div>
</div>

$("#view_transaction_record_grid").hide();

var splitterv = $("#vertical_beemmfg").kendoSplitter({
                    orientation: "vertical",
                    panes: [
                        { collapsible: false },
                        { collapsible: false, size: "100px" },
                        { collapsible: false, resizable: true, size: "100px" }
                    ]
                });
var splitter = $("#horizontal_beemmfg").kendoSplitter({
    orientation: "horizontal",
    panes: [{ collapsible: true, size: "50%" }, 
            { collapsible: true, size: "50%" }]
}).data("kendoSplitter");

var en_name, dataSource_trans;          
         $.ajax({
            type: "POST",
            url  : "operation/amount/amount_details_crud.php?type=enq_name",
            dataType: "jsonp",
            success: function(response1) { 

                en_name = response1;
            }
        });
var invoice_format;         
         $.ajax({
            type: "POST",
            url  : "operation/amount/amount_details_crud.php?type=invoice_format_read_name",
            dataType: "jsonp",
            success: function(response2) { 
                invoice_format = response2;
            }
        });

var crudServiceBaseUrl = "operation/amount/transaction_record/view_transaction_record_crud.php?type=",
    dataSource = new kendo.data.DataSource({
        transport: {                
            read: {
                url: crudServiceBaseUrl + "read",
                dataType: "jsonp"
            },
            parameterMap: function (options, operation) {
                if (operation !== "read" && options.models) {
                    return {
                        models: kendo.stringify(options.models)
                    };
                }
            }
        },
        batch: true,
        pageSize: 5,
        schema: {
                model: {
                    id: "amount_id",
                    fields: {
                        amount_id: { editable: false, nullable: true },
                        enquiry_id: {type: "number", validation: { required: true}},
                        project_id: {type: "number",validation: {required: true}},
                        enquiry_unique_id: {type: "string",validation: {required: false}},
                        project_unique_id: {type: "string",validation: {required: false}},
                        invoice_id: {type: "number",validation: {required: false}},
                        invoice_format_id: {type: "number",validation: {required: false}},
                        job_no: {type: "string",validation: {required: false}},
                        total_amount: {type: "string",validation: {required: false}},
                        balance_amount: {type: "string",validation: {required: false}},
                        completed_status: {type: "string",validation: {required: false}},
                        cheque_status: {type: "string",validation: {required: false}},
                        amount_in_words: {type: "string",validation: {required: false}}
                    }
                }
        }
    });

$("#enquiry_grid").kendoGrid({dataSource: dataSource,
    navigatable: true,
    filterable: true,
    selectable: "multiple",
    change: transaction,
    sortable: true,
    scrollable: true,
    pageable: {
        refresh: true,
        pageSizes: true
    },
    resizable: true,
    height: 300,
    editable: "inline",
     columns: [

        { 
            field: "enquiry_id", 
            title: "Enquiry Name", 
            width: 80,
            template: "#= enquiry(enquiry_id) #"

        }]});

$("#view_transaction_record_grid").kendoGrid({ dataSource: dataSource_trans,
    navigatable: true,
    filterable: true,
    selectable: "multiple",
    // change: transaction,
    sortable: true,
    scrollable: true,
    pageable: {
        refresh: true,
        pageSizes: true
    },
    resizable: true,
    height: 300,
    editable: "inline",
    columns: [{ 
            field: "enquiry_id", 
            title: "Enquiry Name", 
            width: 80,
            template: "#= enquiry(enquiry_id) #"

        }]});

function enquiry(enquiry_id) {
for (var i = 0; i < en_name.length; i++) {
    if (en_name[i].enquiry_id == enquiry_id) {
        return en_name[i].enquiry_name;
    }
}}

function invoice_name(invoice_format_id) {
for (var i = 0; i < invoice_format.length; i++) {
    if (invoice_format[i].invoice_format_id == invoice_format_id) {
        return invoice_format[i].invoice_format_name;
    }
}}

function transaction(e){
var enquiry_grid_godown =  $("#enquiry_grid").data("kendoGrid");
      var enquiry_grid_row         =  $(enquiry_grid_godown.element).find("tr.k-state-selected");
             if (enquiry_grid_row.length > 0  && enquiry_grid_row.hasClass("k-grid-edit-row") === false ) {
      var customer_1  = enquiry_grid_godown.dataItem(enquiry_grid_row);
      var enquiry_id = customer_1.enquiry_id;


$.ajax({    
      type: "POST",       
      url: "operation/amount/transaction_record/view_transaction_record_crud.php?type=transaction_list",         
      data:'&enquiry_id='+enquiry_id,
      dataType: "jsonp",
      success: function(response) { 

            dataSource_trans = response;
            $("#view_transaction_record_grid").data("kendoGrid").dataSource.read();
                $("#view_transaction_record_grid").show();
      }
});}}</script>

问题是右侧网格在点击第一个网格时没有刷新。

Answer 1

我自己找到了答案，我在另一个表格上移动了第二个网格，并在每次点击

时刷新

如何使用kendoUI在点击第一个拆分器网格数据时刷新右分离器的网格

1 个答案: