Mapping dynamic columns in Paging Grid

I am looking for assistance on mapping one of the DB column to multiple fields in "Paging Grid" - dynamically .
Database records:
{
{col1: "dcgsdf", col2: "thstr", col3: "col31~abc|col32~def|col33~ghi", col4:56},
{col1: "asdg", col2: "jtrj", col3: "col31~xsy|col32~adf|col33~qere", col4:32},
{col1: "fdhd", col2: "dfhs", col3: "col31~qwwe|col32~dasw|col33~afds", col4:3},
{col1: "rae", col2: "DGAS", col3: "col31~qerw|col32~qef|col33~qwer", col4:0}
}


Paging Grid should split col3 by delimiter "|" to identify the new columns col31, col32 and col33, and further by delimeter "~" for column name and value. Something like the below resulting dataset.
{
{col1: "dcgsdf", col2: "thstr", col31: "abc", col32: "def", col33: "ghi", col4:56},
{col1: "asdg", col2: "jtrj", col31: "xsy", col32: "adf", col33: "qere", col4:32},
{col1:...

OriginalPostID-231994