jQuery UI Widgets Forums Grid Can Grid use Row Template like Datatable?

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 8 years, 3 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Can Grid use Row Template like Datatable? #81892

    temjack
    Participant

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

    Can Grid use Row Template like Datatable? #81898

    Dimitar
    Participant

    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/


    temjack
    Participant

    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.


    Dimitar
    Participant

    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/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.