7

わかりました、本当に良いタイトルはありませんが、これが問題です。剣道のグリッドを変更する必要がありました。これがその写真です。

ここに画像の説明を入力

そして、これがコードです。

@(Html.Kendo().Grid<TekstenViewModel.Tekst>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Template(@<text></text>).ClientTemplate("<input type='checkbox'/>").Width(10).Hidden(!Model.Administrator);

        columns.Bound(product => product.RESOURCE_SET_NAAM).ClientTemplate("#= RESOURCE_SET_NAAM#");

        columns.Bound(product => product.Naam).ClientTemplate("#= Naam#");

        columns.Bound(product => product.Waarde).ClientTemplate("<div id='editorDiv'><div class='input'>#=Waarde#</div><div class='editor'>" +
            Html.WebCore().LinkButton(type: ButtonType.Edit, htmlAttributes: new { onclick = "openPopupDemo('#: Waarde #', '#: ID #', 'Waarde')" }));

        columns.Bound(product => product.Opmerking).ClientTemplate("<div id='editorDiv'><div class='input'>#=Opmerking#</div><div class='editor'>" +
            Html.WebCore().LinkButton(type: ButtonType.Edit, htmlAttributes: new { onclick = "openPopupDemo('#: Opmerking #', '#: ID #', 'Opmerking')" }));

        columns.Template(@<text></text>).ClientTemplate("<div id='deleteDiv'><div class='delete'><a class=\"delete iconBtn\" onclick=\"deleteResourceItem(#: ID #, '#: Naam #')\"></a></div></div>").Width(10).Hidden(!Model.Administrator);
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .Events(events => events.Edit("onCellEdit").DataBinding("onDataBinding"))
    .Groupable()
    .Navigatable()
    .Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .Events(e => e.Error("error_handler"))
        .Model(model =>
        {
            model.Id(product => product.ID);
            model.Field(product => product.Naam).Editable(Model.Administrator);
            model.Field(product => product.Opmerking).Editable(Model.Administrator);
            model.Field(product => product.Waarde).Editable(!Model.ReadOnly);
            model.Field(product => product.RESOURCE_SET_ID).DefaultValue(Model.SetID);
            model.Field(product => product.Type).DefaultValue(Domain.Agromilieu2.Common.Objects.Entities.Resources.ResourceType.GLOBAL_RESOURCES);
            model.Field(product => product.Taal).DefaultValue(Domain.Agromilieu2.Common.Agromilieu2Constants.Resources.DEFAULT_TAAL_CODE);
        })
        .Create(create => create.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_Create, MVC.BeheerTeksten.Name).Data("onCreateAdditionalData"))
        .Read(read => read.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_Read, MVC.BeheerTeksten.Name, new { setID = Model.SetID }).Data("onReadAdditionalData"))
        .Update(update => update.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_Update, MVC.BeheerTeksten.Name))
        .Destroy(destroy => destroy.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_Delete, MVC.BeheerTeksten.Name))
        )
)

たとえば、Waarde 列では、各セルにテキストとボタンがあります。そのボタンは、そのテキストで剣道エディタを開きます。

ここに画像の説明を入力

求められたのは、セルに最大 100 文字を表示してから、Kendo Editor を開いて全文を表示することでした。これが可能かどうかはわかりません。

4

4 に答える 4

8

確かにできます。これをテンプレートとして追加する列のクライアント テンプレートがあるようです。

#if(Waarde.length>100){# # var myContent =Waarde; #  # var dcontent = myContent.substring(0,100); # <span>#=kendo.toString(dcontent)#</span> #}else{# <span>#=Waarde#</span> #}#

注：テストされていません。テンプレートを少し確認する必要があるかもしれません

その他の HTML を追加します。IF ELSE を使用した剣道テンプレートが好きです。詳細については、ドキュメントを確認してください。

http://docs.telerik.com/kendo-ui/getting-started/framework/templates/overview#internal-vs-external-templates

于 2014-08-26T12:38:44.770 に答える
4

ClientTemplate を記述する別の方法は、ロジックに JavaScript 関数を使用することです。

このようにして、複雑なハッシュタグ システムを回避します。

まず、関数を定義します。

<script type="text/javascript">
    function getTheSubstring(value, length)
    {
        if (value.length > length)
            return kendo.toString(value.substring(0, length)) + "...";
        else return kendo.toString(value);
    }
</script>

次に、それを列の ClientTemplate 関数で使用します。

columns.Bound(p => p.Value).ClientTemplate("#:getTheSubstring(data.Value,40)#");

動作し、テスト済み。

于 2017-02-21T17:47:41.900 に答える
0

これを試して 

{ field: "description", title: "Description", width: 140,template:function(dataItem){

        if(dataItem.description.length>100){
            return dataItem.description.substring(0,20);
        }else{
            return dataItem.description;
        }

} },
于 2020-01-19T08:52:33.047 に答える