Can Grid use Row Template like Datatable?

[temjackParticipant]

I Want to get rowData in Grid like Datatable,but I don’t want to use Datatable.How should I do?

[DimitarParticipant]

Hello temjack,

Are you referring to the data table functionality shown in the demo Row Template? If so, please note that, while it cannot be directly “translated” to jqxGrid, the grid also has a cellsrenderer callback and even a Widget Column functionality you can use to achieve your requirement.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[temjackParticipant]

Thank you for your answer. But maybe I was not describe this clear.
Here I release my code:

function initDataTable() {       	
			var docSource =
			{
				dataType: "json",
				dataFields: [
					{ name:'Id',type: 'int'},
					{ name:'TITLE',type: 'string'}
                                        { name:'ISREDTITLE',type: 'int'}
				]
			};

			var dataAdapter = new $.jqx.dataAdapter(docSource, { loadComplete: function () {
				}
			});
			
			dataAdapter.dataBind();

			$("#sDataTable").jqxDataTable(
			{
				width: '100%',
				source: dataAdapter,
				pageable: true,
				altRows: true,
				pagerMode: 'advanced',
				pageSizeOptions: ['5','10'],
				columnsResize: true,
				autoRowHeight: false,
				theme: 'metro',
				localization: getLocalization(),
				columns: [
							{text:'Id',dataField:'Id', align: "center", cellsalign: 'center', width: '5%'},
							{text:'TITLE',dataField:'TITLE', align: "center", cellsalign: 'left', 
							cellsRenderer:function(row, column, value, rowData) {
								var colorStr="";
								var anchor="";
								if(rowData.ISREDTITLE==1){
									colorStr="style='color:red'";
								}
								  anchor += "<a href='/operation/gov-publish-recvProcsForm.do?bpmProcessId=" + rowData.Id
								  +"' target='_blank' title='"+rowData.TITLE+"' "+colorStr+">" + rowData.TITLE ;
								  anchor += "</a>";
								  return anchor;
							  }
							}}
						]
			});		
		}

I want to use Grid not Datatable to write it.

[DimitarParticipant]

Hi temjack,

This can be achieved with jqxGrid, too, because, as I have already stated, the grid has a cellsrenderer callback function, too. Please try the following code:

function initDataTable() {
    var docSource = {
        datatype: "json",
        datafields: [{
            name: 'Id',
            type: 'int'
        }, {
            name: 'TITLE',
            type: 'string'
        } {
            name: 'ISREDTITLE',
            type: 'int'
        }]
    };

    var dataAdapter = new $.jqx.dataAdapter(docSource, {
        loadComplete: function() {}
    });

    dataAdapter.dataBind();

    $("#sDataTable").jqxGrid({
            width: '100%',
            source: dataAdapter,
            pageable: true,
            altrows: true,
            pagermode: 'default',
            pagesizeoptions: ['5', '10'],
            columnsresize: true,
            autorowheight: false,
            theme: 'metro',
            localization: getLocalization(),
            columns: [{
                    text: 'Id',
                    datafield: 'Id',
                    align: "center",
                    cellsalign: 'center',
                    width: '5%'
                }, {
                    text: 'TITLE',
                    datafield: 'TITLE',
                    align: "center",
                    cellsalign: 'left',
                    cellsrenderer: function(row, columnfield, value, defaulthtml, columnproperties, rowData) {
                        var colorStr = "";
                        var anchor = "";
                        if (rowData.ISREDTITLE == 1) {
                            colorStr = "style='color:red'";
                        }
                        anchor += "<a href='/operation/gov-publish-recvProcsForm.do?bpmProcessId=" + rowData.Id + "' target='_blank' title='" + rowData.TITLE + "' " + colorStr + ">" + rowData.TITLE;
                        anchor += "</a>";
                        return anchor;
                    }
                }
            }
        ]
    });
}

and make sure you reference all the necessary grid-related script files on your page.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts