This is a migrated thread and some comments may be shown as answers.

Create a custom column inside vertical grouping

5 Answers 84 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Nithin
Top achievements
Rank 1
Nithin asked on 05 Apr 2018, 01:30 PM

In my requirement, I need to display both Room Number and Room Type on the side of the scheduler. Though I did achieve this by vertical grouping now I want is split that Room Column into Two so that on one side it shows Room Number and on the other Room Type. Please see the image for reference

I was able to achieve this with a custom field in the resource array 
My Example

But I need it like in the image attached

Thanks 

5 Answers, 1 is accepted

Sort by
0
Accepted
Ivan Zhekov
Telerik team
answered on 06 Apr 2018, 09:08 AM
Hi, Nithin.

While creating a custom column is indeed not possible, you could still split the existing column in two, and I've done exactly that with your original example: https://dojo.telerik.com/@joneff/iNOcuNok. Note that I took the liberty to strip the Room prefix from the first "column".

In essence, I wrapped both items in a common container (custom-row) and then used to additional container for each part of the text (custom-cell). Then I arranged those in a way that looked OK and that's it. Just bare in mind, that I am using flexbox, which is not supported in IE9 and below.

Regards,
Ivan Zhekov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Nithin
Top achievements
Rank 1
answered on 06 Apr 2018, 12:28 PM
Thanks the answer was perfect Ivan
I do have one more query regarding that is regarding the removal of red line that is hanging on today's date 
I did try giving  

ShowTimeRuler :false
 
but nothing really happens

Thank You
0
Nithin
Top achievements
Rank 1
answered on 06 Apr 2018, 12:51 PM
I did find  way 

.k-current-time{
    display:none!important;
}

Thanks
0
Nithin
Top achievements
Rank 1
answered on 27 Jun 2018, 11:36 AM
Hi Ivan,
With the example you have provided I was able to create a custom group header. Is it possible to actually implement it in angularjs only like with a custom directive or within a div using ng-include ?
If so could u provide an example?

Thanks
0
Ivan Zhekov
Telerik team
answered on 28 Jun 2018, 08:16 AM
Hello, Nithin.

While it's perfectly possible to implement the said template as a custom angularjs directive, that fall beyond our scope of support. Still, our professional services team can help you with the implementation. If you are interested, I can reach out to them, on your behalf, and they will get back to you.

Regards,
Ivan Zhekov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Nithin
Top achievements
Rank 1
Answers by
Ivan Zhekov
Telerik team
Nithin
Top achievements
Rank 1
Share this question
or