jQuery UI Widgets › Forums › Grid › Dropdownlist with popup edit window
Tagged: datagrid component, grid, jquery grid
This topic contains 9 replies, has 2 voices, and was last updated by Peter Stoev 9 years, 3 months ago.
-
Author
-
Hi,
I am trying to have a dropdownlist in the edit popup window for jqxgrid. The dropdownlist is not showing in the output. Please help me in fixing this issue.Here is the code:
<asp:Content ID=”Content1″ ContentPlaceHolderID=”HeadContent” runat=”server”>
<script type=”text/javascript”>$(document).ready(function () {
$(“#contentTitle”).text(‘<%= GetLocalResourceObject(“Title”) %>’);
GTSClient2.Organisation.Organisation.ListConnectors($(‘#corrKey’).val(), onconnectorsuccess, onconnectorfail);
});
function onconnectorsuccess(ret) {
loadGrid(ret);
}
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’}
],
datatype: “array”,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.setCursorWait(document.getElementById(‘dialogRoot’));
GTSClient2.Organisation.Organisation.ModifyConnector($(‘corrkey’).value, name, server, connectionString, originator, username, password, domain, onSaveSuccess, onSaveFail);
commit(true);
},
deleterow: function (rowid, commit) {
// synchronize with the server – send delete command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
commit(true);
}
};var dataAdapter = new $.jqx.dataAdapter(source);
// Function to get the selected index for dropdownlist from grid value
var getSelectedIndex = function (source, value) {
var selectedIndex = -1;
for (var i = 0; i < source.totalrecords; i++) {
if (source.records[i].name == value) {
selectedIndex = i;
break;
}
}
return (selectedIndex);
};
//$(“#type”).jqxDropDownList({ selectedIndex: getSelectedIndex(dataAdapter, dataRecord.TypeName), source: dataAdapter, displayMember: “Type”, width: 200, height: 25, theme: theme });
$(“#type”).jqxDropDownList({ selectedIndex: 0, source: dataAdapter, itemHeight: 70, height: 25, width: 270 });
$(“#name”).addClass(‘jqx-input’);
$(“#server”).addClass(‘jqx-input’);
$(“#creator”).addClass(‘jqx-input’);
$(“#originator”).addClass(‘jqx-input’);
$(“#name”).width(150);
$(“#name”).height(23);
$(“#type”).width(100);
$(“#type”).height(23);
$(“#server”).width(150);
$(“#server”).height(23);
$(“#creator”).width(150);
$(“#creator”).height(23);
$(“#originator”).width(150);
$(“#originator”).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-input-‘ + theme);
}
//var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 930,
source: dataAdapter,
columnsresize: true,
sortable: true,
//localization: getLocalization(),
columns: [
{ text: ‘Name’, datafield: ‘Name’, width: 150 },
{ text: ‘Type’, datafield: ‘TypeName’, width: 150 },
{ text: ‘Server’, datafield: ‘ServerURI’, width: 100 },
{ text: ‘Creator’, datafield: ‘Creator’, width: 230 },
{ text: ‘Originator’, datafield: ‘Originator’, width: 300 }
]
});// 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);
//$(“#type”).val(dataRecord.TypeName);
$(“#server”).val(dataRecord.ServerURI);
$(“#creator”).val(dataRecord.Creator);
$(“#originator”).val(dataRecord.Originator);// show the popup window.
$(“#popupWindow”).jqxWindow(‘show’);
}
//else if ($.trim($(args).text()) == “New”) {
// // create new row.
// $(“#addrowbutton”).on(‘click’, function () {
// var datarow = generaterow();
// var commit = $(“#jqxgrid”).jqxGrid(‘addrow’, null, datarow, ‘top’);
// });
//}
else {
var rowid = $(“#jqxgrid”).jqxGrid(‘getrowid’, rowindex);
$(“#jqxgrid”).jqxGrid(‘deleterow’, rowid);
}
});$(“#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 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”).val(), ServerURI: $(“#server”).val(), Creator: $(“#creator”).val(), Originator: $(“#originator”).val()
Name: $(“#name”).val(), TypeName: $(“#type”).jqxDropDownList(‘val’), ServerURI: $(“#server”).val(), Creator: $(“#creator”).val(), Originator: $(“#originator”).val()
};
var rowid = $(“#jqxgrid”).jqxGrid(‘getrowid’, editrow);
$(‘#jqxgrid’).jqxGrid(‘updaterow’, rowid, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}
});
}
</script>
<%–<style>
.subheader {
background-color: #5c9ccc;
color: white;
width:932px;
height:30px;
text-align:center;
font-size:20px;
font-family:Verdana;
}
</style>–%>
</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 class=”subheader”>Connectors</div>–%>
<div id=”jqxgrid”></div>
<div style=”margin-top: 30px;”>
<div id=”cellbegineditevent”></div>
<div style=”margin-top: 10px;” id=”cellendeditevent”></div>
</div>
<div id=”popupWindow”>
<div>Edit Connector</div>
<div style=”overflow: hidden;”>
<table style=”width:100%;”>
<tr>
<td style=”text-align:right;”>Name:</td>
<td style=”text-align:left;”><input id=”name” /></td>
</tr>
<tr>
<td style=”text-align:right;”>Type:</td>
<td style=”text-align:left;”><input id=”type” /></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;”>Creator:</td>
<td style=”text-align:left;”><input id=”creator” /></td>
</tr>
<tr>
<td style=”text-align:right;”>Originator:</td>
<td style=”text-align:left;”><input id=”originator” /></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>
Hi reva,
Please, prepare and share jsfiddle.net sample which demonstrates your issue.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hi Peter,
I cannot make an jsfiddle as i am using an custom webservice for the data.Thanks,
RevaHi reva,
Well, you can use sample data instead. Like Array for example.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hi Peter,
I am including the webservice file.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using GTSClient2.Code;
using System.ServiceModel;
using System.Xml.Serialization;
using System.IO;
using System.Text;
using System.Text.RegularExpressions;
using System.Data;
using System.Xml.Linq;
using GTS.Client;namespace GTSClient2.Organisation
{
[Serializable]
public class Connector
{
public string Name { get; set; }
public string TypeName { get; set; }
public string ServerURI { get; set; }
public string ConnectionString { get; set; }
public Guid GUID { get; set; }
public string Creator { get; set; }
public string Originator { get; set; }
public int Perm { get; set; }
public bool Audit { get; set; }
}/// <summary>
/// Summary description for Organisation
/// </summary>
[WebService(Namespace = “http://tempuri.org/”)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class Organisation : System.Web.Services.WebService
{
private static void EnsureSession(string corrKey)
{
var sessionkey = HttpContext.Current.Session[“key”] as string;
//if (HttpContext.Current.Session[“loaded”] == null) throw new Exception(“Your session has expired. Please refresh your browser.”);
if (corrKey == null) throw new NullReferenceException(“corrKey”);
if (string.Compare(corrKey, sessionkey, true) != 0)
if (string.Compare(corrKey, HttpContext.Current.Session[“corrkey”] as string, true) != 0)
if (string.Compare(corrKey, HttpContext.Current.Session[“key”] as string, true) != 0)
throw new Exception(“Your session has expired.”);
}[WebMethod(EnableSession = true)]
public List<Connector> ListConnectors(string corrkey)
{
EnsureSession(corrkey);
try
{
using (GTSServiceProxy proxy = GTSWebServiceFactory.CreateServiceProxy())
{
var data =
from conn in proxy.ListConnectors()
select new Connector
{
Name = conn.Name,
TypeName = GetConnectorTypeName(conn.Type),
ServerURI = conn.ServerUri,
ConnectionString = conn.ConnectionString,
Creator = conn.Creator,
GUID = conn.Guid,
Originator = conn.Originator,
Perm = (int)proxy.GetConnectorPermissions(conn.Guid),
Audit = (((GTS.Client.GTSLocalService.GTSApplicationPermissions)HttpContext.Current.Session[“perms”]) & GTS.Client.GTSLocalService.GTSApplicationPermissions.Audit) == GTS.Client.GTSLocalService.GTSApplicationPermissions.Audit
};
var ret = data.ToList();
proxy.Close();
return ret;
}
}
catch (Exception exc)
{
GTS.Logging.Log.Warn(“error listing connectors”, exc);
throw new Exception(exc.Message);
}
}[WebMethod(EnableSession = true)]
public void ModifyConnector(string corrkey, string name, string server, string connectionString, string originator, string userName, string password, string domain)
{
EnsureSession(corrkey);
try
{
using (GTSServiceProxy proxy = GTSWebServiceFactory.CreateServiceProxy())
{
proxy.ModifyConnector(name, server, connectionString, originator, userName, password, domain);
proxy.Close();
}
}
catch (Exception exc)
{
GTS.Logging.Log.Warn(“error modifying connector”, exc);
throw new Exception(exc.Message);
}
}
private string GetConnectorTypeName(GTS.Client.GTSLocalService.GTSConnectorType type)
{
switch (type)
{
case GTS.Client.GTSLocalService.GTSConnectorType.ActiveDirectory:
return “Active Directory”;
default:
return type.ToString();
}
}
}
}Hi reva,
If you would like someone from our team to test your scenario, then please provide jsfiddle.net sample. Your data is not important here and is not related to your issue. I would also suggest you to read how to create and use jqxDropDownList because from the topic and first post that seems to be the issue in your case.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hi Peter,
I have created an jsfiddle and here is the link.
http://jsfiddle.net/revas009/32sxtqtn/
Thanks,
RevaHi Reva,
That fiddle does not display jqxGrid or jqxWindow.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
I am unable to replicate the same scenario in jsfiddle. Can you provide me a sample jsfiddle with a jqxgrid from dataadapter source and it has a context menu on right click with input fields and dropdownfields (add,update and delete).
Thanks,
RevaHi Reva,
Look at the jqxGrid’s API Documentation. Each API member has jsfiddle.net example.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.