I have a dropdown in the igGrid and would like to change default values for the cell adjacent to it when I make change to the dropdown.
For e.g. dropdown ID has 1 and 2 and adjacent cell has dropdown test with values test1, test2, test3, test4 and test5. When ID value is selected as 1 default for test dropdown should change to test1 and when it is changed to 2 the test dropdown should have test3 as default.
Please let me know the code for this with the igGrid in webforms and not in MVC.
Thanks in advance.
Hi Infragistics Team,
Please reply to the above mentioned query.
Hello,
You can take a look at the HTML sample I've attached to this reply - I believe it implements the scenario you are aiming for.
Also, note that in my case the drop-downs are just plain old HTML <select>-s so I'm just using javascript to modify one drop-down's value based on the one in the cell to its right.
If you have any trouble or questions about our controls, please let us know.
Regards,
Borislav
Hi Borislav,
i am not able to extract the files attched.
it would be rteally helpful if you could share the code in the post.
Ok, let's try it this way:
<script type="text/javascript">var namedData = new Array();namedData[0] = { "ProductID": "1", "UnitsInStock": "100", "ProductDescription": "Laptop", "UnitPrice": "$ 1000" };namedData[1] = { "ProductID": "2", "UnitsInStock": "15", "ProductDescription": "Hamburger", "UnitPrice": "$ 10" };namedData[2] = { "ProductID": "3", "UnitsInStock": "4356", "ProductDescription": "Beer", "UnitPrice": "$ 1000" };namedData[3] = { "ProductID": "4", "UnitsInStock": "32", "ProductDescription": "mobile phone", "UnitPrice": "$ 1000" }; $(function () { $('#grid1').igGrid({virtualization: false, autoGenerateColumns: false, autoCommit: true, jQueryTemplating: true, rowTemplate: "<tr><td>${ProductID}</td><td>${UnitsInStock}</td><td>${ProductDescription}<select class='modifiableDropDown'><option>test1</option><option>test2</option><option>test3</option><option>test4</option><option>test5</option></td><td>${UnitPrice} <select class='modifyPreviousColumn'><option/><option>1</option><option>2</option></select></td></tr>", height: '500px', columns: [ { headerText: "Product ID", key: "ProductID", width: "100px", dataType: "string" }, { headerText: "Units in Stock", key: "UnitsInStock", width: "150px", dataType: "number" }, { headerText: "Product Description", key: "ProductDescription", width: "150px", dataType: "string" }, { headerText: "Unit Price", key: "UnitPrice", width: "200px", dataType: "string" } ], dataSource: namedData }); $("select.modifyPreviousColumn").live("change", function(){ if($(this).val() == 1) $(".modifiableDropDown", $(this).parent().prev()).val("test1"); if($(this).val() == 2) $(".modifiableDropDown", $(this).parent().prev()).val("test3"); }); }); </script> <style type="text/css"> body { font-size:12px; } </style> </head> <body> <table id="grid1"></table> </body> </html>
Let me know if this works out for you.
Cheers,Borislav