Can Knockout model be used with grid and input

[rkamarowskiParticipant]

I have a Knockout model that is working with a grid. Can this same model be used for separate input widgets that use the same table?
I want the user to select an entry from the grid, and then edit that data in a separate form.

`var GridModel = function ()
{
this.items = ko.observableArray();
var me = this;
$.ajax(
{
datatype: ‘json’,
url: “/php/eesVehiclesData.php”
}).done(function (data)
{
var jsonData = $.parseJSON(data);
me.items(jsonData);
});
};

/* vehicles grid */
/* eesVehiclesModel(‘vehicles’);*/

var modelGrid = new GridModel(
{
url: “/php/eesVehiclesData.php”
});

var source =
{
datatype: “json”,
datafields:
[
{name: “VehicleID”, type: “number”},
{name: “VehicleName”, type: “string”},
{name: “Active”, type: “boolean”},
{name: “Notes”, type: “string”},
{name: “VehicleTypeID”, type:”string”},
{name: “Year”, type: “string”},
{name: “VehicleMakeID”, type: “number”},
{name: “VehicleMake”, type: “string”},
{name: “Model”, type: “string”},
{name: “PurchaseDate”, type: “string”},
{name: “PurchasePrice”, type: “number”},
{name: “Miles”, type: “number”},
{name: “Hours”, type: “number”},
{name: “UserID”, type: “number”},
{name: “User”, type: “string”}
],
id: “VehicleID”,
localData: modelGrid.items,
async: false
};

var dataAdapterVehicle = new $.jqx.dataAdapter(source,
{
contentType: ‘application/json; charset=utf-8’,
loadError: function (xhr, status, error)
{
console.warn(xhr.responseText);
alert(error);
},
loadComplete: function ()
{
var length = dataAdapterVehicle.records.length;
var text = dataAdapterVehicle.records;
/*alert(text); */
},
downloadComplete: function (data, status, xhr) { },
});

$(“#divGridLeftVehicle”).jqxGrid(
{
autoheight: true,
columnsresize: true,
pageable: true,
selectionmode: ‘singlerow’,
sortable: true,
source: dataAdapterVehicle,
width: ‘100%’,
columns: [
{ text: ‘Name’, datafield: ‘VehicleName’, width: ‘24%’ },
{ text: ‘Active’, datafield: ‘Active’, width: ‘8%’},
{ text: ‘Vehicle Type’, datafield: ‘VehicleTypeID’, width: ‘20%’},
{ text: ‘Make’, datafield: ‘VehicleMake’, width: ‘20%’},
{ text: ‘Model’, datafield: ‘Model’, width: ‘20%’},
{ text: ‘Year’, datafield: ‘Year’, width: ‘8%’}
]
});
$(“#divGridLeftVehicle”).bind(‘rowselect’, function (event)
{
var selectedRowIndex = event.args.rowindex;
var data = $(‘#divGridLeftVehicle’).jqxGrid(‘getrowdata’, selectedRowIndex);
$(“#h2RightHeader”).html(“Vehicle: <u>” + data.VehicleName + “</u>”);
$(‘#divRightTabs’).jqxTabs(‘enableAt’, 0);
$(‘#divRightTabs’).jqxTabs(‘select’, 0);
});
ko.applyBindings(modelGrid);
`

[HristoParticipant]

Hello rkamarowski,

Yes, it is possible. Unfortunately, we do not have such example with the KnockoutJS, but you could try to create it.
I would like to suggest you look at this “Integration with jqxGrid” demo (as the approach).

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[rkamarowskiParticipant]

Thank you.

[rkamarowskiParticipant]

Is anyone else doing this?

[Author]

Posts