Hi,
I have a problem to reload a grid with data.
In the following example I have 2 buttons to load data into a grid. Each button works fine, if I click them first, but didn't work with the second click.
I want to delete the first result with the second button, and show the second result. A simple reloading of data.
How can I do this?
Bodo
//
var _data1 = [{ "cola1": "a1", "cola2": "a2" }, { "cola1": "a3", "cola2": "a4" }]; var _data2 = [{ "colb1": "b1", "colb2": "b2" }, { "colb1": "b3", "colb2": "b4" }];
function getData1() { $("#idGrid").empty(); $("#idGrid").igGrid({dataSource: _data1}); $("#idGrid").igGrid("dataBind"); } function getData2() { $("#idGrid").empty(); $("#idGrid").igGrid({ dataSource: _data2 }); $("#idGrid").igGrid("dataBind"); } // ]]>
Here's the complete html:
"
<!DOCTYPE html><html><head> <link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/structure/infragistics.css" rel="stylesheet" /> <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.dv.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.lob.js"></script> <script type="text/javascript" language="javascript">
function getData1() { $("#idGrid").empty(); $("#idGrid").igGrid({dataSource: _data1}); $("#idGrid").igGrid("dataBind"); } function getData2() { $("#idGrid").empty(); $("#idGrid").igGrid({ dataSource: _data2 }); $("#idGrid").igGrid("dataBind"); } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>load data test</title> <meta charset="utf-8" /></head><body> <input id="btnLoadData1" type="button" value="load data1" onclick="getData1()" /> <input id="btnLoadData2" type="button" value="load data2" onclick="getData2()" /> <div id="idGrid"></div></body></html>"
Hello,
Thank you for contacting Infragistics!
If you want to recreate the grid with different data/columns you have to call destroy on it first:
http://help.infragistics.com/jQuery/2015.2/ui.iggrid#methods:destroy
$("#grid1").igGrid("destroy");
Hi Mike,
'destroy' this doesn't work.
I've renew getData2 like this:
function getData2() { $("#idGrid").empty(); $("#idGrid").igGrid("destroy"); $("#idGrid").igGrid({ dataSource: _data2 }); $("#idGrid").igGrid("dataBind"); }
I have created a sample that demonstrates this behavior. You will only want to call destroy and the re-create the grid. You don’t have to call empty or databind.