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

[Shashi]

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?

[Dimiter Madjarov]

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

[Shashi]

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.

[Vladimir Iliev]

Hi Shashi,

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

Kind Regards,
Vladimir Iliev
the Telerik team

[Abu Bakker]

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,

[Abu Bakker]

PFA the image

[Abu Bakker]

PFA the file

[Konstantin Dikov]

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:

• https://demos.telerik.com/kendo-ui/grid/multicolumnheaders

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:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/databound

Regards,
Konstantin Dikov
Progress Telerik