javascript - Infragistics dropdown in row with value selected -
i have datasource contains status column. have array, part_status, contains possible statuses.
is possible display dropdown menu in column part_status statuses , have correct option selected?
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http://www.modernizr.com/downloads/modernizr-latest.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script> <script src="http://cdn-na.infragistics.com/jquery/20122/latest/js/infragistics.loader.js"></script> <script type="text/javascript"> var data = [ {"productid":1,"ecname":"ec4532","priority":"1","ecid":"21026120061","status":"out refurb"}, {"productid":2,"ecname":"ec4522","priority":"1","ecid":"21026120034","status":"out cleaning"}, {"productid":3,"ecname":"ec4524","priority":"1","ecid":"21026120022","status":"out repair"}, {"productid":4,"ecname":"ec4232","priority":"1","ecid":"21026120061","status":"removed"}, {"productid":5,"ecname":"ec4222","priority":"2","ecid":"21026120034","status":"need refurb"}, {"productid":6,"ecname":"ec2224","priority":"2","ecid":"21026120342","status":"need refurb"}, {"productid":7,"ecname":"ec5532","priority":"2","ecid":"21026177061","status":"need refurb"} ]; $.ig.loader({ scriptpath: "http://cdn-na.infragistics.com/jquery/20122/latest/js/", csspath: "http://cdn-na.infragistics.com/jquery/20122/latest/css/", resources: "iggrid.paging.updating" }); var part_status = [ "out cleaning", "out repair", "out refurb", "need cleaning", "need repair", "need refurb", "removed", "cleaned", "repaired", "refurbished" ]; $.ig.loader(function () { $("#grid1").iggrid({ height: 500, width: 1700, columns: [ { headertext: "product id", key: "productid", datatype: "number" }, { headertext: "ec name", key: "ecname", datatype: "string" }, { headertext: "priority", key: "priority", datatype: "string" }, { headertext: "ecid", key: "ecid", datatype: "number" }, { key: "status", headertext: "status", datatype: "string", width: "200px" } ], primarykey: "productid", autogeneratecolumns: false, autocommit: true, datasource: data }); }); </script> </head> <body> <table id="grid1"></table> </body> </html>
possible solution #1
you can use updating feature , specify in columnsettings status column used combo editor. part_status act data source combo editor in status cell.
for example can add:
$.ig.loader({ //... resources: "iggrid.paging.updating,igcombo" }); //... $("#grid1").iggrid({ //... features: [ { name: "updating", editmode: "cell", columnsettings: [ { columnkey: "status", editortype: "combo", editoroptions: { datasource: part_status } } ] } ] }); possible solution #2
another way things combos visible without updating creating template status column , create new combo on each row in column.
since updating wouldn't present mean needed save data manually. coloring can achieved , have included how implemented. used on each combo.
//... var part_status = [ {"name": "out cleaning", "textcolor": "black", "backgroundcolor": "white"}, {"name": "out repair", "textcolor": "white", "backgroundcolor": "red"}, {"name": "out refurb", "textcolor": "black", "backgroundcolor": "white"}, {"name": "need cleaning", "textcolor": "black", "backgroundcolor": "white"}, {"name": "need repair", "textcolor": "black", "backgroundcolor": "white"}, {"name": "need refurb", "textcolor": "white", "backgroundcolor": "blue"}, {"name": "removed", "textcolor": "black", "backgroundcolor": "white"}, {"name": "cleaned", "textcolor": "white", "backgroundcolor": "green"}, {"name": "repaired", "textcolor": "black", "backgroundcolor": "yellow"}, {"name": "refurbished", "textcolor": "black", "backgroundcolor": "white"} ]; $.ig.loader(function () { $("#grid1").iggrid({ //... columns: [ //... { headertext: "status", key: "status", datatype: "string", width: "200px", template: "<input class='combo' value='${status}'/>"} ], rowsrendered: function () { $(".combo").igcombo({ datasource: part_status, width: "100%", enableclearbutton : false, //template dropdown items when clicking on arrow have colors well: itemtemplate: "<div style='color: ${textcolor}; background-color:${backgroundcolor};' title='${name}'>${name}</div>", //assign text color , background color selected value: create: function(evt, ui) { var intextcolor = $(evt.target).data("igcombo").options.datasource[$(evt.target).data("igcombo").selectedindex()].textcolor; var inbgcolor = $(evt.target).data("igcombo").options.datasource[$(evt.target).data("igcombo").selectedindex()].backgroundcolor; $(evt.target).css({ 'color': intextcolor, 'background-color': inbgcolor}); }, selectionchanged: function (evt, ui) { //update data source, new selected value saved var rowid = parseint(ui.owner.element.closest("tr").attr("data-id")); $("#grid1").data("iggrid").datasource.setcellvalue(rowid, "status", ui.items[0].value, true); //update text color , background color when changing new value var newtextcolor = ui.owner.options.datasource[ui.owner._activeid].textcolor; var newbgcolor = ui.owner.options.datasource[ui.owner._activeid].backgroundcolor; ui.owner.element.css({ 'color': newtextcolor, 'background-color': newbgcolor}); } }); } }); }); for more information , full samples can @ following response on infragistics forum:
http://www.infragistics.com/community/forums/p/103087/490162.aspx#490162
Comments
Post a Comment