2017-03-22 3 views
0

タイトルが付いたデータのリストを表示し、フィールド上で条件付きで編集可能なかなり簡単な剣道グリッドがあります。これは、剣道ビューの「表示」アクションで呼び出される関数でJQueryを使用してレンダリングされ、DOMにアタッチされます。剣道グリッドはタイトルやデータだけをレンダリングすることがあります

問題は、データをレンダリングしないか、ページをロードするたびにグリッド列見出しがレンダリングされないことです。それはいつでもどちらかと言えば、ページの状態が変わったときに時折行うように、私がそれをつける関数をリファイすると、正しくレンダリングするだけです。私はページに添付のはここ

です:

form.find("#approvals").kendoGrid({ 
    columns: [ 
     { title: "Service", field: "PartDescription" }, 
     { title: "Component", field: "Component", width: "250px" }, 
     { title: "Status Last Modified", width: "250px", template: "#= kendo.toString(StatusModifiedDate, 'g') #", }, 
     { title: "Status", field: "Status", width: "135px", editor: statusDropDownEditor } 
    ], 
    editable: modifyState, 
    edit: function (e) { 
     if (e.container.find("input").attr("name") !== "Status") { 
      this.closeCell(); 
     } 
    } 
}); 

これは剣道ビューが表示されたときに発生する関数から来ています。

答えて

0

問題は、データをレンダリングしないか、ページを読み込むたびにグリッド列 ヘッダーがレンダリングされないことです。

あなたのjsコードにどのような "フォーム"が含まれているかわからない場合は、これを使用して「正しい」時刻に読み込まれるようにしてください。 gridData変数を変更してコードに一致させ、フィールドのフィールドをpreg_replaceしてください。

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script> 
    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script> 
    <meta charset="utf-8"/> 
    <title>Kendo UI Snippet</title> 

</head> 
<body id="theBod"> 
    <div id="approvals"></div> 

    <script type="text/javascript"> 
    $(function() { // the dom is ready for jquery parsing 
    var gridData = [{ 
     "Name": "daya", 
     "Role": "Developer", 
     "Dept": "Dev", 
     "Date": "\/Date(836438400000)\/", 
     "Balance": 23 
    }, { 
     "Name": "siva", 
     "Role": "Developer", 
     "Dept": "Dev", 
     "Date": "\/Date(836438400000)\/", 
     "Balance": 23 
    }, { 
     "Name": "sivadaya", 
     "Role": "Developer", 
     "Dept": "Dev", 
     "Date": "\/Date(836438400000)\/", 
     "Balance": 23 
    }, { 
     "Name": "dayasiva", 
     "Role": "Developer", 
     "Dept": "Dev", 
     "Date": "\/Date(836438400000)\/", 
     "Balance": 23 
    }]; 

    var form = $("#theBod"); 
    var foundForm = $(form).find("#approvals"); 

    if (typeof (foundForm) != "undefined") { 
     // process grid component 
     var grid = $(foundForm).kendoGrid({ 
      dataSource: { 
       data: gridData, 
       schema: { 
        model: { 
         fields: { 
          Name: { type: "string" }, 
          Role: { type: "string" } 
         } 
        } 
       }, 
       pageSize: 10, 
      }, 
      editable: true, 
      sortable: true, 
      columns: [ 
       { 
        field: "Name", 
        title: "Name", 
       }, 
       { 
        field: "Role", 
        title: "TheRole" 
       } 
      ] 
     }); 

    } else { 
     alert('no dom element located'); 
    } 
}); 
    </script> 
</body> 
</html> 

私はあなたのためjsBinファイルを追加しました。

jsBinが正しく保存されませんでした。申し訳ありません。

+0

フォーム自体がビューです。申し訳ありません。 – loganhuskins

+0

すぐに起動させることは役に立たない(試しただけで)。それはローディングではないという問題ではなく、データはほとんどの場合、ヘッダーを持たない場合にのみ得られます。それが入ってこないときは、データのないヘッダーがありますが、これはまれです。 – loganhuskins

+0

投稿と共有するサンプルjsonデータセットがありますか? – Programmer

関連する問題