Kendo UI Grid:添加包含影响模板的变量的行

时间:2013-10-23 12:42:22

标签: jquery grid kendo-ui row kendo-grid

我的问题是关于我网格的更新。这是我目前的网格生成程序:

leTle[0] = {index : 1, tle : tleId, nom : nomChamp, estar : "", fige : tleFixe, position : positionParam, longueur : longueurParam};               

   var fige;

   if (tleFixe == "true")
        fige = true; 
   else
        fige = false;

    $("#" + theId).kendoGrid({
        columns:[{
                    field: "index",
                    title: "Index",
                    template: "<span style='font-size: 12px;' title='#= index #'>#= index # </span>",
                    width: 40
                },{
                    field: "tle",
                    title: "TLE Id",
                    template: "<span style='font-size: 12px;' title='#= tle #'>#= tle # </span>",
                    width: 100
                },{
                    field: "nom",
                    title: "Intitulé",
                    template: "<span style='font-size: 12px;' title='#= nom #'>#= nom # </span>"
                },{
                    field : "position",
                    title : "Position",
                    width : 70,
                    attributes : {
                        "class" : fige ? " " : "fondRougePale"
                    }
                },{
                    field : "longueur",
                    title : "Longueur",
                    width : 70,
                    attributes : {
                        "class" : fige ? " " : "fondRougePale"
                    }
                },{
                    field :"estar",
                    title :"Estar",
                    template: "<span class='eStar'><input class='inputeStar' disabled type='text' /> </span>",
                    width : 250
                },{
                    command: {
                        name : "destroy",
                        template: "<a class=\"btn btn-warning btn-mini k-grid-delete\">"
                                + "<i class=\"icon-minus-sign icon-white\"></i></a>"
                    },

                    title: " ",
                    width: 40
                }
        ],
        dataSource: {
          data: leTle,
          schema: {
              model: {
                  fields: {
                      tle: {editable: false},
                      nom: {editable: false},
                      estar: {editable: false},
                      longueur: {editable: fige},
                      position: {editable: fige}
                  }
              }
          }
        },
        editable:  {
            mode: "incell",
            confirmation: false
        },
        scrollable : false
    });

如您所见,如果我的变量“fige”等于false,则可以禁用某些单元格。当我尝试使用基本数据源手动编写我的网格时,网格是可以的。一行一行,当必须禁用单元格时,它们是。

不幸的是,当我尝试在构建网格后添加行时,我的变量永远不会包含在设置单元格时。

以下是代码:

var vgrid = $("#tleSelected").data("kendoGrid");
            var datasource = vgrid.dataSource;
            var nbLines = vgrid.dataSource.total();
            //Booleen de test
            if (fige == "true")
                tfige = true; 
            else
                tfige = false;
            var newRecord = { index : nbLines+1, tle : tleId, nom: nomChamp, estar: "", position: position, longueur: longueur, fige: tfige}
            datasource.insert(newRecord);

所以,我的情况是我的变量很好,但新的行不是。

不是在更新数据后销毁我的网格并重建它们,你知道这种情况的解决方案吗?

非常感谢。

2 个答案:

答案 0 :(得分:1)

这可能不是您的答案,但可能有助于您实现目标。每次网格的数据源发生变化时,都会调用formatMe函数,它的返回值将显示在网格单元格中。

function formatMe(data){
    return data + " bla bla";
}

var grid = $("#grid").kendoGrid({
    dataSource: {
        data: createRandomData(50)
    },
    columns: [
        { field: "YourFieldName","template:"#= formatMe(data) #" }]
}).data("kendoGrid");

答案 1 :(得分:0)

最后,我找到了解决此问题的替代解决方案。

变量“fige”是允许在选择单元格时进行编辑的变量。 我没有使用KendoUi,而是选择了自己的解决方案。

当我构建“position”和“longueur”列时:

{
    field : "position",
    title : "Position",
    width : 70,
    template : "<span class='position#= index #' ><input style='width:70px' type='text' value='#= position#' #= readOnly(fige) # /></span>"
},{
    field : "longueur",
    title : "Longueur",
    width : 70,
    template : "<span class='longueur#= index #'><input style='width:70px' type='text' value='#= longueur#' #= readOnly(fige) # /></span>"
}

readOnly(fige)函数:

function readOnly(fige)
{  
    if (fige == "true")
        return "readonly";
    else
        return ""; 
}

动态地,由于此功能,我获得了可编辑或不可编辑的单元格。也许它不如KendoUI默认解决方案那么好,但我不认为这个特定的功能可以归功于KendoUI。