bindingcomplete won't work in my design - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: #jqwidgets-grid, bindingcomplete, button click, grid, javascript grid, jquery grid

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

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

Author

bindingcomplete won't work in my design Posts
September 27, 2018 at 3:01 pm bindingcomplete won't work in my design #102155
swisspen
Participant
Hi

In your documentation, you say “Note: Bind to that event before the Grid’s initialization, because if you data bind the Grid to a local data source and bind to the “bindingcomplete” event after the initialization, the data binding will be already completed.” But what constitutes the initialization exactly? When the source has been created? Or the Grid itself? Or everything – data, source and Grid?

Also, in my implementation, I start off with no Grid being displayed, just a line of buttons representing letters of the alphabet. A button-click on one of the alphabet buttons is what starts up all the elements needed for the Grid creation.

Here is my html (without the header and footer details):
```
<body class='default'>
<div style="text-align: center;">
<h3>Find Member by Initial</h3>
<fieldset style = "border: solid #aaaaaa 1px; padding: 20px; padding-top: 20px;">
<?php
$alphabet = array();
array_push($alphabet, "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "y", "z");
for ($i = 0; $i < sizeof($alphabet); $i++)
{
	echo "<input type='button' class ='butClass' value=" . $alphabet[$i] . " name='but-'" . $alphabet[$i] . ">&nbsp;&nbsp;";
}
?>
<div id="jqxToolBar"></div>
<div id = "jqxgrid1" style="float: left; font-size: 13px; font-family: Tahoma;"></div>
</div>
</fieldset>
```
My data source in jQuery looks like this:
```
var url = 'iwcn-json-responses.php?fct=getTheseNames';	
	
	$("input[name*='but']").click(function()
	{
		var source = 
		{
			datatype: "json",
			url: url,
			data: ({ initialIn: $(this).val() })
			datafields: [
			{ name: 'first_name', type: 'string'}, 
			{ name: 'last_name', type: 'string'},
			{ name: 'address_street', type: 'string'},
			{ name: 'address_zipcode', type: 'string'},
			{ name: 'address_city', type: 'string'},
			{ name: 'country', type: 'string'},
			{ name: 'email', type: 'string'},
			{ name: 'phone', type: 'string'},
			{ name: 'mobile', type: 'string'},
			{ name: 'member_id', type: 'int'}
			]
		};//end data source
```
And finally, here are the adapter and the Grid:
```
var adapter1 = new $.jqx.dataAdapter(source);
	
		var columns = [
		  { text: 'First Name', datafield: 'first_name', width: 120},
		  { text: 'Last Name', datafield: 'last_name', width: 150},
		  { text: 'Address', datafield: 'address_street', width: 200},
		  { text: 'Code', datafield: 'address_zipcode', width: 80},
		  { text: 'City', datafield: 'address_city', width: 100},
		  { text: 'Country', datafield: 'country', width: 130},
		  { text: 'Email', datafield: 'email', width: 180},
		  { text: 'Phone', datafield: 'phone', width: 120},
		  { text: 'Mobile', datafield: 'mobile', width: 120}
		  ];
			 	
		$("#jqxgrid1").jqxGrid(
			{
				width: 1200,
				height: 600,
				source: adapter1,
				sortable: true,
				pageable: true,
				pagesize: 20,
				pagesizeoptions: [20, 30, 50],
				editable: true,
				selectionmode: 'multiplecellsadvanced',
				enabletooltips: true,
				altrows: 'true',
				columns: columns
                       });
```
Everything works fine without the bindingcomplete statement: the database call matches the first letter of the member’s last name to the input and sends back a list that populates the Grid. BUT the 2nd time you click an alphabet letter, even though everything continues to work fine, the Developer Console shows the famous error:
Uncaught Error: jqxGrid: The data is still loading. When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handler.
But if I use bindingcomplete in the “source” section, nothing works at all.
Two questions then: 1) How can I improve my design so that I can re-introduce the bindingcomplete statement and
2) WHERE would I put the the bindingcomplete statement?

Thanks v. much,
Swisspen
September 28, 2018 at 9:55 am bindingcomplete won't work in my design #102179

Hristo
Participant

Hello Swisspen,

The bindingcomplete is an event you should set before the initialization of the jqxGrid – $(selector).jqxGrid(settings);.
I would like to mention from what I saw you initialize the jqxGrid in the scope of button click event.
It should happen just once. It is important for all initializations of the widgets.
You could update it via the methods or if you want to change the data then you should make changes in the DataAdapter, too.
Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

September 30, 2018 at 6:07 am bindingcomplete won't work in my design #102197
swisspen
Participant
Thank you very much for your rapid reply, Hristo.

On the subject of taking my grid creation out of the button click event’s scope: well, I did that, but then I had the problem that my parameter named “initialIn” is always empty. I tried creating a hidden input in the html and sending the alphabetic button’s value to this input field during the button click event … however, when it’s time to build the grid, “initialIn” is still empty! How do I get around this problem?

My additional html is:
```
<input id="buttonVal" type="hidden">
```
The alphabetic button click event is now:
```
$("input[name*='but']").click(function()
	{	
		$('#buttonVal').val($(this).val());
                [some other code here]
        });
```
and then in the grid’s source:
```
datatype: "json",
			url: 'iwcn-json-responses.php?fct=getTheseNames',
			data: {
			initialIn: $("#buttonVal").val(),
			style: "full",
			maxRows: 50
			},
			datafields: datafields
```
but the response in my dev console always shows “initialIn=&” whereas in my old version initialIn= had the button’s letter after the = sign.

Thanks if you can help with this.

SP
October 1, 2018 at 12:15 pm bindingcomplete won't work in my design #102208

Hristo
Participant

Hello Swisspen,

Could you clarify it? What is this input?
Try to make this input visible before you get the value, get it, and after that make it hidden again.
Another option that you could try with a default value.

Also, I would like to suggest you look at this article, if you want to send extra variables.
I would like to propose your attention to formatData callback.

Best Regards,
Hristo Hristov

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

Posts

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

You must be logged in to reply to this topic.