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

Two header row with one column row span and other columns with column span

7 Answers 285 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Shashi
Top achievements
Rank 1
Shashi asked on 26 Apr 2013, 11:12 AM
We're currently using Telerik controls for ASP.NET MVC, basically we have grid looks like attached image, is this possible using  Kendo UI grid?

7 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 26 Apr 2013, 01:27 PM
Hi Shashi,


To achieve this with the Kendo UI Grid you should specify a Header Template for the columns. Please take a look at the attached project which demonstrates a sample implementation.

I wish you a great day!

 

Regards,
Dimiter Madjarov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Shashi
Top achievements
Rank 1
answered on 29 Apr 2013, 05:20 AM
Hi Dimiter,

Thanks for quick response, but i am unable to open the project in my VS 2010, i am using VS 2010 professional edition with MVC 3 as well as MVC 4 installed on it.
0
Vladimir Iliev
Telerik team
answered on 30 Apr 2013, 01:00 PM
Hi Shashi,

 
Please find attached the same project converted to VisualStudio 2010 format. 

Kind Regards,
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Abu Bakker
Top achievements
Rank 1
answered on 14 Dec 2018, 06:58 PM

Hi,

I am trying to create table with multiple row-spans in angular, something like the attached screenshot. However I am unable to achieve row-span. I see there are controls for column-span, however I don't see any controls for row span.

I am using a complex object like the one below:

[
{
"Metric": "MetricValue",
"AttainedValue": "120",
"NetWeight":20,
"Products": [
{
"ProductName":"ProductName",
"PGValue":100,
"PGWeight":25,
"Price": "100,000,000 USD",
"Sold": " 60,000,000 USD",
"Left":"40,000,000 USD",
"MetricEarnings":"11,000 JPY",
"SInformation": [
{
"SName":"Source",
"Start":"Oct 9, 2018 8:44",
"End":"Oct 10, 2018, 9:00 AM "
},
{
"SName":"Source",
"Start":"Oct 9, 2018 8:44",
"End":"Oct 10, 2018, 9:00 AM "
},
{
"SName":"Source",
"Start":"Oct 9, 2018 8:44",
"End":"Oct 10, 2018, 9:00 AM "
}
]
},
{
"ProductName":"ProductName",
"PGValue":100,
"PGWeight":25,
"Price": "100,000,000 USD",
"Sold": " 60,000,000 USD",
"Left":"40,000,000 USD",
"MetricEarnings":"11,000 JPY",
"SInformation": [
{
"SName":"Source",
"Start":"Oct 9, 2018 8:44",
"End":"Oct 10, 2018, 9:00 AM "
}
]
},
{
"ProductName":"ProductName",
"PGValue":100,
"PG":25,
"Price": "100,000,000 USD",
"Sold": " 60,000,000 USD",
"Left":"40,000,000 USD",
"MetricEarnings":"11,000 JPY",
"SInformation": [
{
"SName":"Source",
"Start":"Oct 9, 2018 8:44",
"End":"Oct 10, 2018, 9:00 AM "
}
]
},
{
"ProductName":"ProductName",
"PGValue":100,
"PGNetWeight":25,
"Price": "100,000,000 USD",
"Sold": " 60,000,000 USD",
"Left":"40,000,000 USD",
"MetricEarnings":"11,000 JPY",
"SInformation": [
{
"SName":"Source",
"Start":"Oct 9, 2018 8:44",
"End":"Oct 10, 2018, 9:00 AM "
}
]
}
]
}
]

Please let me know if there is a way to achieve this in kendo grid.

Thanks,

0
Abu Bakker
Top achievements
Rank 1
answered on 14 Dec 2018, 06:59 PM
PFA the image
0
Abu Bakker
Top achievements
Rank 1
answered on 14 Dec 2018, 07:00 PM
PFA the file
0
Konstantin Dikov
Telerik team
answered on 17 Dec 2018, 08:04 AM
Hi Abu,

The Kendo UI Grid have multi-column headers feature, but row-span is not supported and it renders each dataItem on separate row:
The only option that we could suggest is to handle the "dataBound" event of the Grid and manipulate the TABLE element with jQuery or JavaScript manually:

Regards,
Konstantin Dikov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Shashi
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Shashi
Top achievements
Rank 1
Vladimir Iliev
Telerik team
Abu Bakker
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or