[Gopre400Participant]

I got it…

var source =
                    {
                        datatype: "xml",
                        datafields: [
                                { name: 'ProjectMenuID'},
                                { name: 'MenuText' },
                                { name: 'ParentMenuID' }, 
                            ],
                        async: false,	
                        record: 'Table',
                        url: "CNSTWebService.asmx/GetCNSTProjectMenu"
                    };

                    var dataAdapter = new $.jqx.dataAdapter(source,	
                        {
                            contentType: 'application/json; charset=utf-8'
                        }
                    );
                    dataAdapter.dataBind();
                    var records = dataAdapter.getRecordsHierarchy('ProjectMenuID', 'ParentMenuID', 'items', [{ name: 'ProjectMenuID', map: 'id'},{ name: 'MenuText', map: 'label'}]);
                    $('#jqxWidget').jqxMenu({ source: records, mode: 'horizontal', width: '300px' });

                    $("#jqxWidget").on('itemclick', function (event) {
                        alert(event.args.id);
                    });

                });

[Gopre400Participant]

It appears to be a problem with the dataAdaptor and/or getting data from Webservice…I took out the Menu to just focus on the dataAdaptor and an error is being thrown…”Internal Server Error.” I’m not sure why…is there a problem with the source (it work as a source of combobox)?

 var contractorsource =
                    {
                        datatype: "xml",
                        contentType: "application/json; charset=utf-8",
                        datafields: [
                        	    { name: 'ProjectMenuID' },
                                { name: 'MenuText' },
                                { name: 'ParentMenuID' }
                            ],
                        async: false,
                        record: 'Table',
                        id: 'ProjectMenuID',
                        url: "CNSTWebService.asmx/GetCNSTProjectMenu"
                    };

                var dataAdapter = new $.jqx.dataAdapter(contractorsource, {
                    loadComplete: function () {
                        // get data records.
                        var records = dataAdapter.records;
                        // get the length of the records array.
                        var length = records.length;
                        alert(length);
                        // loop through the records and display them in a table.
                        var html = "<table border='1'><tr><th align='left'>ProjectMenuID</th><th align='left'>MenuText</th>";
                        for (var i = 0; i < 10; i++) {
                            var record = records[i];
                            html += "<tr>";
                            html += "<td>" + record.ParentMenuID + "</td>";
                            html += "<td>" + record.MenuText + "</td>";
                            html += "</tr>";
                        }
                        html += "</table>";
                        $("#table").html(html);
                    },
                    loadError: function (jqXHR, status, error) {
                        alert(error); 
                    },
                    beforeLoadComplete: function (records) {
                    }
                });
                
                dataAdapter.dataBind();

[Gopre400Participant]

Thank you Dimitar?
Like this?
var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{name: 'ProjectMenuID', map: 'id'},{name: 'ParentMenuID', map: 'parentid'},{ name: 'MenuText', map: 'label'}]);

or this?

var records = dataAdapter.getRecordsHierarchy('ProjectMenuID', 'ParentMenuID', 'items', [{name: 'ProjectMenuID', map: 'id'},{name: 'ParentMenuID', map: 'parentid'},{ name: 'MenuText', map: 'label'}]);

Neither way worked.

[Gopre400Participant]

Thanks Peter I do use the updaterow method…but that’s not where I’m having problems. I want the update row function to fire after a change selection in combobox, how can I do that?

updaterow: function (rowid, rowdata, commit) {
                                commit(true);
                                $.ajax({
                                    type: "POST",
                                    url: "CNSTWebService.asmx/UpdateCNSTPlanHolder",
                                    contentType: "application/json; charset=utf-8",
                                    dataType: "json",
                                    data: '{"planholderid":"' + rowdata.PlanHolderID + '","holdername":"' + rowdata.PlanHolderName + '","holderaddress":"' + rowdata.PlanHolderAddress + '","holderphone1":"' + rowdata.PlanHolderPhone1 + '","holderphone2":"' + rowdata.PlanHolderPhone2 + '","holderemail":"' + rowdata.PlanHolderEmail + '","holdercontact":"' + rowdata.PlanHolderContact + '"}',
                                    success: function (data) {

                                    }
                                });
                            },

[Gopre400Participant]

I am getting closer…I used cellvaluechanging function to set the values in other cells when the value of the combobox has been changed. However I need somehow get the SelectedIdex of combobox into the cellvaluechanging function…Can I do that? (see bold line)

`
columns: [
{ text: ‘Plan #’, datafield: ‘PlanHolderNbr’, width: 50, editable: false },
{ text: ‘Contractor’, datafield: ‘PlanHolderName’, width: 300, columntype: ‘combobox’,
createeditor: function (row, cellvalue, editor) {
var contractorsource =
{
datatype: “xml”,
contentType: “application/json; charset=utf-8”,
datafields: [
{ name: ‘Contractor’ },
{ name: ‘Phone1’ }
],
async: false,
record: ‘Table’,
url: “CNSTWebService.asmx/GetContractorByContractorCombo”
};
var contractorAdapter = new $.jqx.dataAdapter(contractorsource, {
loadComplete: function () {
var records = contractorAdapter.records;
$(‘body’).data(‘records’, records);
}
});

editor.jqxComboBox({
source: contractorAdapter,
displayMember: “Contractor”,
valueMember: “Contractor”
});
},
cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {
if (newvalue == oldvalue) {
}
else {
var record = $(‘body’).data(‘records’)[row];
var selectedIndex = editor.jqxComboBox(“selectedIndex”);
$(“#jqxgrid”).jqxGrid(‘setcellvalue’, row, “PlanHolderPhone1”, record.Phone1);
}
}
},
{ text: ‘Phone’, datafield: ‘PlanHolderPhone1’, width: 100 },
{ text: ‘Fax’, datafield: ‘PlanHolderPhone2’, width: 100 },
{ text: ‘Email’, datafield: ‘PlanHolderEmail’, width: 200 },
{ text: ‘Contact’, datafield: ‘PlanHolderContact’, width: 100 },
]

[Gopre400Participant]

Thank you, this is helpful. Is there a way to return values from ajax call used to create combobox?
I am getting values from combobox like this…

 var contractorsource =
  {
  datatype: "xml",
  contentType: "application/json; charset=utf-8",
  datafields: [
        { name: 'Contractor' }
   ],
   async: false,
   record: 'Table',
   url: "CNSTWebService.asmx/GetContractorByContractorCombo"
 };
var contractorAdapter = new $.jqx.dataAdapter(contractorsource);

editor.jqxComboBox({
source: contractorAdapter,
editor.jqxComboBox({
     displayMember: "Contractor",
     valueMember: "Contractor"
});

Can I add more datafields, then use those values in the returned table when the contractor is selected? for example…

var contractorsource =
{
datatype: “xml”,
contentType: “application/json; charset=utf-8”,
datafields: [
{ name: ‘Contractor’ },
{ name: ‘Phone’ },
{ name: ‘Address’ }
],
async: false,
record: ‘Table’,
url: “CNSTWebService.asmx/GetContractorByContractorCombo”

};

[Gopre400Participant]

Hi Peter,
I have tried refreshing the widget, when the “show” animation is complete. But the widget does not display.

The Div is hidden by using hidden=”hidden”

Here is what I’m doing…am I missing something?
$(‘#liAddNote’).click(function () {
$(‘#divAddNote’).show(“slow”, function () {
$(“#txtNoteDate”).jqxDateTimeInput(‘refresh’);
});
$(‘#divItemsMenu’).hide();
$(‘#txtItemDescription’).val($(‘body’).data(‘item’));
});

[Gopre400Participant]

Thank you Peter!

Here is what I did, which worked great.

updaterow: function (rowid, rowdata, commit) {
var sdate = dataAdapter.formatDate(rowdata.ScheduledDate, ‘D’);
$.ajax({
type: “POST”,
url: “CSWebService.asmx/UpdateCSProject”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
data: ‘{“projectid”:”‘ + rowdata.ProjectID + ‘”,”roadname”:”‘ + rowdata.RoadName + ‘”,”roadnumber”:”‘ + rowdata.RoadNumber + ‘”,”fromdesc”:”‘ + rowdata.FromDesc + ‘”,”todesc”:”‘ + rowdata.ToDesc + ‘”,”frommp”:”‘ + rowdata.FromMP + ‘”,”tomp”:”‘ + rowdata.ToMP + ‘”,”projstatus”:”‘ + rowdata.ProjectStatus + ‘”,”sdate”:”‘ + sdate + ‘”}’,
success: function (data) {
commit(true);
GetItems()
}
});
},

[Gopre400Participant]

Nevermind, I just used getitems and it worked fine…

$(‘#btnOK’).on(‘click’, function () {
var items = $(“#listBoxB”).jqxListBox(‘getItems’);
var log = “”;
for (var i = 0; i < items.length; i++) {
log += items[i].value;
if (i < items.length – 1) log += ‘, ‘;
}
alert(log);
});

[Gopre400Participant]

Hi Dimitar, is there another way to retrieve all the items from target list than storing in separate array? If an item is removed from target list then the array needs to be updated…

[Gopre400Participant]

ohhh rowdetailsheight is a property of the template. I get it now, thank you!

rowdetailstemplate: {
rowdetails: “<div style=’margin: 10px;’>Row Details</div>”,
rowdetailsheight: 50
},

[Gopre400Participant]

I tried different numbers (from 25px to 1000px) in the rowdetailstemplate but the space did not change.
$(“#jqxgrid2”).jqxGrid(
{
source: employeesAdapter,
rowdetails: true,
width: ‘100%’,
height: 700,
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin-bottom: 30px; height: 200px;’></div>”, rowdetailshidden: true},
columns: [
{ text: ‘Contractor’, datafield: ‘Contractor’, width: 300, cellsrenderer: renderer },
{ text: ‘Bid Total’, datafield: ‘BidTotal’, width: 100, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘c2’ }
]
});

[Gopre400Participant]

In the template or in the nested grid definition?

I tried both with different values but the space remains the same…

grid.jqxGrid({
source: nestedGridAdapter, height: 1000, width: ‘100%’, groupable: true,
columns: [
{ text: ‘Item #’, datafield: ‘RowIndex’, width: 60, cellsrenderer: rownumberrenderer, editable: false },
{ text: ‘Description’, datafield: ‘ItemDescription’, width: 300 },
{ text: ‘Units’, datafield: ‘ItemUnit’, width: 50 },
{ text: ‘Quantity’, datafield: ‘ItemQuantity’, width: 100, align: ‘right’, cellsalign: ‘right’ },
{ text: ‘Price’, datafield: ‘BidPrice’, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘c2’, width: 100 },
{ text: ‘Total’, datafield: ‘BidItemTotal’, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘c2’, width: 100 },
{ text: ”, datafield: ‘VersionDescription’, hidden: true},
],
groups: [‘VersionDescription’]
});

$(“#jqxgrid2”).jqxGrid(
{
source: employeesAdapter,
rowdetails: true,
width: ‘100%’,
autoheight: true,
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin-bottom: 30px; height: 1000px;’></div>”, rowdetailshidden: true},
columns: [
{ text: ‘Contractor’, datafield: ‘Contractor’, width: 300, cellsrenderer: renderer },
{ text: ‘Bid Total’, datafield: ‘BidTotal’, width: 100, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘c2’ }
]
});

[Gopre400Participant]

Works great thanks Peter!

[Gopre400Participant]

Thank you!

[Author]

Posts