loadComplete callback several times

[soojungParticipant]

Hello, I made 2 dropdownlists with db data.
When click DropSaup, DropBranch is changed.
Problem is, loadComplete callback fires 3times when first click the DropSaup.
If I click once again, loadComplete callback successfully fires just one time.
I test ‘select’ and ‘change’ method but situation is same.
Here’s my code.

Index.html

<td>
  @Html.DropDownList("DropSaup", Model.drop.Saups, new { id = "DropSaup" })
</td>
<td>
  @Html.DropDownList("DropBranch", Model.drop.Branches)
</td>

script

$(document).ready(function () {
  var $DropSaup = $("#DropSaup"),
      $DropBranch = $("#DropBranch");
  
  $DropSaup.jqxDropDownList({
        placeHolder: '',
	theme: THEME_ARCTIC,
	autoItemsHeight: true,
	width: 100,
	selectedIndex: 0,
	displayMember: "valCol", valueMember: "keyCol"
  });

  $(document).on('change', "#DropSaup", function (e) {
	var datas = {
		saupCode: e.args.item.value,
		checkModemExist: false,
		checkUseFlag: true
	};
	updateDropBranch($DropBranch, datas);
  });
}

function updateDropBranch($DropBranch, datas) {
        var saupCode = datas.saupCode;

	var branchsource =
	{
		url: '/DropDown/Branch/',
		datatype: "json",
		datafields: datas ? df_DropDate : df_Drop,
		data: datas
	};

	var dataAdapterBranch = new $.jqx.dataAdapter(branchsource, {
		loadComplete: function (records) {
			console.log('callback');  // ---> 3times when first click
			$DropBranch.jqxDropDownList('insertAt',
				{ label: 'All', value: '000' }, 0);
			if (g_dropData) {
				$DropBranch.jqxDropDownList('selectItem', g_dropData.BranchCode);
				g_dropData.BranchCode = null;
			}
			else {
				$DropBranch.jqxDropDownList('selectIndex', 0);
			}
		}
	});

	$DropBranch.jqxDropDownList({
		source: dataAdapterBranch
	});
	if (datas) {
		$DropBranch.jqxDropDownList({
			displayMember: "Text",
			valueMember: "Value"
		});
	}
}

Best regards,
Soo

[HristoParticipant]

Hello Soo,

Why you set new DataAdapter on each “change” in the ‘document’ – you make an update.
The correct approach is to initialize the widget just once with separate DataAdapter for each one and just to use its methods and callbacks to update them.
If you want to update the URL of the DataAdapter’s source you could use formatData callback.
Please, take a look at this tutorial:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-extra-http-variables.htm?search=grid

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[soojungParticipant]

Hello Hristo,

Thank you for your response.
I set DataAdapter on “change” of “DropSaup” in the ‘document’.
Because this dropdownlist is connected each other.
I saw formatData document and tried this method but still don’t know how to make it.
How can I call formatData without using dataAdapter initialize when click first Dropdownlist?
Could you give me simple example?

Best Regards,
Soo

[HristoParticipant]

Hello Soo,

You could try to use the adapter.dataBind() the method this will update the jqxDataAdapter and will invoke the formatData callback where you will set the new values.
For the initial state, you should set the first settings in the data object of the DataAdapter’s source.
Please, take a look at this topic.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts