binding the selected value of a dropdownlist in a grid

[dschmalzMember]

First off I have to say these components look very nice and are simple to work with.

However , I’m running into some difficulty with setting up a simple dropdownlist data-binding scenario for editing in a grid. Here’s some details on what I’m trying to prove out:

I have an editable grid where I’m setting the source to a collection of json objects. One of the properties on the objects is itself a json object called “ItemType”. ItemType consists of an “Id” and a “Name”.

I’ve set the column for ItemType to be a dropdownlist who’s source is a collection of ItemTypes. I set the displayMember of the dropdownlist to be “Name” and the valueMember to “Id”.

What I’d like to have happen is for the ItemType column to display the “Name” property of its underlying cellvalue and when in edit mode show the dropdownlist with a selected item’s value matching the “Id” of the underlying cellvalue’s ItemType object.

Any suggestions??

Thanks,
Dave

Here’s my code:

$(document).ready(function () {
var theme = ‘classic’;

$.get(‘/home/getgriditems’,

function (data) {

var GridModel = function (items) {
this.items = ko.observableArray(items);
};

var model = new GridModel(data);
ko.applyBindings(model);

var source = {
localdata: model.items,
datatype: ‘local’
}

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

// prepare the data
var typesSource =
{
datatype: “json”,
datafields: [
{ name: ‘Id’ },
{ name: ‘Name’ }
],
id: ‘Id’,
url: ‘/home/getitemtypes’
};
var typesDataAdapter = new $.jqx.dataAdapter(typesSource, { autoBind: true, async: false });

// create jqxGrid.
$(“#jqxgrid”).jqxGrid(
{
source: dataAdapter,
autoheight: true,
pageable: true,
editable: true,
theme: ‘classic’,
columns: [
{ text: ‘Name’, dataField: ‘Name’, width: 200 },
{ text: ‘Type’, columntype: ‘dropdownlist’, datafield: ‘ItemType’, width: 177,
initeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList({ source: typesDataAdapter, displayMember: ‘Name’, valueMember: ‘Id’ });
}
},
{ text: ‘Description’, dataField: ‘Description’, width: 200 }
]
});
});
});

[Peter StoevKeymaster]

Hi Dave,

I am afraid that what you are trying to do could not be achieved with our Grid plug-in. It is currently not possible to associate a Grid column to a complex object i.e object with sub properties. I will create a new work item regarding this missing functionality and we will support it in a future version.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts