jQWidgets Forums

jQuery UI Widgets Forums Grid Linking column headers dynamically

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 9 years, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Linking column headers dynamically #75219

    ashwin prabhu
    Participant

    Hi,
    I have a grid with following columns. The column headers are Name, City, Contact and Email. Edit and Delete columns are always present irrespective of the first four columns because those are button which will delete or edit the row.

    Heres the static code….

    $("#jqxgrid").jqxGrid({
    		source: dataAdapter,
    		selectionmode: 'multiplecellsextended',
    		columns: [{
    			text: 'Name',
    			columntype: 'textbox',
    			datafield: 'Name'
        			}, 
        			
        			{
    			text: 'City',
    			columntype: 'textbox',
    			datafield: 'City'
    			
    			}, 
    			
    			{
    			text: 'Contact',
    			columntype: 'textbox',
    			datafield: 'Contact'
        			}, 
        			
        			{
    			text: 'Email',
    			columntype: 'textbox',
    			datafield: 'Email'					
    			}, 
    			
    		
    			{
    			text: 'Edit',
    			datafield: 'Edit',
    			columntype: 'button'
    			},
    
    			{
    			text: 'Delete Row',
    			datafield: 'Delete',
    			columntype: 'button'
    		}]
    });

    I want to modify this column headers so that even if there are new header names, it will display the new header names dynamically. I dont have to write it statically every time new column headers are used.

    I have used the below code in order to make it dynamic.

    var headers= ["Name", "City", "Contact", "Email"]

    I get this array of headers from the backend first and then i use it to make it dynamic. heres that code.

    var gridColumns 	= [];
    for(var v = 0; v < headers.length; v++){
    	gridColumns.push({ text:headers[v], dataField: headers[v], columnType:'Textbox'});
    	
    }
    
    $("#jqxgrid").jqxGrid({
    	source: dataAdapter,
    	selectionmode: 'multiplecellsextended',
    	columns: gridColumns
    	});

    But this will only add the first four column names. Edit and delete buttons which are always present wont be available. I can push them too by including in the headers array but i want to keep it seperate since it performs additional functions which i have edited from the above code.

    My question is- how can i link the dynamic columns and the column of Edit and Delete together. I tried doing something like this but it gave me an error.

    $("#jqxgrid").jqxGrid({
    	source: dataAdapter,
    	selectionmode: 'multiplecellsextended',
    	
            columns: gridColumns, [{
    			text: 'Edit',
    			datafield: 'Edit',
    			columntype: 'button'
    			},
    			{
    			text: 'Delete Row',
    			datafield: 'Delete',
    			columntype: 'button'
    		}]
    
    	});

    Please note the linking here at the columns: part. gridColumns are dynamic and edit and delete column added after that. this fails. Can someone pls let me know how to correct this to get desired result.

    Linking column headers dynamically #75229

    Dimitar
    Participant

    Hi ashwin prabhu,

    Please try either pushing the “Edit” and “Delete” column objects to the gridColumns array or concatenating the two arrays, i.e.:

    $("#jqxgrid").jqxGrid({
        source: dataAdapter,
        selectionmode: 'multiplecellsextended',
    
        columns: gridColumns.concat([{
            text: 'Edit',
            datafield: 'Edit',
            columntype: 'button'
        }, {
            text: 'Delete Row',
            datafield: 'Delete',
            columntype: 'button'
        }])
    
    });

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.