jQuery UI Widgets Forums Grid Dropdownlist with popup edit window

This topic contains 9 replies, has 2 voices, and was last updated by  Peter Stoev 9 years, 3 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • Dropdownlist with popup edit window #77653

    reva
    Participant

    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>

    Dropdownlist with popup edit window #77657

    Peter Stoev
    Keymaster

    Hi reva,

    Please, prepare and share jsfiddle.net sample which demonstrates your issue.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    Dropdownlist with popup edit window #77659

    reva
    Participant

    Hi Peter,
    I cannot make an jsfiddle as i am using an custom webservice for the data.

    Thanks,
    Reva

    Dropdownlist with popup edit window #77660

    Peter Stoev
    Keymaster

    Hi reva,

    Well, you can use sample data instead. Like Array for example.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    Dropdownlist with popup edit window #77662

    reva
    Participant

    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();
    }
    }
    }
    }

    Dropdownlist with popup edit window #77663

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    Dropdownlist with popup edit window #77704

    reva
    Participant

    Hi Peter,

    I have created an jsfiddle and here is the link.

    http://jsfiddle.net/revas009/32sxtqtn/

    Thanks,
    Reva

    Dropdownlist with popup edit window #77707

    Peter Stoev
    Keymaster

    Hi Reva,

    That fiddle does not display jqxGrid or jqxWindow.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Dropdownlist with popup edit window #77709

    reva
    Participant

    Hi 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,
    Reva

    Dropdownlist with popup edit window #77712

    Peter Stoev
    Keymaster

    Hi Reva,

    Look at the jqxGrid’s API Documentation. Each API member has jsfiddle.net example.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.