Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
100
Setting defaultValue not working
posted

Ignite UI version: 2018.2

When I set defaultValue in the iggrid initialization (columnSettings): works!
When I change defaultValue in the rendered event: works!
When I change defaultValue in the saveChanges event after committing the dataSource: doesn't work
Changing another another parameter, f.e. "required" in the saveChanges event after committing the dataSource works too, so I suppose there's a problem changing defaultValue programmatically after initialization.

Is there a work around?

My code:

var grid = $("#CustomerStartupNormenGrid");
$.ajax({
	type: "GET",
	cache: false,
	url: urlCustomerStartup_GetNormen,
	data: { klantNr: webCustomer.Klantnr, login: webUser.Gebruikersnaam, languageCode: languageCode },
	dataType: "json",
	async: false,
	success(response, status, xhr) {
		if (response) {
			var ct = xhr.getResponseHeader("content-type") || "";
			if (ct.indexOf("ERROR") === -1) {

				//Grid Initialization
				grid.igGrid({
					language: languageCode.toLowerCase(),
					dataSource: response,
					responseDataKey: "OpstartNorm",
					updateUrl: urlCustomerStartup_SetNormen,
					autoGenerateColumns: false,
					primaryKey: "Volgnummer",
					autoCommit: true,
					width: "100%",
					height: "800px",
					columns: [
						{ headerText: "", key: "Volgnummer", dataType: "number", hidden: true },
						{ headerText: "", key: "Klantnr", dataType: "string", hidden: true },
						{ headerText: "", key: "Login", dataType: "object", hidden: true },
						{
							headerText: "Afdelingscode",
							key: "Afdelingscode",
							dataType: "string"
						},
						{
							headerText: "Artikelnr",
							key: "Artikelnr",
							dataType: "string"
						},
						{
							headerText: "Telvolgorde",
							key: "Telvolgorde",
							dataType: "number"
						}
					],
					features: [
						{
							name: 'Updating',
							editMode: "dialog",
							rowEditDialogOptions: {
								width: "500px",
								height: "700px",
							},
							columnSettings: [{
								columnKey: "Klantnr",
								defaultValue: webCustomer.Klantnr
							},
							{
								columnKey: "Login",
								defaultValue: [webUser.Gebruikersnaam]
							}, {
								columnKey: "Afdelingscode",
								required: true,
								editorType: 'combo',
								editorOptions: {
									mode: "dropdown",
									dataSource: response.Afdelingen,
									textKey: "Naam",
									valueKey: "Code"
								}
							}, {
								columnKey: "Artikelnr",
								required: true,
								editorType: 'combo',
								editorOptions: {
									mode: "dropdown",
									dataSource: response.Artikels,
									textKey: "Omschrijving",
									valueKey: "Artikelnr",
									validatorOptions: { language: languageCode.toLowerCase() }
								}
							}, {
								columnKey: "Telvolgorde",
								editorType: 'numeric',
								defaultValue: 0,
								required: true,
								allowSorting: true,
								currentSortDirection: 'ascending',
								editorOptions: {
									validatorOptions: { language: languageCode.toLowerCase() }
								}
							}],
							editRowEnded: function (evt, ui) {
								if (ui.update) { //ui.rowUpdate
									$("#CustomerStartupNormenGrid").igGrid("saveChanges",
										function (data) {
											if (data.ids.NewId > 0) {
												setTimeout(function () {
													grid.igGridUpdating("setCellValue",
														data.ids.OldId,
														"Volgnummer",
														data.ids.NewId); // Line 5

													$(
														"#CustomerStartupNormenGrid > tbody > tr[data-id='" +
														data.ids.OldId +
														"']").attr("data-id", data.ids.NewId); // Line 6
												},
													100);
											}

											grid.data("igGrid").dataSource.commit(); // Line 8
											grid.data("igGrid").dataSource.allTransactions().length = 0; // Line 9

											//Show feedback
											var message = TranslationDAL.localizedStrings["GridUpdated"][languageCode];
											showFeedback("CustomerStartupNormenUpdatedMessage", message);

											CalcDefaultTelvolgorde();
										},
										function (jqXHR, textStatus, errorThrown) {
											alert(jqXHR.responseJSON.ErrorMessage);
										});
								}
							},
							rowDeleted: function (evt, ui) {
								var message = TranslationDAL.localizedStrings["GridUpdated"][languageCode];
								showFeedback("CustomerStartupNormenUpdatedMessage", message);

								grid.igGrid("saveChanges");

								CalcDefaultTelvolgorde();
							},
							generatePrimaryKeyValue: function (evt, ui) { ui.value = 0; }
						}
					],
					rendered: function (evt, ui) {
						CalcDefaultTelvolgorde();
					}
				});
			} else {
				alert("ERROR:" + response);
			}
		}
	},
	error(xhr, textStatus, errorThrown) {
		SharedFunctionsDAL.ShowUnexpectedError(xhr, errorThrown);
	}
});

function CalcDefaultTelvolgorde() {
	var rowCount = grid.igGrid("rows").length;
	var columnSettings = grid.igGridUpdating("option", "columnSettings");
	if (rowCount === 0)
		columnSettings[5].defaultValue = 0;
	else {
		var dataSource = grid.data("igGrid").dataSource;
		var lastCounter = dataSource._data[dataSource._data.length - 1].Telvolgorde;
		columnSettings[4].defaultValue = lastCounter + 10;
	}
	grid.igGridUpdating("option", "columnSettings", columnSettings);
}

Thanks!

Parents
  • 200
    Offline posted

    Hello Serge,

    Thank you for providing a detailed picture on the matter.

    I tested changing the defaultValue runtime and the reason that it can’t be changed is that the dialog editor is created only initially. I am currently working on providing a solution for the issue.

    I will come back with an update as soon as possible.

    In the meantime, in case you have additional questions feel free to ask them.

    Regards

  • 200
    Verified Answer
    Offline posted in reply to Martin Kamenov

    Hello Serge,

    In order to change the default value in the dialog of a column you can handle the rowEditDialogOpen. After the event is fired the textEditor of the column is available and you can get it and change the value like:

    features: [
        {
            name: 'Updating',
            editMode: "dialog",
            rowEditDialogAfterOpen: function(evt, ui) {
                const editor = $("#grid").igGridUpdating("editorForKey", "Name");
                const newText = "New text";
                editor.igTextEditor("value", newText);
            },
            columnSettings: [{
                columnKey: "Name",
                defaultValue: "Old"
            }],
        }
    ]

    In you have any additional questions feel free to ask them.

Reply Children