Dynamic columns in grid - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: dynamic grid columns, jquery datagrid, jquery grid

This topic contains 17 replies, has 6 voices, and was last updated by markus_1 10 years, 2 months ago.

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

Author

Dynamic columns in grid Posts

May 8, 2012 at 7:42 am Dynamic columns in grid #3965

shivaw

Member

Is there any possibility that we can create a grid without specifying its columns? I mean, in case of a dynamic grid where number of columns isnt known at the beginning. How to achieve that?

May 8, 2012 at 7:45 am Dynamic columns in grid #3967

Peter Stoev

Keymaster

Hi shivaw,

You must have at least one column to display in the Grid when you initialize it. There’s no table without columns.

To dynamically change the columns you need to set the columns property to your columns array.

For example:

          var columns = [
                  { text: 'First Name', dataField: 'firstname', width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { text: 'Product', dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
                ];
            // create a Grid with one column
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                columns: [
                  { text: 'First Name', dataField: 'firstname', width: 100 }
                ]
            });
            // change columns collection.
            $("#jqxgrid").jqxGrid({ columns: columns });

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 10, 2012 at 10:53 am Dynamic columns in grid #4048

mail2harisha

Member

But Mr Peter, what if I have different sets of columns(both different number of columns and different column names and its datatype) to show depending on different user logged into system.

I don’t want to hard code in client java script code like:

var columns = [
                  { text: 'First Name', dataField: 'firstname', width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { text: 'Product', dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
                ];

We will be storing what columns to display in depending on user logged in server side database, hence it would great if there is a option to send the column information and its definition (like datatype, cellalign) from server side.

Like:


var newcolumns = getColumns();
var getData = function () {
							
	$.post(url, function(newcolumns ) {
		
		return newcolumns ;
	});
};

Let us create a table by using jsp(which contains column names, its datatype etc) like

<table id="UserTable">
	<c:if test="${actionBean.searchPropertyList != null}">
		<tr>
			<c:forEach items="${actionBean.searchPropertyList}" var="prop"
				varStatus="loop">
				<th>${prop.columnName}, datatype=${prop.columnType}</th>
			</c:forEach>
		</tr>
	</c:if>
</table>

And then use this table id to construct a jqxgrid.

Kindly help

May 10, 2012 at 11:08 am Dynamic columns in grid #4049

Peter Stoev

Keymaster

The Grid requires an array of column definitions to be passed to its columns property. It could be dynamic or static, i.e you can change the Grid’s columns property when you want to. However, you can’t build the Grid from a HTML Table element. jqxGrid does not use table element for rendering and does not have ‘load from table’ kind of functionality.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 10, 2012 at 11:13 am Dynamic columns in grid #4051

shivaw

Member

Hey Peter,

I tries your solution but it doesn’t work in our case. 🙁

When we call the web service to get the data, nothing happens. The page just freezed.

Cheers,
Shiva

May 10, 2012 at 11:15 am Dynamic columns in grid #4052

Peter Stoev

Keymaster

The solution works with jQWidgets 2.1. Do you use the same version? In addition, the web service can freeze your UI if it does not load data in async mode.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 10, 2012 at 11:20 am Dynamic columns in grid #4053

shivaw

Member

Ohhhh okkk.

We are using v1.8.0

We will get the latest one and try it out.

I’ll keep you posted with the progress on this. Thanks for your prompt reply.

Regards,
Shiva

May 10, 2012 at 11:34 am Dynamic columns in grid #4055

shivaw

Member

Hey Peter,

We tried it out with v 2.1 (commercial – evaluation version – jQWidgets v2.1.0 (2012-May-04)) as well but still no help. It is still not working. We are getting errors like “gridColumns is not defined” and “viewModel is undefined “.

Below is the code snippet:

Please help.

Regards,
Shiva

May 10, 2012 at 11:51 am Dynamic columns in grid #4061

Peter Stoev

Keymaster

Hi Shiva,

You are setting the columns property outside of the function. You have 2 times }); in your code.

Take a look at the code below as a reference. See that the ‘ready’ function is closed after the $(“#jqxGrid”).jqxGrid({ columns: gridColumns }); call.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.editable.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
			var gridColumns = [
				{ text: 'Fund', dataField: 'Fund', cellsalign:'left', width: 120 },
				{ text: 'USD', dataField: 'USD', cellsalign:'right', width: 130 },
				{ text: 'EUR', dataField: 'EUR', cellsalign:'right', width: 130 },
				{ text: 'GBP', dataField: 'GBP', cellsalign:'right', width: 130 },
				{ text: 'CAD', dataField: 'CAD', cellsalign:'right', width: 130 },
				{ text: 'MYR', dataField: 'MYR', cellsalign:'right', width: 130 },
				{ text: 'ISK', dataField: 'ISK', cellsalign:'right', width: 130 }
			];
			$("#jqxGrid").jqxGrid(
			{
				autoheight: true,
				pageable: true,
				editable: false,
				columnsresize: true,
				theme: 'classic',
				width: 900,
				columns: [
				{ text: 'Fund', dataField: 'Fund', cellsalign:'left', width: 120 }
				]
			});
			// change columns collection.
			$("#jqxGrid").jqxGrid({ columns: gridColumns });
        });
    </script>
</head>
<body class='default'>
      <div id="jqxGrid"></div>
  </body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 11, 2012 at 8:47 am Dynamic columns in grid #4084

shivaw

Member

Hi Peter,

Thanks for correcting me, but the given approach is still not working. The page renders only those columns which are by default bounded to the grid.

This piece of code does not change the columns info dynamically.

// change columns collection.
$(“#jqxGrid”).jqxGrid({ columns: gridColumns });

Please help us.

Thanks,
Shiva.

May 11, 2012 at 9:15 am Dynamic columns in grid #4085

Peter Stoev

Keymaster

Hi Shiva,

It works on my side with jQWidgets 2.1. Please double check whether you include the appropriate files and use the latest version. As a proof, I prepared an online demo: DynamicGridColumns/index.htm

The source code uses the same approach, but I added a sample data to display in the Grid:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqx-all.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
			var gridColumns = [
				{ text: 'Fund', dataField: 'Fund', cellsalign:'left', width: 120 },
				{ text: 'USD', dataField: 'USD', cellsalign:'right', width: 130 },
				{ text: 'EUR', dataField: 'EUR', cellsalign:'right', width: 130 },
				{ text: 'GBP', dataField: 'GBP', cellsalign:'right', width: 130 },
				{ text: 'CAD', dataField: 'CAD', cellsalign:'right', width: 130 },
				{ text: 'MYR', dataField: 'MYR', cellsalign:'right', width: 130 },
				{ text: 'ISK', dataField: 'ISK', cellsalign:'right', width: 130 }
			];
			var source = {
				localdata: [
				{Fund: '1', USD: 1, EUR: 1, GBP: 1, CAD: 1, MYR: 1, ISK: 1},
				{Fund: '1', USD: 2, EUR: 2, GBP: 2, CAD: 2, MYR: 2, ISK: 2},
				{Fund: '1', USD: 3, EUR: 3, GBP: 3, CAD: 3, MYR: 3, ISK: 3},
				{Fund: '1', USD: 4, EUR: 4, GBP: 4, CAD: 4, MYR: 4, ISK: 4},
				{Fund: '1', USD: 5, EUR: 5, GBP: 5, CAD: 5, MYR: 5, ISK: 5}
				]				
			}
			$("#jqxGrid").jqxGrid(
			{
				autoheight: true,
				source: source,
				width: 900,
				columns: [
				{ text: 'Fund', dataField: 'Fund', cellsalign:'left', width: 120 }
				]
			});
			// change columns collection.
			$("#jqxGrid").jqxGrid({ columns: gridColumns });
        });
    </script>
</head>
<body class='default'>
      <div id="jqxGrid"></div>
  </body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 18, 2013 at 9:58 am Dynamic columns in grid #32845

it’s me

Member

Hi ,

Currently I am using JQWidgets v3.0.4, already I had a table which I created by using jsp(which contains column names, its datatype etc) like. By using this table ID I need to construct a jqxgrid.

But I am not seeing any change in my table , Please help on this issue.

Kind Regards,

November 18, 2013 at 11:19 am Dynamic columns in grid #32849

Peter Stoev

Keymaster

Hi it’s me,

jqxGrid cannot be initialized from Table tag. It can be created from empty DIV tag.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 18, 2013 at 11:23 am Dynamic columns in grid #32850

it’s me

Member

Hi Peter,

Thanks for your reply,

Can you please give the example.

November 18, 2013 at 11:29 am Dynamic columns in grid #32852

Peter Stoev

Keymaster

Hi it’s me,

Here’s a sample for creating a jqxGrid: jquery-grid-getting-started.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

You must be logged in to reply to this topic.