2016-11-11 7 views
3

上のテキストを変更します。私はボタンがいくつかの状況で「編集」を言うようにする必要があり剣道グリッド、私は少しこの(わかりやすくするために編集コード)のように見える剣道グリッド持って編集ボタン

var gridList = $('##listBo').kendoGrid({ 

     ... 

     columns: [ 
      ... 
      { 
       command: "edit" 
       , title: 'Edit' // Need to make this text conditional 
       , width: 91 
      } 
     ] 

     ... 

     , editable: { 
       mode: "popup" 
       , template: $("##addEditPopup").html() 
       , window: { 
       open: loadJSOnWindowLaunch 
       , title: "Reservation request" 
      } 
      } 
     , dataBound: function(e) { 
      dataBoundFunction(); 
     } 

    }).data("kendoGrid"); 

をし、データソースの値に基づいて、他のものでは 'View'

これを行うにはどうすればよいですか?

答えて

2

この状況に対処する簡単なアプローチの1つは、カスタムコマンド列を作成し、次にテンプレートオプションを使用して、状況に応じて列ボタンをレンダリングすることです。

すると、このようにしてみてください。ここでは

$("#grid").kendoGrid({ 
        dataSource: dataSource, 
        pageable: true, 
        height: 550, 
        toolbar: ["create"], 
        columns: [ 
         { field:"ProductName", title: "Product Name" }, 
         { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" }, 
         { field: "UnitsInStock", title:"Units In Stock", width: "120px" }, 
         { field: "Discontinued", width: "120px" }, 
         { template: comandTemplate }], 
        editable: "popup" 
       }); 
      }); 
      // render command column button based on condition 
      function comandTemplate(model){ 
       // here i use Discontinued attribute to data model to show 
       // view detail button or edit button 
       if(model.Discontinued==0) 
       { 
        return '<a class="k-button k-button-icontext k-grid-edit" href="#"><span class="k-icon k-edit"></span>Edit</a>'; 
       } 
       else 
       { 
        return '<a class="k-button k-button-icontext" href="javascript:void(0)" onclick="viewDetailsAction()">View Details</a>'; 
       } 
      } 
      // Custom action if view detail button click 
      function viewDetailsAction() 
      { 
       alert("Your custom action for view detail"); 
      } 

は、私はそれはあなたを助けることを願って取り組んでサンプルhttp://dojo.telerik.com/AdAKO

です。

+0

あなたは私のソリューションを試しましたか?それはあなたが望むものですか? –

+0

こんにちは。私はここで質問をする前に、広く似たようなことを試しました。私が持っていた問題は、オリジナルのコードを見て、「編集」ボタンを押すと、編集可能なノードにあるすべてのものを実行する必要がある(つまり、ポップアップを起動し、JS関数を実行する、など)。ソリューションを使用するにはどうすればよいのですか? – Junglefish

+0

こんにちはマイケル、デモをチェックすると、編集ポップアップの作業がとてもうまく表示されます。また、イベントで任意の関数を実行したい場合は、いつものようにすることができます。どのような機能をどのイベントで実行したいのか教えてください。 –

0

あなただけの「プロパティ」は異なるボタンを表示するには、条件フィールドとして使用されるフィールドである。この

{ 
    template: "# if (property == true) { # <a class="k-button k-grid-edit" 
    href="#"><span class="k-icon k-edit"></span>Edit</a> # } else { # 
    <a class="k-button"><span onClick="callFunction()" 
    </span>View</a> # } #", width: "150px" 
} 
  • のように列にカスタム列を追加する必要があります。

希望、これはあなたのために働くでしょう。 (ThumbsUp)

関連する問題