Populate grid with radio buttons and attachments

[DollyBMember]

Hi,

I want to populate grid with radiobutton as first column and attachment as second column along with the data populated in the rest of the columns.

My code looks like,

function generateattachdata(rowscount) {
// prepare the data
var data = new Array();
if (rowscount == undefined) rowscount = 100;
var attachFiles =
[“Micro_Design_Default Project.doc”, “Order Form of FP connection to MARS.xls”, “Tiger Process_Overview.ppt”, “Tiger Process_Overview.ppt”];
var fileNames = [“Micro_Design_Default Project.doc”, “Order Form of FP connection to MARS.xls”, “PoC SRS For enhanced Details page.doc”, “Tiger Process_Overview.ppt”];
var format = [“winword”, “winexcel”, “winword”, “winpowerpoint”];
var checkedOut = [“No”, “Yes”, “No”, “Yes”];

for (var i = 0; i < rowscount; i++) {
var row = {};
var index = Math.floor(Math.random() * fileNames.length);

row["id"] = i;
row["CButton"] = "";
row["image"] = attachFiles[i];
row["FileName"] = fileNames[i];
row["Format"] = format[i];
row["CheckedOut"] = checkedOut[i];

data[i] = row;
}

return data;
}

// prepare the data
var attachData = generateattachdata(4);
var attachSource =
{
localdata: attachData,
datatype: "array",
updaterow: function (rowid, rowdata) {
// synchronize with the server – send update command
}
};
var attachDataAdapter = new $.jqx.dataAdapter(attachSource);

$("#jqxgrid2").jqxGrid(
{
width: 700,
source: attachDataAdapter,
editable: false,
pageable: true,
autoheight: true,
columnsresize: true,
theme: theme,
columns: [
{ text: '', columntype: 'checkbox', datafield: 'CButton', width: 67 },
{ text: '', datafield: 'image', width: 40 },
{ text: 'File Name', datafield: 'FileName', width: 300 },
{ text: 'Format', datafield: 'Format', width: 150 },
{ text: 'Checked Out', datafield: 'CheckedOut', width: 150 }
]
});
}

First two columns should be a radiobutton and attachment. How do I do it?

Regards
DollyB

[Peter StoevKeymaster]

Hi DollyB,

Unfortunately, our Grid does not support Radio Button columns. It supports CheckBox columns.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[DollyBMember]

Hi Peter,

Thank You.
What about attachments? I want to display hyperlinked icons like, MS Excel,word and ppt in one of the columns. How do I do that in Grid dynamically?

Regards
DollyB

[Peter StoevKeymaster]

Hi DollyB,

To display icons, you can use the custom cells rendering capabilities of jqxGrid that allow you to display any HTML Element in a cell. In your application scenario, this could be ‘img’ tag. For more info, take a look at this help topic: jquery-grid-cellsrendering.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[DollyBMember]

Hi Peter,

Thank You for the help.
I have implemented the rendering of jqxGrid.

//Added for Attachments Tab

// prepare the data
var attachmentsData = new Array();
<%for (int i=0; i
var row = {};
row[“id”] =;
row[“AttachSelect”] = “”;
row[“AttachURL”] = attachedFiles();
row[“AttachName”] = “”;
row[“AttachFormat”] = “”;
row[“AttachCheckOut”] = “”;
attachmentsData[] = row;

var attachSource =
{
localdata: attachmentsData,
datatype: “array”,
updaterow: function (rowid, rowdata) {
// synchronize with the server – send update command
}
};
var attachDataAdapter = new $.jqx.dataAdapter(attachSource);

var cellsradiorenderer = function (row, columnfield) {
return ”;
}

// Create jqxGrid
$(“#jqxgrid2″).jqxGrid(
{
width: 725,
source: attachDataAdapter,
autoheight: true,
theme: theme,
selectionmode: ‘singlecell’,
columns: [
{ text: ”, datafield: ‘AttachSelect’, width: 30, cellsrenderer: cellsradiorenderer},
{ text: ”, datafield: ‘AttachURL’, width: 40},
{ text: ‘File Name’, datafield: ‘AttachName’, width: 380 },
{ text: ‘Format’, datafield: ‘AttachFormat’, width: 150 },
{ text: ‘Checked Out’, datafield: ‘AttachCheckOut’, width: 125 }
]
});

function attachedFiles() {

return ‘<a href="”><img border=0 src="/eMatrix/images/icons/” =”Click to view, right click to save”>’;

return ‘<img border=0 src="/eMatrix/images/icons/” =”Click to view, right click to save”>’;

}

When I am trying to run this code, the hyperlinked image is repeated in all rows. Actually it should show different images in each row based on file names.
Hoq can I fix this issue?

[Peter StoevKeymaster]

Hi DollyB,

The attachedFiles function should be set as a cellsrenderer, too. The Grid will then send as parameters the row, column and cell value. Depending on the cell value, you can return different images.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[DollyBMember]

Hi Peter,

Its working fine now. Thankx.

Regards
DollyB

[Author]

Posts