Row Template possible

[sun21170Participant]

Hi,

Is it possible to show the regular row data in a different manner i.e. define a row template which will define how a row looks like?
I could not find any demo that said Row Template.
This would be useful when rendering grid on small devices where instead of showing a row, a card for each row could be shown.

Thanks
Sunil

[HristoParticipant]

Hello Sunil,

Thank you for using our product.
Please take a look this demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customrowcelledit.htm?arctic
Perhaps it is slightly imperceptible, but the Grid is displayed differently. Columns and rows are exchanged.
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-styling-and-appearance.htm

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[sun21170Participant]

Hi Hristo,

Thanks for your response.

I was looking for something different. For example, let’s say that the data source contains SalesOrderId, CustomerName, OrderDate and IsShipped. Normally, when using jqxgrid, we would see this datasource as rows and columns, where columns would be SalesOrderId, CustomerName, OrderDate and IsShipped. What I was looking at displaying each row as a rectangular block, with the header still being displayed as row of headings. For a page these rectangular blocks would show in a flow manner due to the style of display:inline-block for each rectangular block i.e. these rectangular blocks would be adjacent to each other. I am not sure if this is possible with jqxgrid.

<div style=’border:solid green 1px;display:inline-block;’>
SalesOrderId: 2456
CustomerName: Xyz Inc.
OrderDate:10/01/2015
IsShipped: Yes
</div>
<div style=’border:solid green 1px;display:inline-block;’>
SalesOrderId: 2000
CustomerName: NewLight Inc.
OrderDate:12/07/2015
IsShipped: No
</div>

You can see what card view would look like in screen shot below. Its very useful when displaying grid data on small screen devices like iPhone or Samsung Galaxy 3 etc.
http://screencast.com/t/KVgBw2A6jN

[HristoParticipant]

Hello Sunil,

You could achieve desired vision with cellsrenderer.
Please take a look the article below:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-cellsrendering.htm

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[sun21170Participant]

Hi Hristov,

After reading the cellrender example, it seems I will have to do the following to achieve the card layout.

• STEP 1: Have only one column in the grid and use a cellrenderer function for this column
• STEP 2: In the cellrenderer function, create a card view for each row by creating appropriate html with all values in the row that you want to show in the card view
• STEP 3: Add your styling to each card generated in step 2

The only challenge would be how to achieve a flow layout since each card would belong to a separate row if above steps are followed. May be after all the cellrender functions have been called, all cards would be need to be removed from the rows except first row, and then these cards would be appended to the first row/first cell. Finally all rows except the first would need to be removed.

jqxgrid seems like a very powerful widget.

Thanks
Sunil

[sun21170Participant]

Hi Hristov,

There is an example that is very much like what I am wanting. Its the demo at this URL: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/index.htm?(arctic)#demos/jqxdatatable/javascript-datatable-rows-rendering.htm

Even though this demo of Row Template is for jqxdatatable, it should apply equally well to jqxgrid.

Thanks
Sunil

[HristoParticipant]

Hello Sunil,

Please take a look this demo: http://jsfiddle.net/o8j4hmfu/
With cellsrenderer you could set your own view.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[sun21170Participant]

Hi Hristov,

Thanks for the sample with cellrendering.

I think if I wanted to show 3 items i.e. cards within each row, then I would use the beforeLoadComplete event of dataAdapter, in which I would create a new array in which each element would be an array of 3 items. Then in cell-rendering function I would have 3 items, which I could display in same row.

Thanks
Sunil

[Author]

Posts