【问题标题】:Kendo Grid , Show different template in detail grid based on condition剑道网格,根据条件在详细网格中显示不同的模板
【发布时间】:2015-02-09 05:21:08
【问题描述】:

我正在使用剑道网格,它工作正常。我需要检查网格的每一行是否包含特定值,然后使用一个模板绑定数据,否则模板将不同。这可能吗 ?这是我的代码

function detailInit(e) {
        var isCreateGrid = true;
        var masterRowId = e.data.uid;
        var data = [];
        $.ajax({
            type: "GET",
            url: 'https://www.domain.com/details?&transactionId=' + e.data.TransactionId,
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            headers: { 'ccode': compCode },
            cache: false,
            async: false,
            success: function (result) {
                var jsonResult = JSON.parse(result);
                for (var i = 0; i < jsonResult.length; i++) {
                    if (jsonResult[i]["OldValue"] == null || jsonResult[i]["OldValue"] == '')
                        isCreateGrid = true;
                    else {
                        isCreateGrid = false;
                        break;
                    }
                }
                if (isCreateGrid) {
                    for (var i = 0; i < jsonResult.length; i++) {
                        data.push({ FieldUpdated: jsonResult[i]["ChangeColumns"], Value: jsonResult[i]["NewValue"] });
                    }
                } else {
                    for (var i = 0; i < jsonResult.length; i++) {
                        data.push({ FieldUpdated: jsonResult[i]["ChangeColumns"], Was: jsonResult[i]["OldValue"], Now: jsonResult[i]["NewValue"] });
                    }
                }
            }
        });
        var dataSource = new kendo.data.DataSource({ data: data });
        if (data.length == 0) {
            var grid = $("#logs").data("kendoGrid");
            grid.collapseRow("[data-uid='" + masterRowId + "']");
            grid.dataSource.read();
        } else {
            if (isCreateGrid) {
                $("<div/>").appendTo(e.detailCell).kendoGrid({
                    dataSource: dataSource,
                    filter: { field: e.data.Log, operator: "contains", value: 'has created' },
                    columns:
                        [{ field: "FieldUpdated", title: "Field Updated", width: "50px" },
                        { field: "Value", title: "Value", width: "50px" }]
                });
            } else {
                $("<div/>").appendTo(e.detailCell).kendoGrid({
                    dataSource: dataSource,
                    filter: { field: e.data.Log, operator: "contains", value: 'has created' },
                    columns:
                        [{ field: "FieldUpdated", title: "Field Updated", width: "50px" },
                        { field: "Was", title: "Was", width: "50px" },
                        { field: "Now", title: "Now", width: "50px" }]
                });

            }
        }
    }

但是这个isCreateGrid 条件似乎没用,因为如果他找到isCreateGrid 条件为假的任何行,那么所有行都将具有针对假条件的模板。

【问题讨论】:

  • 您可以在网格的数据绑定事件上保持isCreateGrid的条件检查

标签: javascript json kendo-ui kendo-grid kendo-datasource


【解决方案1】:

是的,你可以。请参考以下代码。

  $(gridId).kendoGrid({
    dataSource: {
        data: datasource
    },
    scrollable: true,
    sortable: true,
    resizable: true,
    columns: [
     { field: "MetricName", title: "Metric", width: "130px" },
     { field: "OnTrack", title: "On Track", template:'#:changeTemplate(OnTrack)#', width: "130px", attributes: { style: "text-align: center !important;" } },
     { field: "CurrentAmount", title: "Current", template: '$ #:parseFloat(CurrentAmount).toFixed(2)#', width: "130px" },
     { field: "RequiredAmount", title: "Required", template: '$ #:parseFloat(RequiredAmount).toFixed(2)#', width: "130px" }
    ]
});

function changeTemplate(value)
{
   Conditions depending on Your Business Logic
if ()
    return "HTML Here";
else
    return "HTML Here";
}

【讨论】:

  • 这对你有用吗??那你可以投票吗?
猜你喜欢
  • 2013-09-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多