[WeibingParticipant]

Notice the images don’t remain associated with the row. I have to figure out how to use this initwidget callback.

https://www.jqwidgets.com/angular/angular-grid/angular-grid-widgetcolumn.htm

[WeibingParticipant]

Thanks Martin,

I’m looking at one of the demo examples and it appears I’m missing some code in the initwidget function. The code below is from the demo, and I basically have nothing in my initwidget function. When I comment this portion out in the demo, the same behavior is replicated. I’m a newbie, so I’ll have to figure out how to modify this code to fit my grid.

                      initwidget: function (row, column, value, htmlElement) {
                          var imgurl = 'images/' + value.toLowerCase() + '.png';
                          $(htmlElement).find('.buttonValue')[0].innerHTML = value;
                          $(htmlElement).find('img')[0].src = imgurl;
                      }

Demo URL: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customwidgetscolumn.htm?light

[WeibingParticipant]

Very helpful, thank you!

[WeibingParticipant]

Yeah..that worked. Thanks for helping out a rookie. You rock.

[WeibingParticipant]

Here’s my addrow code copied from my source.

addrow: function (rowid, rowdata, position, commit) {

var computerData = $(‘#newComputer’).serialize();//grab all form fields

$.ajax({
url: ‘getDetails.cfc?method=’addComputer’&’ + computerData,
type:”POST”,
async: false,
success: function(response){
commit(true);
alert(rowdata);

},
error : function(jqXHR, textStatus, errorThrown){
alert(errorThrown);
alert(‘damn’);
commit(false);
}
});

[WeibingParticipant]

Thanks Hristo.

I’m trying to write something that resembles an existing sample, shown below
// create new row.
$(“#addrowbutton”).on(‘click’, function () {
var datarow = generaterow();
var commit = $(“#jqxgrid”).jqxGrid(‘addrow’, null, datarow);
});

Seems straight forward. My version creates the proper key value format,
var rowData = JSON.stringify(myform.serializeObject());

Here’s what rowData produces if I console.log or alert() the output.

{“computerId”:””,”TemplateId”:”68″,”Make”:”Lenovo”,”Model”:”X200″,”Processor”:”Intel Core 2 Duo P8700 (2.53GHz)”,”Memory”:”2048″,”MemConfig”:”1x2GB;1x2GB”,”Drive”:”240GB SSD”,”Rom”:”DVD-ROM/CD-RW Multi”,”Acquired”:”02-01-2010″,”DeviceType”:””,”LSBC”:”qqqqqqqqq”,”Serial”:””,”ProductNumber”:””,”Mac”:””,”AlternateName”:””,”isRetired”:”false”}

If I just paste this info into a variable it works fine i.e.

rowData = {“computerId”:””,”TemplateId”:”68″,”Make”:”Lenovo”,”Model”:”X200″,”Processor”:”Intel Core 2 Duo P8700 (2.53GHz)”,”Memory”:”2048″,”MemConfig”:”1x2GB;1x2GB”,”Drive”:”240GB SSD”,”Rom”:”DVD-ROM/CD-RW Multi”,”Acquired”:”02-01-2010″,”DeviceType”:””,”LSBC”:”qqqqqqqqq”,”Serial”:””,”ProductNumber”:””,”Mac”:””,”AlternateName”:””,”isRetired”:”false”}

But the code below doesn’t work. The grid adds an empty row, like rowData is empty {}. Is there a chance the first line is taking too long to populate rowData and the second line runs with an empty variable? I’m a total noob, so I appreciate the help. Thanks.

var rowData = JSON.stringify(myform.serializeObject());

var commit = $(“#hardware_grid”).jqxGrid(‘addrow’, null, rowData)

[WeibingParticipant]

Great Thanks.

var cellclass = function (row, columnfield, value, record) {
var credit = record.credit;
if(credit == 0){
return ‘red’;
}

}

<style>
.red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
color: black;
background-color: #f8d5d5;
}
</style>

[WeibingParticipant]

Just to follow up, I modified the renderer property in the same function and it seems to do what I want. I’m sure there is a more eloquent way to accomplish this, but this will suffice. Thanks for all your help.

W

function refreshData(employee_id){

var newSource = myData(employee_id);
$(“#employee_id”).jqxDropDownList(
{
source: newSource,
renderer: function (index, label, value) {
var datarecord = newSource.records[index];
var imgurl = ‘http://lex.lsbc.org/extract/staff/’ + datarecord.staff_pic;
var img = ‘‘;
var table = ‘<div style=”float:left; width:90px;”>’ + img + ‘</div> <div>’ + datarecord.preferred_nm + ‘</div></br><div>’ + datarecord.title + ‘</div>’
return table;

} });

[WeibingParticipant]

Hi Peter,

Thanks so much. This worked!

“set the DropDownList’s source property to point to the new instance.”

function refreshData(employee_id){
var newSource = myData(employee_id);
$(“#employee_id”).jqxDropDownList({ source: newSource });
}

I click a button, create a new instance, then point the source property to this new instance. However, this drop down includes a table, so if I update the source of the dropDownList I need to change the source in the renderer portion of the drop down. This seems like an easy thing to accomplish but I’m clueless. Do you know of an easy way to do this?

As always, thanks for any help.

W

$(“#employee_id”).jqxDropDownList(
{
source: employees,
theme: poptheme,
selectedIndex: 0,
displayMember: ‘preferred_nm’,//label
valueMember: ‘employee_id’,//value
itemHeight: 80,
width: ’425′, height: ’25′,

renderer: function (index, label, value) {

//Need the code below to change to var datarecord = newSource.records[index]; when source is changed.
var datarecord = employees.records[index];

var imgurl = ‘http://site.abc.org/extract/staff/’ + datarecord.staff_pic;
var img = ‘‘;
var table = ‘<div style=”float:left; width:90px;”>’ + img + ‘</div> <div>’ + datarecord.preferred_nm + ‘</div></br><div>’ + datarecord.title + ‘</div>’
return table;

}
});

[WeibingParticipant]

Thanks so much Peter. I hope I’m understanding correctly, but I am setting a dropdown list source property and it does populate correctly when the page first runs. refreshData() is called on a click event . Presumably, “var employees = myData(1);” should be recreating the dataAdapter instance “employees”, and “employees.dataBind()” would refresh the dropdown list. Since it doesn’t work, I must be missing something. Any assistance would be appreciated.

Thanks

W

$(“#employee_id”).jqxDropDownList(
{
source: employees,
theme: poptheme,
selectedIndex: 0,
displayMember: ‘preferred_nm’,//label
valueMember: ’employee_id’,//value
itemHeight: 80,
width: ‘425’, height: ’25’,

renderer: function (index, label, value) {
var datarecord = employees.records[index];

var imgurl = ‘http://site.abc.org/extract/staff/’ + datarecord.staff_pic;
var img = ‘‘;
var table = ‘<div style=”float:left; width:90px;”>’ + img + ‘</div> <div>’ + datarecord.preferred_nm + ‘</div></br><div>’ + datarecord.title + ‘</div>’
return table;

}
});

[WeibingParticipant]

I just downloaded jQWidgets v3.8.2 (2015-Aug) and the calendar picker issue is resolved. I’m happy.

Cheers

B

[WeibingParticipant]

Hi Peter,

Thanks for the reply. I’m able to navigate with the arrows to move to a different year and select a month, but I find the popup closes immediately afterwards and doesn’t update the text box. In the site demo, the popup stays open to allow the user to select a day, at which point the popup closes and the date is fully updated in the textbox. Not sure what I’m doing wrong.

B

[Author]

Posts