Eliminate Dropdownlist duplicate values

[revaParticipant]

Hi,

I have a grid view in the page which values are getting from webservice. I have a right click context menu which has New,Edit,Delete etc., On edit click I am having a dropdownlist which should get the value of the edit row column and it should be the selected index but i am getting duplicate values.

<%@ Page Title=”” Language=”C#” MasterPageFile=”~/MasterPage.Master” AutoEventWireup=”true” CodeBehind=”Connectors.aspx.cs” Inherits=”GTSClient2.Organisation.Connectors” culture=”auto” meta:resourcekey=”PageResource1″ uiculture=”auto” %>
<asp:Content ID=”Content1″ ContentPlaceHolderID=”HeadContent” runat=”server”>
<script type=”text/javascript”>
function setCursorWait(id) {
$(id + ‘ *’).css(‘cursor’, ‘progress’).attr(‘disabled’, ‘disabled’);
}
function setCursorNormal(id) {
$(id + ‘ *’).css(‘cursor’, ‘default’).removeAttr(‘disabled’);
}
$(document).ready(function () {
showLoading();
$(“#contentTitle”).text(‘<%= GetLocalResourceObject(“Title”) %>’);
setCursorWait(‘#contentRoot’);
GTSClient2.Organisation.Organisation.ListConnectors($(‘#corrKey’).val(), onconnectorsuccess, onconnectorfail);
});
function onconnectorsuccess(ret) {
if (ret.Success)
{
setCursorNormal(‘#contentRoot’);
loadGrid(ret.Connectors);
showContent();
}
else
alert(ret.ErrorMessage);
}
function onconnectorfail(ret) {
alert(ret._message);
}
function loadGrid(ret) {
var source =
{
localdata: ret,
datafields: [
{ name: ‘Name’, type: ‘string’},
{ name: ‘TypeName’, type: ‘string’ },
{ name: ‘ServerURI’, type: ‘string’},
{ name: ‘Creator’, type: ‘string’},
{ name: ‘Originator’, type: ‘string’},
{ name: ‘ConnectionString’, type: ‘string’ },
{ name: ‘Username’, type: ‘string’ },
{ name: ‘Password’, type: ‘string’ },
{ name: ‘Domain’, type: ‘string’ }

],
datatype: “array”,
addrow: function (rowid, rowdata, commit) {
var name = rowdata.Name;
var server = rowdata.ServerURI;
var connectionString = rowdata.ConnectionString;
var originator = rowdata.Originator;
var username = rowdata.Username;
var password = rowdata.Password;
var domain = rowdata.Domain;
if (connectionString.length == 0)
connectionString = null;
var username = $(“#username”).val();
if (username.length == 0)
username = null;
var password = $(“#password”).val();
if (password.length == 0)
password = null;
if (domain.length == 0)
domain = null;
setCursorWait(‘#contentRoot’);
GTSClient2.Organisation.Organisation.CreateConnector($(‘#corrKey’).val(), name, server, connectionString, originator, username, password, domain, onCreateSuccess, onCreateFail);
function onCreateSuccess() {
if (ret.Success) {
setCursorNormal(‘#contentRoot’);
parent.DialogFileSelect.Close(false);
parent.contentWindow.refreshConnectors();
}
else
alert(ret.ErrorMessage);
}
function onCreateFail(ret) {
alert(ret._message);
}
commit(true);
},
updaterow: function (rowid, rowdata, commit) {
var name = rowdata.Name;
var server = rowdata.ServerURI;
var connectionString = rowdata.ConnectionString;
var originator = rowdata.Originator;
var username = rowdata.Username;
var password = rowdata.Password;
var domain = rowdata.Domain;
if (connectionString.length == 0)
connectionString = null;
var username = $(“#username”).val();
if (username.length == 0)
username = null;
var password = $(“#password”).val();
if (password.length == 0)
password = null;
if (domain.length == 0)
domain = null;
setCursorWait(‘#contentRoot’);
GTSClient2.Organisation.Organisation.ModifyConnector($(‘#corrKey’).val(), name, server, connectionString, originator, username, password, domain, onSaveSuccess, onSaveFail);
function onSaveSuccess() {
setCursorNormal(‘#contentRoot’);
refreshConnectors();
}
function onSaveFail(ret) {
setCursorNormal(‘#contentRoot’);
disableBlock();
alert(ret._message);
}
commit(true);
},
deleterow: function (rowid, commit) {
var name = $(“#jqxgrid”).jqxGrid(‘getcellvalue’, rowid, ‘Name’);
if (!confirm(‘Are you sure you want to delete connector \” + name + ‘\’?’)) return;
setCursorWait(‘#contentRoot’);
deleteconnector(name);
commit(false);
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
//// perform binding.
//dataAdapter.dataBind();
//// get loaded records and update the source object.
//var originators = GTS.Client.GTSWebServiceProxy.ListOriginators();
//source.url = “”;
//source.localdata = originators;
//var dataAdapter1 = new $.jqx.dataAdapter(source);
$(“#type”).jqxDropDownList({ selectedIndex: 0, source: dataAdapter, displayMember: “TypeName”, valueMember: “TypeName”, width:”300px” ,disabled: true });
$(“#name”).addClass(‘jqx-input’);
$(“#server”).addClass(‘jqx-input’);
$(“#creator”).addClass(‘jqx-input’);
//$(“#originator”).jqxDropDownList({ selectedIndex: getSelectedIndex(dataAdapter, dataAdapter.Originator), source: dataAdapter, displayMember: “Originator”, valueMember: “Originator”, width: “300px”, theme: theme });
$(“#originator”).jqxDropDownList({ selectedIndex: 0, source: dataAdapter, displayMember: “Originator”, valueMember: “Originator”, width: “300px”, theme: theme });
$(“#connectionstring”).addClass(‘jqx-input’);
$(“#domain”).addClass(‘jqx-input’);
$(“#name”).width(300);
$(“#name”).height(23);
$(“#server”).width(300);
$(“#server”).height(23);
$(“#creator”).width(300);
$(“#creator”).height(23);
$(“#connectionstring”).width(300);
$(“#connectionstring”).height(23);
$(“#username”).width(300);
$(“#username”).height(23);
$(“#password”).width(300);
$(“#password”).height(23);
$(“#domain”).width(300);
$(“#domain”).height(23);
if (theme.length > 0) {
$(“#type”).addClass(‘jqx-dropdownlist-‘ + theme);
$(“#name”).addClass(‘jqx-input-‘ + theme);
$(“#server”).addClass(‘jqx-input-‘ + theme);
$(“#creator”).addClass(‘jqx-input-‘ + theme);
$(“#originator”).addClass(‘jqx-dropdownlist-‘ + theme);
$(“#connectionstring”).addClass(‘jqx-input-‘ + theme);
$(“#domain”).addClass(‘jqx-input-‘ + theme);
}
var editrow = -1;
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 930,
source: dataAdapter,
columnsresize: true,
sortable: true,
columns: [
{ text: ‘Name’, datafield: ‘Name’, width: 150 },
{ text: ‘Type’, datafield: ‘TypeName’, width: 150 },
{ text: ‘Server’, datafield: ‘ServerURI’, width: 150 },
{ text: ‘Creator’, datafield: ‘Creator’, width: 230 },
{ text: ‘Originator’, datafield: ‘Originator’, width: 250 }
]
});
// create context menu
var contextMenu = $(“#Menu”).jqxMenu({ width: 160, height: 210, autoOpenPopup: false, mode: ‘popup’ });
$(“#jqxgrid”).on(‘contextmenu’, function () {
return false;
});
// handle context menu clicks.
$(“#Menu”).on(‘itemclick’, function (event) {
var args = event.args;
var rowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
if ($.trim($(args).text()) == “Edit”) {
editrow = rowindex;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 250, y: parseInt(offset.top) + 60 } });
// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$(“#type”).jqxDropDownList(‘val’, dataRecord.TypeName);
$(“#name”).val(dataRecord.Name);
$(“#server”).val(dataRecord.ServerURI);
$(“#originator”).jqxDropDownList(‘val’, dataRecord.Originator);
$(“#connectionString”).val(dataRecord.ConnectionString);
$(“#username”).val(dataRecord.Username);
$(“#password”).val(dataRecord.Password);
$(“#domain”).val(dataRecord.Domain);

// show the popup window.
$(“#popupWindow”).jqxWindow(‘show’);
}
else if ($.trim($(args).text()) == “New”) {
var offset = $(“#jqxgrid”).offset();
$(“#NewpopupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 250, y: parseInt(offset.top) + 60 } });
// show the popup window.
$(“#NewpopupWindow”).jqxWindow(‘show’);
}
else if ($.trim($(args).text()) == “Delete”) {
var rowid = $(“#jqxgrid”).jqxGrid(‘getrowid’, rowindex);
$(“#jqxgrid”).jqxGrid(‘deleterow’, rowid);
}
else if ($.trim($(args).text()) == “Refresh”) {
refreshConnectors();
}
else if ($.trim($(args).text()) == “Test Connection”) {
testconnection();
}
});
$(“#jqxgrid”).on(‘rowclick’, function (event) {
if (event.args.rightclick) {
$(“#jqxgrid”).jqxGrid(‘selectrow’, event.args.rowindex);
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
contextMenu.jqxMenu(‘open’, parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
return false;
}
});
// initialize the new popup window and buttons.
$(“#NewpopupWindow”).jqxWindow({ width: 500, height: 500, resizable: false, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01 });
$(“#Cancel”).jqxButton({ theme: theme });
$(“#Create”).jqxButton({ theme: theme });
// Insert new row when the user clicks the ‘Create’ button.
$(“#Create”).click(function () {
var row = {
Name: $(“#newname”).val(), TypeName: $(“#newtype”).jqxDropDownList(‘val’), ServerURI: $(“#newserver”).val(), Originator: $(“#neworiginator”).jqxDropDownList(‘val’), ConnectionString: $(“#newconnectionString”).val(), Username: $(“#newusername”).val(), Password: $(“#newpassword”).val(), Domain: $(“#newdomain”).val()
};
$(‘#jqxgrid’).jqxGrid(‘addrow’, null, row);
$(“#NewpopupWindow”).jqxWindow(‘hide’);
});
// initialize the edit popup window and buttons.
$(“#popupWindow”).jqxWindow({ width: 500, height: 500, resizable: false, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01 });
$(“#Cancel”).jqxButton({ theme: theme });
$(“#Save”).jqxButton({ theme: theme });
// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
if (editrow >= 0) {
var row = {
Name: $(“#name”).val(), TypeName: $(“#type”).jqxDropDownList(‘val’), ServerURI: $(“#server”).val(), Originator: $(“#originator”).jqxDropDownList(‘val’), ConnectionString: $(“#connectionString”).val(), Username: $(“#username”).val(), Password: $(“#password”).val(), Domain: $(“#domain”).val()
};
var rowid = $(“#jqxgrid”).jqxGrid(‘getrowid’, editrow);
$(‘#jqxgrid’).jqxGrid(‘updaterow’, rowid, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}
});
function disableBlock() {
var type = $(“#type”).jqxDropDownList(‘val’);
var name = $(“#name”).val();
type.disabled = true;
name.disabled = true;
}
//Test Connection
testconnection = function () {
var type = $(“#type”).jqxDropDownList(‘val’);
var server = $(“#server”).val();
var connectionString = $(“#connectionString”).val();
var originator = $(“#originator”).jqxDropDownList(‘val’);
if (connectionString.length == 0)
connectionString = null;
var username = $(“#username”).val();
if (username.length == 0)
username = null;
var password = $(“#password”).val();
if (password.length == 0)
password = null;
setCursorWait(‘#contentRoot’);
GTSClient2.Organisation.Organisation.TestConnector($(‘#corrKey’).val(), type, server, connectionString, originator, username, password, onTestSuccess, onTestFail);
function onTestSuccess(ret) {
disableBlock();
if (ret)
alert(‘This site says..\nSuccess’);
else
alert(‘This site says..\nFailed’);
}
function onTestFail(ret) {
disableBlock();
alert(ret._message);
}
}
}
//Delete Connector
deleteconnector = function(name){
GTSClient2.Organisation.Organisation.DeleteConnector($(‘#corrKey’).val(), name, onDeleteSuccess, onDeleteFailed);
}
function onDeleteSuccess() {
refreshConnectors();
}
function onDeleteFailed(ret) {
alert(ret._message);
}
//Refresh Page
refreshConnectors = function () {
GTSClient2.Organisation.Organisation.ListConnectors($(‘#corrKey’).val(), onRefreshSuccess, onRefreshFail);
}
function onRefreshSuccess(ret) {
loadGrid(ret.Connectors);
}
function onRefreshFail(ret) {
alert(ret._message);
}
// Function to get the selected index for dropdownlist from grid value
function getSelectedIndex(source, value) {
var selectedIndex = -1;
for (var i = 0; i < source.totalrecords; i++) {
if (source.records[i].name == value) {
selectedIndex = i;
break;
}
}
return (selectedIndex);
};

</script>
</asp:Content>
<asp:Content ID=”Content2″ ContentPlaceHolderID=”TitleContent” runat=”server”>
</asp:Content>
<asp:Content ID=”Content3″ ContentPlaceHolderID=”MainContent” runat=”server”>
<asp:ScriptManager ID=”ScriptManager” runat=”server”>
<Services>
<asp:ServiceReference Path=”~/Organisation/Organisation.asmx” />
</Services>
</asp:ScriptManager>
<div id=’jqxWidget’>
<div id=”jqxgrid”></div>
<div style=”margin-top: 30px;”>
<div id=”cellbegineditevent”></div>
<div style=”margin-top: 10px;” id=”cellendeditevent”></div>
</div>
<div id=”NewpopupWindow”>
<div>New Connector</div>
<div style=”overflow: hidden;”>
<table style=”width:100%;”>
<tr>
<td style=”text-align:right;”>Type:</td>
<td style=”text-align:left;”>
<%–<div id=’newtype’></div>–%>
<select id=”newtype” runat=”server” datatextfield=”Name” datavaluefield=”Type” style=”width: 155px”/>
</td>
</tr>
<tr>
<td style=”text-align:right;”>Name:</td>
<td style=”text-align:left;”><input id=”newname”/></td>
</tr>
<tr>
<td style=”text-align:right;”>Server:</td>
<td style=”text-align:left;”><input id=”newserver” /></td>
</tr>
<tr>
<td style=”text-align:right;”>Originator:</td>
<td style=”text-align:left;”>
<%–<div id=’neworiginator’></div></td>–%>
<select id=”neworiginator” runat=”server” datatextfield=”Host” datavaluefield=”Subject” style=”width: 155px” />
</td>
</tr>
<tr>
<td style=”text-align:right;”>ConnectionString:</td>
<td style=”text-align:left;” ><input id=”newconnectionString”/></td>
</tr>
<tr>
<td style=”text-align:right;”>UserName:</td>
<td style=”text-align:left;”><input id=”newusername” /></td>
</tr>
<tr>
<td style=”text-align:right;”>Password:</td>
<td style=”text-align:left;”><input id=”newpassword” /></td>
</tr>
<tr>
<td style=”text-align:right;”></td>
<td style=”padding-top: 10px;text-align:left;”><input type=”button” id=”newTestConnection” value=”TestConnection” onclick=”testconnection()”/></td>
</tr>
<tr></tr>
<tr>
<td style=”text-align:right;”>
<asp:Label ID=”Label2″ runat=”server” Text=”Advanced” Font-Bold=”True”></asp:Label>
</td>
<td style=”text-align:right;”>
</td>
</tr>
<tr>
<td style=”text-align:right;”>Domain:</td>
<td style=”text-align:left;”><input id=”newdomain” /></td>
</tr>
<tr>
<td style=”text-align:right;”></td>
<td style=”padding-top: 10px;text-align:right;”><input style=”margin-right: 5px;” type=”button” id=”Create” value=”Create” /><input id=”newCancel” type=”button” value=”Cancel” /></td>
</tr>
</table>
</div>
</div>
<div id=”popupWindow”>
<div>Edit Connector</div>
<div style=”overflow: hidden;”>
<table style=”width:100%;”>
<tr>
<td style=”text-align:right;”>Type:</td>
<td style=”text-align:left;”><div id=’type’></div></td>
</tr>
<tr>
<td style=”text-align:right;”>Name:</td>
<td style=”text-align:left;”><input id=”name” disabled=”disabled”/></td>
</tr>
<tr>
<td style=”text-align:right;”>Server:</td>
<td style=”text-align:left;”><input id=”server” /></td>
</tr>
<tr>
<td style=”text-align:right;”>Originator:</td>
<td style=”text-align:left;”>
<div id=’originator’></div>
</td>
</tr>
<tr>
<td style=”text-align:right;”>Originator:</td>
<td style=”text-align:left;”>
<%–<div id=’originator’></div>–%>
<select id=”ConnectorOriginator” runat=”server” datavaluefield=”Subject” datatextfield=”Host”
style=”width: 190px”/>
</td>
</tr>
<tr>
<td style=”text-align:right;”>ConnectionString:</td>
<td style=”text-align:left;” ><input id=”connectionString” readonly=”readonly”/></td>
</tr>
<tr>
<td style=”text-align:right;”>UserName:</td>
<td style=”text-align:left;”><input id=”username” /></td>
</tr>
<tr>
<td style=”text-align:right;”>Password:</td>
<td style=”text-align:left;”><input id=”password” /></td>
</tr>
<tr>
<td style=”text-align:right;”></td>
<td style=”padding-top: 10px;text-align:left;”><input type=”button” id=”TestConnection” value=”TestConnection” onclick=”testconnection()”/></td>
</tr>
<tr></tr>
<tr>
<td style=”text-align:right;”>
<asp:Label ID=”Label1″ runat=”server” Text=”Advanced” Font-Bold=”True”></asp:Label>
</td>
<td style=”text-align:right;”>
</td>
</tr>
<tr>
<td style=”text-align:right;”>Domain:</td>
<td style=”text-align:left;”><input id=”domain” /></td>
</tr>
<tr>
<td style=”text-align:right;”></td>
<td style=”padding-top: 10px;text-align:right;”><input style=”margin-right: 5px;” type=”button” id=”Save” value=”Save” /><input id=”Cancel” type=”button” value=”Cancel” /></td>
</tr>
</table>
</div>
</div>
<div id=’Menu’>
<ul class=’custom-menu’>
<li data-action=”New” >
New
<li data-action=”Edit”>
Edit
<li data-action=”Delete”>
Delete
<li data-action=”Refresh”>
Refresh
<li data-action=”Security”>
Security
<li data-action=”Audit”>
Audit
<li data-action=”TestConnection”>
Test Connection

</div>
</div>

</asp:Content>

Thanks in advance,
Reva

tHANKS

[HristoParticipant]

Hello reva,

This is too extensive code for review.
However, I noticed the following:
– The use of a common dataAdapter – need to set to new new $.jqx.dataAdapter(source); for each widget.
– A gap in the IF condition (escaping single quotes – below are corrected)
if (!confirm('Are you sure you want to delete connector \'' + name + '\'?'))

If this issue exist, could you send (part) an example that reproduces that.
(in https://www.jseditor.io/ or http://jsfiddle.net/)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts