【 Kendo UI 】gridの変更を反映したい。

画面イベントによるデータの変更などでgridのヘッダ項目を変えたい場合があると思います。
嵌らない人もいらっしゃると思いますが、その対策を紹介します。

cmtフィールドの見出しを変えたい状況です。以下のコードだと反映されません。

javascriptWithJquery

      var cmtField = {field: "cmt", title: "コメント", width: "50px"};
      if (needsChange) {
        cmtField = {field: "cmt", title: "振替先ユニット", width: "50px"};
      }

     var grid = $("#hoge").kendoGrid({
        dataSource: $scope.dataSource,
        scrollable: false,
        editable: true,
        columns: [
          {field: "cd", title: "コード", width: "80px"},
          {field: "cd_nm", title: "コード名", width: "150px"},
          cmtField,
          {field: "ord", title: "表示順序", width: "80px"},
          }
        ]
      });

setOptionsを実行することで再描画してくれるようになります。

javascriptWithJquery

      var cmtField = {field: "cmt", title: "コメント", width: "50px"};
      if ($scope.grp_cd) {
        cmtField = {field: "cmt", title: "振替先ユニット", width: "50px"};
      }

     var grid = $("#hoge").kendoGrid({
        dataSource: $scope.dataSource,
        scrollable: false,
        editable: true,
        columns: [
          {field: "cd", title: "コード", width: "80px"},
          {field: "cd_nm", title: "コード名", width: "150px"},
          cmtField,
          {field: "ord", title: "表示順序", width: "80px"},
          }
        ]
      });
      grid.data("kendoGrid").setOptions({});

DartのsetStateとかと同じですね。