This topic contains 14 replies, has 3 voices, and was last updated by reva 9 years, 1 month ago.
-
Hi Vladimir,
I have added some more functionality to this grid. I have created a right click context menu which will have input fields and drodownlist fields. I am getting the input fields but not the dropdownlist fields. Can you help me in resolving this issue?
<%@ 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”>$(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);
$(“#type”).jqxDropDownList({ source: dataAdapter,displayMember: “Type”,valueMember: “TypeName”,selectedIndex: 0, 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 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);
$(“#server”).val(dataRecord.ServerURI);
$(“#creator”).val(dataRecord.Creator);
$(“#originator”).val(dataRecord.Originator);// show the popup window.
$(“#popupWindow”).jqxWindow(‘show’);
}
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”).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>
</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=”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>
Thanks,
Reva
You must be logged in to reply to this topic.