jQWidgets Forums

This topic contains 5 replies, has 3 voices, and was last updated by Peter Stoev 9 years, 12 months ago.

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

Author

Dynamically change data source, columns, and toolbar Posts

January 14, 2014 at 8:44 pm Dynamically change data source, columns, and toolbar #47861

kcq

Participant

Hello,

I’m trying to change the data source, columns and toolbar of the jqxTreeGrid through code. It seemed that jqxGrid is working fine, but the jqxTreeGrid widget doesn’t properly changed to the short columns and source. I am attaching the code here. If you change the jqxTreeGrid to jqxGrid, it worked as expected. Can you please help? Thanks!

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./css/jqx.base.css" type="text/css" />
	<script type="text/javascript" src="./scripts/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="./scripts/jqx-all.js"></script>
    <script type="text/javascript">
    	$(document).ready(function ()
    	{
    		var isInitData = true;
    		var initData = '[{ "Test": "Testing" }]';
    		var initsource =
			{
				datatype: "json",
				datafields: [{ name: 'Test' }],
				localdata: initData
			};
    		var initDataAdapter = new $.jqx.dataAdapter(initsource);

    		var data = '[{ "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany" }, { "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Antonio Moreno Taquera", "ContactName": "Antonio Moreno", "ContactTitle": "Owner", "Address": "Mataderos 2312", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Around the Horn", "ContactName": "Thomas Hardy", "ContactTitle": "Sales Representative", "Address": "120 Hanover Sq.", "City": "London", "Country": "UK" }, { "CompanyName": "Berglunds snabbkp", "ContactName": "Christina Berglund", "ContactTitle": "Order Administrator", "Address": "Berguvsvgen 8", "City": "Lule", "Country": "Sweden" }, { "CompanyName": "Blauer See Delikatessen", "ContactName": "Hanna Moos", "ContactTitle": "Sales Representative", "Address": "Forsterstr. 57", "City": "Mannheim", "Country": "Germany" }, { "CompanyName": "Blondesddsl pre et fils", "ContactName": "Frdrique Citeaux", "ContactTitle": "Marketing Manager", "Address": "24, place Klber", "City": "Strasbourg", "Country": "France" }, { "CompanyName": "Blido Comidas preparadas", "ContactName": "Martn Sommer", "ContactTitle": "Owner", "Address": "C\/ Araquil, 67", "City": "Madrid", "Country": "Spain" }, { "CompanyName": "Bon app\'", "ContactName": "Laurence Lebihan", "ContactTitle": "Owner", "Address": "12, rue des Bouchers", "City": "Marseille", "Country": "France" }, { "CompanyName": "Bottom-Dollar Markets", "ContactName": "Elizabeth Lincoln", "ContactTitle": "Accounting Manager", "Address": "23 Tsawassen Blvd.", "City": "Tsawassen", "Country": "Canada" }, { "CompanyName": "B\'s Beverages", "ContactName": "Victoria Ashworth", "ContactTitle": "Sales Representative", "Address": "Fauntleroy Circus", "City": "London", "Country": "UK" }, { "CompanyName": "Cactus Comidas para llevar", "ContactName": "Patricio Simpson", "ContactTitle": "Sales Agent", "Address": "Cerrito 333", "City": "Buenos Aires", "Country": "Argentina" }, { "CompanyName": "Centro comercial Moctezuma", "ContactName": "Francisco Chang", "ContactTitle": "Marketing Manager", "Address": "Sierras de Granada 9993", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Chop-suey Chinese", "ContactName": "Yang Wang", "ContactTitle": "Owner", "Address": "Hauptstr. 29", "City": "Bern", "Country": "Switzerland" }, { "CompanyName": "Comrcio Mineiro", "ContactName": "Pedro Afonso", "ContactTitle": "Sales Associate", "Address": "Av. dos Lusadas, 23", "City": "Sao Paulo", "Country": "Brazil" }, { "CompanyName": "Consolidated Holdings", "ContactName": "Elizabeth Brown", "ContactTitle": "Sales Representative", "Address": "Berkeley Gardens 12 Brewery", "City": "London", "Country": "UK" }, { "CompanyName": "Drachenblut Delikatessen", "ContactName": "Sven Ottlieb", "ContactTitle": "Order Administrator", "Address": "Walserweg 21", "City": "Aachen", "Country": "Germany" }, { "CompanyName": "Du monde entier", "ContactName": "Janine Labrune", "ContactTitle": "Owner", "Address": "67, rue des Cinquante Otages", "City": "Nantes", "Country": "France" }, { "CompanyName": "Eastern Connection", "ContactName": "Ann Devon", "ContactTitle": "Sales Agent", "Address": "35 King George", "City": "London", "Country": "UK" }, { "CompanyName": "Ernst Handel", "ContactName": "Roland Mendel", "ContactTitle": "Sales Manager", "Address": "Kirchgasse 6", "City": "Graz", "Country": "Austria"}]';
    		// prepare the data
    		var source =
            {
            	datatype: "json",
            	datafields: [
                    { name: 'CompanyName' },
                    { name: 'ContactName' },
                    { name: 'ContactTitle' },
                    { name: 'Address' },
                    { name: 'City' },
                    { name: 'Country' }
            	],
            	localdata: data
            };
    		var dataAdapter = new $.jqx.dataAdapter(source);
    		var columns = [
                    { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                    { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                    { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                    { text: 'City', datafield: 'City', width: 120 },
                    { text: 'Country', datafield: 'Country', width: 120 }
    		];

    		var toolbarfuncA = function (toolbar)
    		{
    			//toolbar.empty();
    		};

    		var toolbarfunc = function (toolbar)
    		{
    			var container = $("<div style='overflow: hidden; position: relative; height: 100%; width: 100%;'></div>");
    			var buttonTemplate = "<input style='margin-left: 5px; margin-top: 5px' type='button' value='Long' id='jqxButton' />";
    			var switchButton = $(buttonTemplate);
    			container.append(switchButton);
    			toolbar.append(container);

    			switchButton.jqxToggleButton({ cursor: "pointer", disabled: false, toggled: false, height: 25, width: 80 });
    			switchButton.click(function (event)
    			{
    				var id = '#' + event.target.id;
    				var toggled = $(id).jqxToggleButton('toggled');
    				if (toggled)
    				{
    					switchButton.val('Short');
    					$("#jqxgrid").jqxTreeGrid(
							{
								renderToolbar: toolbarfunc,
								source: initDataAdapter,
								columns: [{ text: 'Test Name', datafield: 'Test', width: 250 }]
							});
    				}
    				else
    				{
    					switchButton.val('Long');
    					$("#jqxgrid").jqxTreeGrid(
							{
								renderToolbar: toolbarfuncA,
								source: dataAdapter,
								columns: columns
							});
    				}
    			});
    		}
    		$("#jqxgrid").jqxTreeGrid(
            {
            	width: 670,
				altrows: true,
            	source: dataAdapter,
            	showtoolbar: true,
            	columnsresize: true,
            	columns: columns,
            	renderToolbar: toolbarfunc
            });
    	});
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

January 15, 2014 at 6:32 am Dynamically change data source, columns, and toolbar #47871

Peter Stoev

Keymaster

Hi kcq,

Dynamically changing the columns is not available in this version.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 15, 2014 at 12:24 pm Dynamically change data source, columns, and toolbar #47894

kcq

Participant

Thanks Peter. When will this feature be available? Thanks!

January 15, 2014 at 12:36 pm Dynamically change data source, columns, and toolbar #47895

Peter Stoev

Keymaster

Hi kcq,

All I can do is to add a new work item. In general, I do not think that it should be necessary to dynamically change the TreeGrid’s Columns.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 21, 2015 at 11:54 am Dynamically change data source, columns, and toolbar #71397

mustafa

Participant

hello this try
You need global variable datasource ( window.Datasource )


    function GridDynamicDataBind(grid, gridData, gridSource) {

        gridSource.localdata = gridData;
        $("#" + grid + "").jqxTreeGrid('updateBoundData');  
        $("#" + grid + "").jqxTreeGrid('refresh');

    }

    function TreeGridDynamicDataBind(grid, gridData, gridSource) {

        gridSource.localdata = gridData;
        $("#" + grid + "").jqxTreeGrid('updateBoundData');  
        $("#" + grid + "").jqxTreeGrid('updating');  
        $("#" + grid + "").jqxTreeGrid('endUpdate'); 
        $("#" + grid + "").jqxTreeGrid('refresh');

    }

dynamic data bind

STANDART GRID


function GridInvoice() {
var data = "";
    window.GridInvoiceDataSource =

          {
              datafields: [
              { name: 'InvoiceID', type: 'string' },
              { name: 'Code', type: 'string' },
              { name: 'InvoiceItemName', type: 'string' },
              { name: 'VesselName', type: 'string' },
              { name: 'InvoiceNo', type: 'string' } 
                  commit(true);
              },
              localdata: data,
              async: false,
              datatype: "array",
              id: 'InvoiceID',

          }

    var dataAdapter = new $.jqx.dataAdapter(window.GridInvoiceDataSource);

    $("#GridInvoice").jqxGrid(
    {
        width: '100%',
        source: dataAdapter,
        pageable: true,
        columnsresize: true,
        enablehover: true,
        //autorowheight: true,
        sortable: true,

        altrows: true,
        height: '700px',
        pagesize: 30,
        theme: "web",
        editable: false,
        columns: [
             { text: 'Item Code', datafield: 'Code', width: '7%', },
             { text: 'Item Name', datafield: 'InvoiceItemName', width: '10%', },
             { text: 'Vessel', datafield: 'VesselName', width: '10%' },
             { text: 'Invoice No', datafield: 'InvoiceNo', width: '10%', }          
        ],
    });
}
 
function UpdateGridInvoice(updateData) {
 
        $.ajax({

            url: '/Invoice/UpdateInvoice/',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ updateData: updateData}),
            async: false, 
            success: function (status) {   
                if (status) { 
                   var resultData = GetInvoices();
                   GridDynamicDataBind("GridInvoice", resultData, window.GridInvoiceDataSource); 

                }
                else alertify.error("UpdateInvoice");

            },
            error: function (jqXHR, textStatus, errorThrown) {
                alertify.error("UpdateInvoice");
            }
        });
    }
}

TREEGRID


function GridInvoiceItem() {

    var data = GetInvoiceItemsHierarchy();
    window.GridInvoiceItemDataSource =
         {
             datafields: [
             { name: 'InvoiceItemID', type: 'string' },
             { name: 'ParentID', type: 'string' },
             { name: 'Name', type: 'string' },
             { name: 'Code', type: 'string' }

             ], 
             hierarchy:
        {
            keyDataField: { name: 'InvoiceItemID' },
            parentDataField: { name: 'ParentID' }
        },
             localdata: data,
             async: false,
             datatype: "array",
             id: 'InvoiceItemID',

         }

    var dataAdapter = new $.jqx.dataAdapter(window.GridInvoiceItemDataSource);
  
    $("#GridInvoiceItem").jqxTreeGrid(
    {
        width: '100%',
        height: '700px',
        source: dataAdapter,
        pageable: true,
        sortable: true, 
        pageSize: 200,
        theme: 'web',
        editable: false,
        columns: [
          { text: 'Name', datafield: 'Name', width: '50%', },
          { text: 'Code', datafield: 'Code', width: '50%', }
        ]
    });
}

function AddInvoiceItem(addData) {
 
        $.ajax({
            url: '/InvoiceItem/AddInvoiceItem/',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ incomingData: addData }),
            async: false,
            success: function (status) { 
                if(status)
               {   var resultData = GetInvoiceItems();
                   TreeGridDynamicDataBind("GridInvoiceItem", resultData, window.GridInvoiceItemDataSource); 
                }
                else {
                    DynamicAlertifyFunction('error', 'AddInvoiceItem');
                }
            },
            error: function (e) {
                DynamicAlertifyFunction('error', 'AddInvoiceItem');
            }
        });
    }
}

May 21, 2015 at 12:13 pm Dynamically change data source, columns, and toolbar #71403

Peter Stoev

Keymaster

Hi mustafa,

I don’t understand what your post here is about and why you write on topic from January 2015. If you want to provide feedback then use sample data and share jsfiddle.net sample which demonstrates an issue.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.