View Full Version : Problem refreshing ASP.NET grid from ExtJS popup submit.

9 Sep 2010, 5:44 AM
So I have an .aspx page. This page contains a grid. This page has an 'Upload' button that opens up an ExtJS popup for you to upload a file. You choose the file and the description and than hit upload. This is working. The file enters the database every single time successfully. However, about 75% the grid on the .aspx page actually refreshes to show these changes. It's all random it seems when it shows it and when it doesn't. If you hit F5 (or close and re-open the page), you can ALWAYS see the file, but the mygrid.refresh(); doesn't seem to work everytime.

I have even set up Global alerts that display right after it calls refresh(); and I'll see the alert but the grid won't refresh properly.

Can anyone help? This has been on 3 forums with no one knowing the answer at all =/ Here is the code:

<%@ Page Language="VB" Inherits="Web.BaseView(Of Lending.Controllers.Workspace.DocumentUploadData)" %>
<%@ Import Namespace="WebControls.Forms" %>
<%@ Import Namespace="WebControls.Grids" %>

<script runat="server">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script language="javascript" type="text/javascript">

function RefreshGrid(result, data) {
if (data.responseText.length > 0) {
var obj = eval('(' + data.responseText + ')');
if (obj.Result == false) {
Global.alertError(obj.UserMessage, obj.ExceptionID);
else {

var uploadWindow
var showUploadWindow = function() {
if (!uploadWindow) {
uploadWindow = new Ext.Window({
title: 'Attach Document'
, width: 450
, height: 140
, closable: true
, closeAction: 'hide'
, iconCls: ''
, layout: 'form'
, bodyStyle: 'padding:10px 10px 0px 2px'
, labelWidth: 100
, labelAlign: 'right'
, renderTo: DocumentUploadForm_FormViewPort.getEl()
, constrain: true
, modal: true
, items: [{
xtype: 'textfield'
, validationEvent: 'blur'
, enableKeyEvents: true
, anchor: '100%'
, fieldLabel: '* Select File'
, labelStyle: 'color:red'
, el: 'fuDocument'
, id: 'fuDocument'
, allowBlank: false
, blankText: 'File Upload is a required field'
, inputType: 'file'
}, {
xtype: 'textfield'
, anchor: '100%'
, fieldLabel: 'Description'
, id: 'txtDescription'
, allowDecimals: false
, decimalPrecision: 0
, maxLength: 100
, maxLengthText: 'Description must be no more than 100 characters in length'
, buttonAlign: 'center'
, fbar: [{
text: 'Save', iconCls: 'icon-button-save', handler: function() { uploadDocument() }
}, {
text: 'Cancel', iconCls: 'icon-button-cancel', handler: function() { uploadWindow.hide() }

function viewContent() {
var docId = mygrid.getSelectedString('DocumentId');
window.location = "Edit/" + docId;

function uploadDocument() {

//this function maps enter key
function mapEnterKey(obj) {
var keyMap = new Ext.KeyMap(obj.getEl(), {
key: Ext.EventObject.ENTER,
stopEvent: true,
handler: uploadDocument

<form id="form1" runat="server">

<div style="display:none">
<asp:FileUpload ID="fuDocument" runat="server" />

Using DocumentUploadForm As New WebControls.Forms.Form()
With DocumentUploadForm
.ID = "DocumentUploadForm"
.Framed = False
.ItemName = "Document"
.Title = "Application Documents"
.TitleStyle = Forms.Form.TitleStyleType.TitleBar
.IconCls = "icon-blank-16"
.OnSubmitCallback = "RefreshGrid"
.Toolbar.UseDefaultButtons = False

With .CenterRegion
Using mygrid As New WebControls.Grids.Grid()
With mygrid
.ID = "mygrid"

.GridItemName = "document"
.Title = "Uploaded Documents"
.Mode = Grid.GridMode.Tab
.OnDoubleClick = "viewContent"
.SetEditPage("Workspace/DocumentUpload.mvc", "DocumentId")

With .Toolbar
.AllowSearch = False
.UseDefaultButtons = False
With .AddButton("Attach Document", "function(){showUploadWindow();}")
.RequiresRowSelection = False
.IconClass = "icon-button-create"
End With
With .AddButton(Grids.Grid.GridToolbar.ButtonType.Edit)
.Text = "View Document"
.Handler = "viewContent"
.IconClass = "icon-button-preview"
End With
With .AddButton(Grids.Grid.GridToolbar.ButtonType.Delete)
.Text = "Delete Document"
End With
With .AddButton("Close Window", "function(){window.close()}")
.RequiresRowSelection = False
.IconClass = "icon-button-cancel"
End With
End With

.Columns.Add("Name", "Name", Grid.ColumnDataType.String, 200)
.Columns.Add("Description", "Description", Grid.ColumnDataType.String, 450)

.DataSource = ViewData("Documents")
End With
End Using
.AddControl("mygrid", "Documents", Forms.Control.ControlType.Grid)
End With

End With

End Using


10 Sep 2010, 2:20 AM
I can't read ASP.NET code, but it is unusual to put both your .js code and your data in the same file (reloading requires a complete page reload).

Instead, create a separate HTML with your javascript (doesn't need to be an .aspx page) and a separate .aspx page that only returns the data for the grid (in JSON format - no HTML, BODY etc.!).

10 Sep 2010, 4:44 AM
So there is no javascript method that can be used to reload a page?

Do you have any idea why the mygrid.refresh(); works SOMETIMES but not everytime? I can run through the exact same scenario twice and sometimes it works and sometimes it doesn't.

10 Sep 2010, 4:52 AM
So there is no javascript method that can be used to reload a page?