Updatepanel 및 jqgrid

Question

은 패널과 jqgrid를 함께 업데이트 할 수 있습니까? jqgrid를 사용 중이고 페이지 새로 고침을 제어하려고합니다. 그래서 업데이트 패널을 추가했지만 작동하지 않습니다.

Answer 1

UpdatePanels가 지원됩니다. UpdatePanel 안의 jqGrid 인스턴스를 시작점으로 포함하는 Master -> Detail 예제를 온라인으로 사용할 수 있습니다 : MasterDetail jqgrid inside an update panel

Answer 2

이와 같이 부분적인 포스트 백 이후에 jqgrid를 다시 인스턴스화해야합니다.

<script type="text/javascript"> 
        //Calls the function to load the for the first time 
        LoadGrid(); 
        **var prm = Sys.WebForms.PageRequestManager.getInstance(); 
        prm.add_initializeRequest(InitializeRequest); 
        prm.add_endRequest(EndRequest); 
        function InitializeRequest(sender, args) { 
        } 
        // fires after the partial update of UpdatePanel 
        function EndRequest(sender, args) { 
         //Calls the function again to load the grid after partial postback 
         LoadGrid(); 
        }** 

        function LoadGrid() { 
         jQuery("#jqGrid").jqGrid({ 
          url: '/GridHandler.ashx', 
          datatype: "json", 
          colNames: ['Id', 'Village Name', 'Village Area'], 
          colModel: [ 
          { name: 'Id', index: 'Id', width: 30, sorttype: 'int', sortable: true }, 
          { name: 'VillageName', index: 'VillageName', width: 170, sorttype: 'text', sortable: true }, 
          { 
           name: 'VillageArea', index: 'VillageArea', width: 70, align: "right", sorttype: 'int', 
           sortable: true, formatter: 'integer', formatoptions: { thousandsSeparator: "," } 
          }, 
          ], 
          //pager: "#pager", 
          rowNum: 1000, 
          height: 441, 
          width: 288, 
          loadonce: true, 
          sortname: 'Id', 
          viewrecords: true, 
          sortorder: "asc", 
          caption: "List of Villages", 
          shrinkToFit: 'false', 
          onSelectRow: function() { 
           //Gets the Id of selected row 
           var sel_id = $('#jqGrid').jqGrid('getGridParam', 'selrow'); 
           var selectedVillage = $('#jqGrid').jqGrid('getCell', sel_id, 'VillageName'); 

           $.ajax({ 
            type: "POST", 
            async: false, 
            url: "HomeModified.aspx/GridRowSelect", 
            data: "{'village':'" + selectedVillage + "'}", 
            contentType: "application/json; charset=utf-8", 
            dataType: "json", 
            success: function (result) { 
             GenerateMap(); 

            }, 
            error: function (result) { 
             alert("There is an error in generating map"); 
            } 
           }); 

           function GenerateMap() { 
            document.getElementById("<%=hiddenButton.ClientID %>").click(); 
           $('#jqGrid').jqGrid('setGridParam', { url: '/GridHandler.ashx', datatype: 'json' }).trigger('reloadGrid', [{ current: true }]); 
          } 
         } 
         }); 
        } 



       </script>