asp.net - JQuery Dialog with DataTable() -
i wondering if me out issue having. using asp.net , jquery ui 1.9.2. have on form textbox , button searching. when button clicked, server side query database , store results in gridview. make datatable work asp.net gridview, following in cs:
protected override void onprerender(eventargs e) { base.onprerender(e); // no point change settings if there isn't rows if (this.gridmemberinfo.rows.count <= 0) return; // change table there thead this.gridmemberinfo.headerrow.tablesection = tablerowsection.tableheader; if(this.gridmemberinfo.showfooter) this.gridmemberinfo.footerrow.tablesection = tablerowsection.tablefooter; }
this gridview inside of div use jquery dialog act modal popup. after binding gridview's datasource results query, create modal:
cs:
scriptmanager.registerstartupscript(this, this.gettype(), "membermodal", "createmembermodal();", true);
js:
function createmembermodal() { $(document).ready(function () { $("#modal").dialog( { modal: true, hide: "explode", width: 700, height: "auto", resizable: false, open: function (event, ui) { $("#gridmemberinfo").datatable( { "bjqueryui": true, "spaginationtype": "full_numbers", "aasorting": [] }); } }) }); }
the modal displayed correctly , works first time dialog opens. however, if user closes dialog , performs different search, dialog opens gridview doesn't take of datatable properties (shown regular html table in modal). also, modal div inside of asp:updatepanel, page doesn't reload during search. can see doing wrong?
going off of dan's comment, removed $(document).ready() logic in createmembermodal()
function. call in cs when need rebind gridview doing this:
scriptmanager.registerstartupscript(this, this.gettype(), "membermodal", "createmembermodal();", true);
however, addition things needed done dan noted. noticed if moved gridview outside of modal div, table showed updated search results. made me think issue actual jquery dialog , not datatables. found needed destroy dialog on close , remove dom. createmembermodal()
function looks this:
function createmembermodal() { $("#modal").dialog( { modal: true, hide: "explode", width: 700, height: "auto", resizable: false, autoopen: false, close: function (event, ui) { $(this).dialog("destroy").remove(); }, open: function (event, ui) { if (!isdatatable($("#modal table")[0])) { $("#modal table").datatable( { "bjqueryui": true, "spaginationtype": "full_numbers", "aasorting": [] }); } } }); $("#modal").dialog("open"); }
so when close dialog, destroy it. when need new search, recreate , works charm!
Comments
Post a Comment