CODEWITHSUNDEEP
angularkendo-ui-angular2
ken
ken

Reputation: 286

How to do colspan/rowspan in kendo ui angular 2?

How would I do this in kendo grid - angular 2. I tried out rowHeight and detailRowHeight but it doesnt seem to make any changes.

   <table class="table-bordered">
      <tr>
        <th colspan="2">Monday</th>
        <th colspan="2">Tuesday</th>
      </tr> 
     <tr>
        <th>IN</th>
        <th>OUT</th>
        <th>IN</th>
        <th>OUT</th>
      </tr>
    </table>

In kendo grid

<kendo-grid>
 <kendo-grid-column title="Monday"></kendo-grid-column>
</kendo-grid>

How do I fit In and Out? So it would look like this http://plnkr.co/edit/QrZtvo6INtk1yMscZnqQ?p=preview

Upvotes: 3

Views: 3537

Answers (1)

Sandeep Sharma
Sandeep Sharma

Reputation: 1885

Although I do not read the full doc. One of the options might be followinng:

Use toolbar component. here is the link

example:

<kendo-grid [data]="gridData">
            <kendo-grid-toolbar>
                <span style="display:inline-block;width:49%;text-align:center"> some text</span>
                 <span style="display:inline-block;width:49%;text-align:center"> some text</span>
            </kendo-grid-toolbar>
            <kendo-grid-column field="ProductName" width="120">
            </kendo-grid-column>
            <kendo-grid-column field="UnitPrice" width="120">
            </kendo-grid-column>
             <kendo-grid-column field="ProductName" width="120">
            </kendo-grid-column>
            <kendo-grid-column field="UnitPrice" width="120">
            </kendo-grid-column>
        </kendo-grid>

I'm not good with css. somehow width:50% is not working on the span. I just started learning css. Please consider.

Here is the plnkar link:

http://plnkr.co/edit/uM4ZqmLHzIwuS0F34XDh?p=preview

Hope this may help!

Upvotes: 1

Related Questions