or
I certainly don't want to be tied to Microsoft platforms but I do think this tool or something like is definitely needed by UX people. It would be nice to swap out the MS-JS stuff and swap in the KendoUI stuff. (or dojo, or whatever).
I am going to try this out and report back on how it works for me (but then I come from the XAML world).
$(document).ready(function () { $("#grid").kendoGrid({ dataSource: { type: "json", transport: { contentType: "application/json; charset=utf-8", type: "POST" } }, pageSize: 10, serverPaging: true, serverFiltering: true, serverSorting: true }); });var dataSource = new kendo.data.DataSource({ transport: { read: { // the remote service url contentType: "application/json; charset=utf-8", type: "POST", dataType: "json } } });<div id="example" class="k-content"> <div id="organizer"> <ul id="panelbar"> <li class="k-state-active"> <span class="k-link k-state-selected">producto 1</span> <div id="example" class="k-content"> <div id="rowSelection" style="width:620px; height:300px"></div> <script> $(document).ready(function() { $("#rowSelection").kendoGrid({ dataSource: { data: FuncionDellenado(), }, selectable: "multiple", pageable: true, scrollable: true, navigatable: true, columns: [ { field: "FirstName", title: "productos", format: "{0:c}", type:"String",editable: false, width: "150px" }, { field: "City", title: "cantidad", editable:true, type:"Number", validation: { min: 1, required: true },width: "80px" }, {field: "BirthDate", title: "fecha de Entrega",type:"String",editable:true,width:"100px"}, { field: "Favoritos", template: "#= kendo.toString(\'<label \class=\"label_radio\"for=\"radio-01\">\<input name=\"sample-radio\" id=\"radio-01\" value=\"1\" type=\"radio\"/>\.\</label>\')##= kendo.toString(\'<label \class=\"label_radio\" for=\"radio-01\">\<input name=\"sample-radio\" id=\"radio-01\" value=\"1\" type=\"radio\" />\.\ </label>\') ##= kendo.toString(\'<label \class=\"label_radio\" for=\"radio-01\">\<input name=\"sample-radio\" id=\"radio-01\" value=\"1\" type=\"radio\" />\.\ </label>\') ##= kendo.toString(\'<label \class=\"label_radio\" for=\"radio-01\">\<input name=\"sample-radio\" id=\"radio-01\" value=\"1\" type=\"radio\" />\.\ </label>\') ##= kendo.toString(\'<label \class=\"label_radio\" for=\"radio-01\">\<input name=\"sample-radio\" id=\"radio-01\" value=\"1\" type=\"radio\" />\.\ </label>\') #", title: "Favoritos", width: "80px" }, { field: "añadir", template: "#= kendo.toString(\'<input type=IMAGE SRC=\"add.gif\"\id=\"añadir\" value=\"CODE\" />\') #", title: "añadir", width: "210px" } ], editable: true }); $('#añadir').click(function () { var sourcegrid = $('#rowSelection').data('kendoGrid'); //SOURCE GRID var destinationgrid = $('#Selection').data('kendoGrid'); // DESTINATION GRID sourcegrid.select().each(function () { var dataItem = sourcegrid.dataItem($(this)); var column = dataItem.FirstName; // whatever the name of the unique id for your data source destinationgrid.dataSource.add(dataItem); // DESTINATION DATASOURCE }); destinationgrid.refresh(); // MUST REFRESH THE DESTINATION GRID }); }); </script> data: dsData
});
With the newest nightly builds, this results in a "ghost" item in the DataSource with all undefined values.
Just passing the DataSource an empty array fixes the problem but is what I was doing wrong and is it effectively the same as what I'm now doing?
<div data-title="images" data-role="view" id="index" data-url="/" data-layout="default" data-model="ImageViewModel" data-init="initImageView"> <div id="container"> </div> </div>
now this produces the look that I want (see attached file) with each image side by side and N fit on a row according to the width of container. of course this is more than crude as I am not using the VM but cannot see how to use one of your containers that allow using data-binding and MVVM. All the List want to put each image on its own line. This is pretty easy in Sencha Touch as they have dataview container which u seem to be missing.
Thanks
getByUid: function(id) { var idx, length, data = this._data; for (idx = 0, length = data.length; idx < length; idx++) { if (data[idx].uid == id) { return data[idx]; } }}