Dropdown in rowedittemplate dialog not showing text key(Reason -Text key and value key are different).
columnSettings: [{ //The combo is defined as an editor provider. Combo options are defined under 'editorOptions'. columnKey: "Employment_Source_Type", editorType: 'combo', required: true, editorOptions: { mode: "editable", dataSource: getIncomeTypes(), textKey: "Name", valueKey: "Employment_Source_Type", AllowCustomValue:true, autoComplete: true, } },
It shows no values in dropdown at the first time editing using rowedittemplate dialog.I want to display Name in dropdown.How to solve this.Please help me.
Sooraj Jayaraj,
I would like to ask you for the complete page that may give us a clue what causes your issue. Isolate the necessary widgets for the issue and place them in separate html page, nothing additional. Also make sure that we will be able to observe the issue on the new sample.
Thank you for posting in our community!
Hi petko,
I have to display the text in each drop down list whatever I selected and saved already when it goes in edit mode(rowedittemplate). please help me on this.
please find the below code I used. Any help will be appreciated.
function populateIncomeList(d) {
$("#gvIncomeList").igGrid({ primaryKey: "Employer_Id",
columns: [ { headerText: "Employer_Id", key: "Employer_Id", dataType: "number" }, { headerText: "Income Source", key: "Employment_Source_Type", dataType: "string", width: "180px", formatter: lookupIncomeTypes }, { headerText: "Client/Co-Client", key: "Client_Id", dataType: "string", width: "200px", formatter: lookupClient }, { headerText: "Pay Frequency", key: "Payfreq", dataType: "string", width: "100px" }, { headerText: "Gross Amount", key: "Gross_Pay", dataType: "number", format: "currency", width: "95px" }, { headerText: "Take Home", key: "Net_Pay", dataType: "number", format: "currency", width: "80px" }, { headerText: "Proposed Gross", key: "Proposed_Gross", dataType: "number", format: "currency", width: "95px" }, { headerText: "Proposed Net", key: "Proposed_Net", dataType: "number", format: "currency", width: "95px" }, { headerText: "Withholding%", key: "Variance", dataType: "string", width: "95px" }
], autofitLastColumn: true, autoGenerateColumns: false, autoCommit: true, dataSource: d, responseDataKey: "results", features: [
{ name: "Selection", mode: 'cell', multipleSelection: false
}, { name: "Hiding", columnSettings: [ { columnKey: "Employer_Id", allowHiding: false, hidden: true }, { columnKey: "Employment_Source_Type", allowHiding: false, hidden: false }, { columnKey: "Client_Id", allowHiding: false, hidden: false }, { columnKey: "Payfreq", allowHiding: false, hidden: false }, { columnKey: "Gross_Pay", allowHiding: false, hidden: false }, { columnKey: "Net_Pay", allowHiding: false, hidden: false }, { columnKey: "Proposed_Gross", allowHiding: false, hidden: false }, { columnKey: "Proposed_Net", allowHiding: false, hidden: false }, { columnKey: "Variance", allowHiding: false, hidden: false }
] } , { name: "Updating", editMode: "rowedittemplate", enableAddRow: getOption(), enableDeleteRow: getOption(), validation: true, showDoneCancelButtons: true, addRowLabel: "Add New Income", columnSettings: [{ //The combo is defined as an editor provider. Combo options are defined under 'editorOptions'. columnKey: "Employment_Source_Type", editorType: 'combo', required: true, editorOptions: { mode: "editable", dataSource: getIncomeTypes(), textKey: "Name", valueKey: "Name", autoComplete: true } }, { //The combo is defined as an editor provider. Combo options are defined under 'editorOptions'. columnKey: "Payfreq", editorType: 'combo', required: true, editorOptions: { mode: "editable", dataSource: getPayFrequencyTypes(), textKey: "Name", valueKey: "Name", autoComplete: true
} }, { //The combo is defined as an editor provider. Combo options are defined under 'editorOptions'. columnKey: "Client_Id", editorType: 'combo', required: true, editorOptions: { mode: "dropdown", dataSource: getClientList(), textKey: "ClientName", valueKey: "Client_Id", autoComplete: true
} }, { columnKey: "Gross_Pay", required: true, defaultValue: 0.00 }, { columnKey: "Net_Pay", required: true, defaultValue: 0.00 } , { columnKey: "Proposed_Gross", required: true, defaultValue: 0.00 } , { columnKey: "Proposed_Net", required: true, defaultValue: 0.00 }, { columnKey: "Variance", readOnly: true, defaultValue: 0 } ], rowDeleting: function (evt, ui) { if (!confirm("Are you sure you want to delete this item?")) { return false; }
}, rowAdded: function (evt, ui) {
SaveIncome(0, ui.values["Client_Id"], ui.values["Employment_Source_Type"], ui.values["Gross_Pay"], ui.values["Net_Pay"], ui.values["Proposed_Gross"], ui.values["Proposed_Net"], ui.values["Payfreq"]); RefreshIncome(); RefreshIncomeSummary(); RefreshBudgetSummaryOutcome(); RebindAllGrids(); }, rowDeleted: function (evt, ui) {
var employer_id = parseInt(ui.rowID); DeleteIncome(employer_id); RefreshIncome(); RefreshIncomeSummary(); RefreshBudgetSummaryOutcome(); RebindAllGrids(); }, editCellEnding: function (evt, ui) { //; if (!ui.rowAdding) {
var Employer_Id = parseInt(ui.rowID);
if (ui.columnKey == "Proposed_Net") {
var dv = $("#gvIncomeList").igGrid("option", "dataSource"); var matches = $.grep(dv, function (elt) { return elt.Employer_Id === Employer_Id; });
if (matches.length > 0) {
// SaveIncome(Employer_Id, matches[0].Client_Id, matches[0].Employment_Source_Type, matches[0].Gross_Pay, matches[0].Net_Pay, ui.value, matches[0].Proposed_Net, matches[0].Payfreq); SaveIncome(Employer_Id, matches[0].Client_Id, matches[0].Employment_Source_Type, matches[0].Gross_Pay, matches[0].Net_Pay, matches[0].Gross_Pay, ui.value, matches[0].Payfreq); } var message = "The grid's data has been updated..."; showFeedback("updatedMessage", message); RefreshIncome(); RefreshIncomeSummary(); RefreshBudgetSummaryOutcome(); RebindAllGrids(); if ((ui.owner._rowIndex + 1) < dv.length) {
$("#gvIncomeList").igGridUpdating("startEdit", ui.owner._rowIndex + 1, 0);
} } } }, editRowEnding: function (evt, ui) { //; if (!ui.rowAdding) {
SaveIncome(Employer_Id, ui.values["Client_Id"], ui.values["Employment_Source_Type"], ui.values["Gross_Pay"], ui.values["Net_Pay"], ui.values["Proposed_Gross"], ui.values["Proposed_Net"], ui.values["Payfreq"]);
} }
} ]
}); }