CODEWITHSUNDEEP
kendo-uikendo-grid
Martin
Martin

Reputation: 384

kendo Grid grouping incompatibility with row template

When I'm using other "groupable" row template doesn't work in the kendo grid But before there was no problem and now how to use the grouping together of row template

I put the code I wrote in a review do

jsfiddle :

Click here to check with jsfiddle

 <script>
    $(document).ready(function () {

        var ds = new kendo.data.DataSource({
            transport: {
                read: {
                    url: '/api/clientssnapshot',
                    dataType: 'json',
                    type: 'get'
                }
            }
        });

        $('.table').kendoGrid({
            dataSource: ds,
            sortable: true,
            groupable: true,
            selectable: true,
            navigatable: true,
            height: 500,
            scrollable: true,
            rowTemplate: kendo.template($("#client-row-template").html().replace('class="k-alt"', '')),
            altRowTemplate: kendo.template($("#client-row-template").html()),//@class="k-alt"@
            dataBound: function () {
                $('.spark').sparkline([1, 2, 3, 4, 5, 6, 85, 2, 1]);
                //$('.spark').each(function (i, e) {
                //    var $this = $(this);
                //    //console.info($this.attr('data-inrate'));
                //    var arr = eval('[' + $this.attr('data-inrate') + ']');
                //    console.log(this);

                //    $this.sparkline(arr);
                //});

            }

        });

    });
</script>
<body class="menu_hover">

<script id="client-row-template" type="text/x-kendo-template">

  <tr role="row" class="k-alt">

             <td role="gridcell" >#=   Mac #</td>
             <td role="gridcell" >#=   RadioName #</td>

             <td role="gridcell" >  <a href="http://#= ApIp #" target="_blank">#=ApName#</a>   </td>
             <td role="gridcell" >  <a href="http://#= RemoteIp #" target="_blank">#=RemoteIp#</a>   </td>

             <td role="gridcell" > <a href=#"#= AccountingId #" target="_blank" > #= AccountingName # </a> </td>
             <td role="gridcell" >#=  TX #</td>
             <td role="gridcell" >#=  RX #</td>
              <td role="gridcell" >#= Signal #</td>
              <td role="gridcell" >#= Uptime #</td>
              <td role="gridcell">
                     <span class="spark" data-inrate="#= InRateHistory #"  >   </span>
                 </td>
    </tr>
</script>

            <div class="span6 box gradient main_stting">
                <div class="dataTables_filter" id="txtSearch">
                    <label>
                        Search:
                        <input type="text" aria-controls="DataTables_Table_0"></label>
                </div>

                <div class="title">
                    <h3></h3>
                </div>
                <div class="content">

                    <table class="table">
                        <colgroup>
                            <!-- Mac           -->
                            <col style="width: 170px">
                            <col style="width: 150px">
                            <col style="width: 80px">
                            <col style="width: 160px">
                            <col style="width: 130px">
                            <col style="width: 44px">
                            <col style="width: 50px">
                            <col style="width: 50px">
                            <col style="width: 78px">
                            <!-- Usage         -->
                            <!--                 <col style="width: 100px" />-->
                        </colgroup>
                        <thead>
                            <tr>
                                <th>Mac</th>
                                <th>Radio</th>
                                <th>AP</th>
                                <th>Remote IP</th>
                                <th>Name</th>
                                <th>TX</th>
                                <th>RX</th>
                                <th>Signal</th>
                                <th>Uptime</th>
                                <th>Usage</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>


</body></html>

Upvotes: 1

Views: 5388

Answers (2)

Christopher
Christopher

Reputation: 10627

You can do it in your own template with a trick that was posted in this thread: http://www.telerik.com/forums/grid-grouping-problem-when-using-row-template-bug

Which contains this JSFiddle: http://jsfiddle.net/THRQV/

Here's the code from that fiddle.

Markup

<table id="grid" style="width: 100%;">
</table>

<script id="rowTemplate" type="text">             
     <tr>         
         #= new Array(this.group().length + 1).join('<td class="k-group-cell"></td>') #
         <td>${Id}</td>
         <td>${StatusText}</td>
         <td>${CommissionTypeText}</td>
     </tr>
</script>

Javascript

var localData = [
    {Id: 1, StatusText: "Status 1", CommissionTypeText: "Commission 1"},
    {Id: 2, StatusText: "Status 2", CommissionTypeText: "Commission 2"},
    {Id: 3, StatusText: "Status 3", CommissionTypeText: "Commission 3"}
];

var dataSource = new kendo.data.DataSource( {
     data: localData,
     schema: {
         model: {
             fields: {
                 Id: { type: "number" },
                 StatusText: { type: "string" },
                 CommissionTypeText: { type: "string" }
             }
         }
     }
});

$("#grid").kendoGrid({
     dataSource: dataSource,
     rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
     scrollable: true,
     height: 500,
     sortable: true,
     filterable: true,
     groupable: true,
     pageable: true,
     columns: [
         {
             field: "Id",
             title: "Id",
             filterable: false
         },
         {
             field: "StatusText",
             title: "StatusText"
         },
         {
             field: "CommissionTypeText",
             title: "CommissionTypeText"
         }
     ]
});

Basically you are passing in the datasource, calling group() on it, and injecting the group cell when applicable.

Upvotes: 2

OnaBai
OnaBai

Reputation: 40887

When you group cells, KendoUI inserts a new cell in front of the existing but this is only done for the standard template, not for your templates.

My recommendation is switching to a template for each cell. Basically your column definition would become:

columns : [
    { field: "Mac", title: "Mac", width: 170 },
    { field: "RadioName", title: "Radio", width: 150 },
    { field: "ApName", title: "Ap", width: 80, template: '<a href="http://#= ApIp #" target="_blank">#=ApName#</a>' },
    { field: "RemoteIp", title: "Remote IP", width: 160, template: '<a href="http://#= RemoteIp #" target="_blank">#=RemoteIp#</a>' },
    { field: "AccountingName", title: "Name", width: 130, template: '<a href="#= AccountingId #" target="_blank"> #= AccountingName # </a>' },
    { field: "TX", title: "TX", width: 44  },
    { field: "RX", title: "RX", width: 50 },
    { field: "Signal", title: "Signal", width: 50 },
    { field: "Uptime", title: "Uptime", width: 78},
    { field: "Usage", title: "Usage", template: '<span class="spark" data-inrate="#= InRateHistory #">   </span>'  },
    { command: [ "edit" ], title: "&nbsp;" }
],

In addition, you simply define the grid HTML placeholder as:

<div class="table"></div>

Your JSFiddle modified here: http://jsfiddle.net/OnaBai/Dyb9Y/10/

Upvotes: 1

Related Questions