jQuery UI Widgets Forums Grid Binding the array object value to the grid

Tagged: ,

This topic contains 14 replies, has 3 voices, and was last updated by  reva 6 years, 10 months ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author

  • reva
    Participant

    <asp:Content ID=”Content1″ ContentPlaceHolderID=”HeadContent” runat=”server”>
    <script type=”text/javascript”>

    $(document).ready(function () {
    alert(“hi”);
    Organisation.ListConnectors($(‘#corrKey’).val(), onconnectorsuccess, onconnectorfail);
    alert(“testing”);
    });
    function onconnectorsuccess(ret) {
    //alert(“third hello”);
    loadGrid(ret);
    alert(ret.length);
    }
    function onconnectorfail(ret) {
    alert(“fourth hello”);
    //alert(ret._message);
    }
    function loadGrid(ret) {
    $(“#jqxgrid”).jqxgrid({
    datatype: “local”,
    data: ret,
    height: “90%”,
    width: 700,
    colModel: [
    { name: ‘Key’, hidden: true, key: true },
    { label: ‘name’, name: ‘Display’, width: 70 },
    { label: ‘Type’, name: ‘Value’, width: 120 },
    ],
    viewrecords: true, // show the current page, data rang and total records on the toolbar
    caption: ‘Connectors’
    }).jqxgrid(‘clearGridData’).jqxgrid(‘setGridParam’, { data: ret }).trigger(“reloadGrid”);
    }
    </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>
    <h6>Connectors</h6>
    </div>
    <div id=”jqxgrid” style=”width:auto”></div>
    <div style=”margin-top: 30px;”>
    <div id=”cellbegineditevent”></div>
    <div style=”margin-top: 10px;” id=”cellendeditevent”></div>
    </div>

    </div>

    </asp:Content>


    reva
    Participant

    The grid is not binding to the data which i got it from ret. Can someone help me in this

    • This reply was modified 6 years, 11 months ago by  reva.

    reva
    Participant

    Can anyone help me to slove this issue?


    Vladimir
    Participant

    Hello reva,

    Your grid doesn’t work because you are not initilizing it properly. Also jqxGrid has no property called colModel.

    To learn how to properly bind your grid to an array please take a look at this demo. We have a lot of demos and example for jqxGrid so be sure to check them out as well.

    Best Regards,
    Vladimir

    jQWidgets Team
    http://www.jqwidgets.com


    reva
    Participant

    Hi Vladimir,

    Thanks for your response. I have changed the code according to the example you gave me but it is still not working. I have a webservice method which is returning the list and i am trying to bind that list to the grid. For your reference i will put both asmx and aspx file.

    Webservice:

    public List<Connector> ListConnectors(string corrkey)
    {
    EnsureSession(corrkey);
    try
    {
    using (GTS.Client.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);
    }
    }

    ASPX Page:

    <asp:Content ID=”Content1″ ContentPlaceHolderID=”HeadContent” runat=”server”>
    <script type=”text/javascript”>

    $(document).ready(function () {
    alert(“hi”);
    GTSClient2.Organisation.Organisation.ListConnectors($(‘#corrKey’).val(), onconnectorsuccess, onconnectorfail);
    alert(“testing”);
    });
    function onconnectorsuccess(ret) {
    loadGrid(ret);
    }
    function onconnectorfail(ret) {
    alert(ret._message);
    }

    function loadGrid(ret) {
    var data = ret;
    var source = {

    localdata: data,
    datafields: [
    { name: ‘Name’, type: ‘string’, map: ‘0’ },
    { name: ‘TypeName’, type: ‘string’, map: ‘1’ },
    { name: ‘ServerURI’, type: ‘string’, map: ‘2’ },
    { name: ‘Originator’, type: ‘string’, map: ‘3’ },
    { name: ‘Creator’, type: ‘string’, map: ‘4’ }
    ],
    datatype: “array”
    }
    var dataAdapter = new $.jqxgrid.dataAdapter(source);

    $(“#jqxgrid”).jqxgrid({
    source: dataAdapter,
    height: “90%”,
    width: 700,
    columns: [
    { text: ‘Name’, datafield: ‘Name’, width: 250 },
    { text: ‘Type’, datafield: ‘TypeName’, width: 250 },
    { text: ‘ServerURI’, datafield: ‘ServerURI’, width: 180 },
    { text: ‘Originator’, datafield: ‘Originator’, width: 120 },
    { text: ‘Creator’, datafield: ‘Creator’, minwidth: 120 }
    ]
    });
    }
    </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>
    <h6>Connectors</h6>
    </div>
    <div id=”jqxgrid” style=”width:auto”></div>
    </div>

    </asp:Content>

    Thanks,
    Reva

    Binding the array object value to the grid #77188

    Vladimir
    Participant

    Hello Reva,

    Change the line:

                var dataAdapter = new $.jqxgrid.dataAdapter(source);
    

    to

                 var dataAdapter = new $.jqx.dataAdapter(source);
    

    Also is your data in format:

    { 
       '0': 'someName',
       '1': 'someType',
       '2': 'someUri',
       '3': 'some riginator'
       '4': 'some createor'
    }

    Because this is what mapping you have applied. If not you should check what your data format is, and use it as appropriate.
    If you are still having issues please provide a sample of your data as contained in the ret variable. And also check to see what if any errors are displayed in the developer console.

    Best Regards,
    Vladimir

    jQWidgets Team
    http://www.jqwidgets.com


    reva
    Participant

    Hi Vladimir,

    Thanks for the update. I was able to get the grid view with column names but the data is not binding as desired. I am providing the ret array value. Please let me know what is the mistake i am doing.

    ret:

    ret:Array[3]
    0:object
    Audit: true
    ConnectionString:null
    creator:”test”
    GUID:”cf66b331-baad-49e4-bf6a-098c9df73c65″
    Name:”test”
    Originator:”test”
    Perm:7
    ServerURI:”test”
    TypeName:”Active Directory”
    _type:”GTSClient2.Organisation.Connector”

    1:object
    Audit: true
    ConnectionString:null
    creator:”test”
    GUID:”cf66b331-baad-49e4-bf6a-098c9df73c65″
    Name:”to”
    Originator:”test”
    Perm:7
    ServerURI:”test”
    TypeName:”LDAP”
    _type:”GTSClient2.Organisation.Connector”

    ASPX:

    $(document).ready(function () {
    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’, map: ‘0’ },
    { name: ‘TypeName’, type: ‘string’, map: ‘1’ },
    { name: ‘ServerURI’, type: ‘string’, map: ‘2’ },
    { name: ‘Creator’, type: ‘string’, map: ‘3’ },
    { name: ‘Originator’, type: ‘string’, map: ‘4’ }
    ],
    datatype: “array”
    };
    var dataAdapter = new $.jqx.dataAdapter(source);

    $(“#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: 100 },
    { text: ‘Creator’, datafield: ‘Creator’, width: 230 },
    { text: ‘Originator’, datafield: ‘Originator’, width: 300 }
    ]
    });
    }

    Thanks,
    Reva


    reva
    Participant

    Hi Vladimir,

    Thanks for your support I am able to resolve this error. The changed code is as follows:

    <script type=”text/javascript”>

    $(document).ready(function () {
    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’, map: ‘Name’ },
    { name: ‘TypeName’, type: ‘string’, map: ‘TypeName’ },
    { name: ‘ServerURI’, type: ‘string’, map: ‘ServerURI’ },
    { name: ‘Creator’, type: ‘string’, map: ‘Creator’ },
    { name: ‘Originator’, type: ‘string’, map: ‘Originator’ }
    ],
    datatype: “array”
    };
    var dataAdapter = new $.jqx.dataAdapter(source);

    $(“#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: 100 },
    { text: ‘Creator’, datafield: ‘Creator’, width: 230 },
    { text: ‘Originator’, datafield: ‘Originator’, width: 300 }
    ]
    });
    }
    </script>

    Thanks,
    Reva


    Vladimir
    Participant

    Hello Reva,

    I am glad that you were able to solve your issue.

    Also note that in your case the map parameter is not necessary, because the name of the field is the same as the mapping.

    In general you would need to map your data if you want to rename the field, or if it is nested inside another object e.g. { employee: { name: ‘somename’, position: ‘somePosition’}}

    Best Regards,
    Vladimir

    jQWidgets Team
    http://www.jqwidgets.com


    reva
    Participant

    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


    ivailo
    Participant

    Hi reva,

    You have to set displayMember: "TypeName",.
    You don’t have field named Type in your source.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com


    reva
    Participant

    Hi Ivailo,

    I have changed dispalyMember:”TypeName” but still i don’t get the dropdown.

    Thanks,
    Reva


    reva
    Participant

    Hi Ivalio,

    Can i get some help on this issue.

    Thanks,
    Reva


    ivailo
    Participant

    Hi reva,

    You have to initialize your dropDown from div, instead input.
    Probably this will solve your problem.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com


    reva
    Participant

    Thanks Ivailo it worked.

    Thanks,
    Reva

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

You must be logged in to reply to this topic.