PDA

View Full Version : [CLOSED] DirectEvent and GridPanel



adelaney
Aug 24, 2012, 11:00 PM
I am trying to use a direct method to call a partial view which has a grid panel. I am following the example from the MVC examples (2.1) under "Grid Panel/Direct Event Create" The code is executing, but I keep getting a javascript error.

Here is my button:

@(Html.X.Button().ID("btnSubmit").Text("DirectRun") _
.DirectEvents(Sub(evnts)
With evnts
With .Click
.Url = Url.Action("Index")
.Method = HttpMethod.POST
.EventMask.ShowMask = True
.Success = "onSuccess(App.filterResults, result.result);"
End With

End With
End Sub))

Here is my partial view:

@ModelType List(Of Enterprise.Business.DocTracking.Web.Models.CWFilte rResults)

@(Html.X.GridPanel() _
.ID("filterResults") _
.Layout(LayoutType.Fit) _
.Scroll(ScrollMode.Both) _
.SetAutoScroll(True) _
.TopBar(Sub(top)
'removed until testing works.
End Sub
) _
.Store(Sub(store)
Dim s As New Ext.Net.Store()
Dim mdl As New Ext.Net.Model()
Dim rdr As New Ext.Net.ArrayReader()

With mdl
.Fields.Add(New Ext.Net.ModelField() With {.Name = "RequestID", .Type = ModelFieldType.Int})
.Fields.Add(New Ext.Net.ModelField() With {.Name = "DocumentID", .Type = ModelFieldType.Int})
.Fields.Add(New Ext.Net.ModelField() With {.Name = "SlipStatus"})
.Fields.Add(New Ext.Net.ModelField() With {.Name = "DocumentName"})
.Fields.Add(New Ext.Net.ModelField() With {.Name = "DocumentType"})
.Fields.Add(New Ext.Net.ModelField() With {.Name = "DocumentStatus"})
.Fields.Add(New Ext.Net.ModelField() With {.Name = "RequestType"})
.Fields.Add(New Ext.Net.ModelField() With {.Name = "RequestStatus"})
.Fields.Add(New Ext.Net.ModelField() With {.Name = "EmployeeID"})
.Fields.Add(New Ext.Net.ModelField() With {.Name = "TermsEffectiveDate", .Type = ModelFieldType.Date})
.Fields.Add(New Ext.Net.ModelField() With {.Name = "CedentCode"})
.Fields.Add(New Ext.Net.ModelField() With {.Name = "CedentName"})
.Fields.Add(New Ext.Net.ModelField() With {.Name = "ContractName"})
.Fields.Add(New Ext.Net.ModelField() With {.Name = "Correspondent"})
.Fields.Add(New Ext.Net.ModelField() With {.Name = "Drafter"})
.Fields.Add(New Ext.Net.ModelField() With {.Name = "RequestDate", .Type = ModelFieldType.Date})
.Fields.Add(New Ext.Net.ModelField() With {.Name = "Reviewer"})
.Fields.Add(New Ext.Net.ModelField() With {.Name = "SlipCode"})
.Fields.Add(New Ext.Net.ModelField() With {.Name = "DueDate", .Type = ModelFieldType.Date})
End With


With s
.ID = "filterResultsData"
.DataSource = Model
.AutoLoad = True
.Model.Add(mdl)
.AutoSync = True
.RemotePaging = False
.Reader.Add(rdr)
.PageSize = 25
End With

store.Add(s)

End Sub) _
.ColumnModel(Sub(cols)
cols.Add(Html.X.RowNumbererColumn().ID("teamRowNum").Width(35))
cols.Add(Html.X.Column().DataIndex("DocumentType").Width(100).Text("Type"))
cols.Add(Html.X.Column().DataIndex("CedentName").Width(250).Text("Cedent"))
cols.Add(Html.X.Column().DataIndex("SlipCode").Width(65).Text("Slip Code"))
cols.Add(Html.X.Column().DataIndex("SlipStatus").Width(75).Text("Slip Status"))
cols.Add(Html.X.Column().DataIndex("DocumentStatus").Width(150).Text("Status"))
cols.Add(Html.X.Column().DataIndex("RequestType").Width(85).Text("Request Type"))
cols.Add(Html.X.Column().DataIndex("RequestStatus").Width(85).Text("Request Status"))
cols.Add(Html.X.DateColumn().DataIndex("TermsEffectiveDate").Width(80).Align(Alignment.Right).Text("Effective Date").Format("M/d/y"))
cols.Add(Html.X.DateColumn().DataIndex("DueDate").Text("Due Date").Width(75).Align(Alignment.Right).Format("M/d/y"))
cols.Add(Html.X.Column().DataIndex("ContractName").Text("Contract").Width(200))
cols.Add(Html.X.Column().DataIndex("ContractPeriod").Text("Contract Period").Width(100).Hidden(True))
cols.Add(Html.X.Column().DataIndex("Correspondent").Text("Correspondent").Width(150).Hidden(True))
cols.Add(Html.X.Column().DataIndex("Drafter").Text("Drafter").Width(150).Hidden(True))
cols.Add(Html.X.Column().DataIndex("Reviewer").Text("Reviewer").Width(150).Hidden(True))
cols.Add(Html.X.DateColumn().DataIndex("RequestDate").Text("Request Date").Width(80).Hidden(True).Align(Alignment.Right).Fo rmat("M/d/y"))
End Sub) _
.BottomBar(Sub(footer)
Dim pager As New Ext.Net.PagingToolbar()
With pager
.AutoDataBind = True
.HideRefresh = True
End With
footer.Add(pager)
End Sub) _
.Focus() _
.Selectable(True) _
.Title("Search Results"))


Here is part of my controller:

Return Me.Direct(Me.Manager.Filter.Select(xDoc.ToString() ).ToArray())

Here is the error:
"TypeError: Con is not a constructor on line 47180 for http://localhost:1859/extjs/ext-all-debug-js/ext.axd?v=11375"

Here is where it breaks:

create: function(config, name, id) {
var Con = typeof name == 'function' ? name : this.types[name || config.name];
return new Con(config, id);
}

When reviewing the code, config contains my array of results, but name and id are null. The code never makes it to the "onSuccess" event. I think I am following the example almost verbatim. However, is there anything obvious here I am missing?

Daniil
Aug 26, 2012, 9:59 AM
Hi,

I can't see in your code what might cause this error.

Please provide us with the onSuccess definition.

Just a note (it should not cause the error that you described).

Please use

.AutoScroll(True) _
instead of

.SetAutoScroll(True) _

The SetAutoScroll method is to generate a respective JavaScript during an AJAX request.

adelaney
Aug 27, 2012, 12:54 PM
Here is my onSuccess code:


var onSuccess = function (grid, data) {
debugger;
//grid.show();
grid.getStore().loadData(data);
};

However, as stated, when stepping through, it doesn't even get this far.

Daniil
Aug 27, 2012, 3:04 PM
Maybe, is a Failure handler triggered?

What is a response?

Please provide us with a full controller action code.

Generally, a full sample would be appreciated.

adelaney
Aug 27, 2012, 4:50 PM
I will give you the full controller code, but it really is irrelevant as all it does is call the database and massage some XML filtering process. Besides, the code steps through completely - even past the direct response portion, but it fails during the javascript initialization.

Also, from my original post:


Here is the error:
"TypeError: Con is not a constructor on line 47180 for http://localhost:1859/extjs/ext-all-debug-js/ext.axd?v=11375"


Here is where it breaks:

Code:

create: function(config, name, id) {
var Con = typeof name == 'function' ? name : this.types[name || config.name];
return new Con(config, id); }


Further, I chagned the output to JSON and changed the loader to be from a JSON reader. I put a break in so that I could get the data back.
As a result, I had to update the Javascript a little bit to this:

var onSuccess = function (grid, data) {
debugger;
//grid.show();
grid.getStore().loadData(data.Data);
};


Here is my emitted JSON:

{result:{"ContentEncoding":null,"ContentType":null,"Data":[{"FilterId":0,"EmployeeID":0,"CedentName":"Sample Insurance Company (Trainee Department) (S2I)","ContractName":"Acme, Co. 8/16/2012 11:04:28","Drafter":"Unassigned","Reviewer":"Wilde, Laura","Correspondent":null,"QAReviewer":null,"DocumentType":"Original","DueDate":"2012-08-21T18:03:30","DocumentID":131830,"RequestID":100000016,"SlipStatus":"Placing","DocumentName":"Acme, Co. 8/16/2012 11:04:28","TermsEffectiveDate":"2012-01-01T00:00:00","DocumentStatus":"Document Requested","RequestDate":"2012-08-18T18:03:34","SlipCode":"2606","RequestType":"Final","RequestStatus":"In Process"},{"FilterId":0,"EmployeeID":0,"CedentName":"Sample Insurance Company (Trainee Department) (S2I)","ContractName":"Acme, Co. 8/18/2012 1:03:28 P","Drafter":"Unassigned","Reviewer":"Unassigned","Correspondent":null,"QAReviewer":null,"DocumentType":"Original","DueDate":"2012-08-21T13:08:32","DocumentID":131820,"RequestID":100000000,"SlipStatus":"Placing","DocumentName":"Acme, Co. 8/18/2012 1:03:28 P","TermsEffectiveDate":"2012-01-01T00:00:00","DocumentStatus":"Document Requested","RequestDate":"2012-08-18T13:08:46","SlipCode":"2607","RequestType":"Final","RequestStatus":"In Process"},{"FilterId":0,"EmployeeID":0,"CedentName":"Sample Insurance Company (Trainee Department) (S2I)","ContractName":"Bob 1","Drafter":null,"Reviewer":null,"Correspondent":null,"QAReviewer":null,"DocumentType":"Original","DueDate":null,"DocumentID":43298,"RequestID":0,"SlipStatus":"Actual","DocumentName":"Bob 1","TermsEffectiveDate":"2001-10-01T00:00:00","DocumentStatus":"Not Needed","RequestDate":null,"SlipCode":"1001","RequestType":"Final","RequestStatus":"In Process"},{"FilterId":0,"EmployeeID":0,"CedentName":"Sample Insurance Company (Trainee Department) (S2I)","ContractName":"Fee Based - 1/14/2008","Drafter":null,"Reviewer":null,"Correspondent":null,"QAReviewer":null,"DocumentType":"Fee for Service","DueDate":null,"DocumentID":52300,"RequestID":0,"SlipStatus":"Placing","DocumentName":"Fee Based - 1/14/2008","TermsEffectiveDate":"2008-01-14T00:00:00","DocumentStatus":"Document Requested","RequestDate":null,"SlipCode":"2314","RequestType":"Final","RequestStatus":"In Process"},{"FilterId":0,"EmployeeID":0,"CedentName":"Sample Insurance Company (Trainee Department) (S2I)","ContractName":"Revenue Sharing - 7/8/2008","Drafter":null,"Reviewer":null,"Correspondent":null,"QAReviewer":null,"DocumentType":"Revenue Sharing","DueDate":null,"DocumentID":53202,"RequestID":0,"SlipStatus":"Actual","DocumentName":"Revenue Sharing - 7/8/2008","TermsEffectiveDate":"2008-07-01T00:00:00","DocumentStatus":"Document Requested","RequestDate":null,"SlipCode":"2353","RequestType":"Final","RequestStatus":"In Process"},{"FilterId":0,"EmployeeID":0,"CedentName":"Sample Insurance Company (Trainee Department) (S2I)","ContractName":"Revenue Sharing - 2/19/2009","Drafter":null,"Reviewer":null,"Correspondent":null,"QAReviewer":null,"DocumentType":"Revenue Sharing","DueDate":null,"DocumentID":54109,"RequestID":0,"SlipStatus":"Actual","DocumentName":"Revenue Sharing - 2/19/2009","TermsEffectiveDate":"2009-03-01T00:00:00","DocumentStatus":"Document Requested","RequestDate":null,"SlipCode":"2383","RequestType":"Final","RequestStatus":"In Process"}],"JsonRequestBehavior":"DenyGet"}}


I still receive the same error. However, if I simply change the javascript to this:

$("#output").html(data.Data.toString());

I can get output to the page (not formatted), but output.

Vladimir
Aug 27, 2012, 5:01 PM
I see only one obvious error in your code, you have to use JsonReader (Array reader should be used for array of arrays)



I will give you the full controller code, but it really is irrelevant as all it does is call the database and massage some XML filtering process.

We don;t need a code with DB interraction, we need a sample which can be run locally and sample should reproduce th issue

adelaney
Aug 27, 2012, 5:18 PM
As I had indicated, I altered the code from the original post just so I could get some output for you to use.

The view was updated as well to be this:

.Store(Sub(store)
Dim s As New Ext.Net.Store()
Dim mdl As New Ext.Net.Model()
Dim rdr As New Ext.Net.JsonReader()

I still receive the exact same error for the JSONReader as it was for the ArrayReader. Again, I just wanted to give you some testable output.

Vladimir
Aug 27, 2012, 8:16 PM
I cannot reproduce the issue

Here is my test case

View


@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>


<script type="text/javascript">
var onSuccess = function (grid, data) {
grid.getStore().loadData(data.Data);
};
</script>
</head>
<body>
<div>
@Html.X().ResourceManager()
@(Html.X().GridPanel()
.ID("filterResults")
.Layout(LayoutType.Fit)
.Scroll(ScrollMode.Both)
.AutoScroll(true)
.Store(store => {
var s = new Ext.Net.Store();
var mdl = new Ext.Net.Model();
var rdr = new Ext.Net.JsonReader();


mdl.Fields.Add(new Ext.Net.ModelField() {Name = "RequestID", Type = ModelFieldType.Int});
mdl.Fields.Add(new Ext.Net.ModelField() {Name = "DocumentID", Type = ModelFieldType.Int});
mdl.Fields.Add(new Ext.Net.ModelField() {Name = "SlipStatus"});
mdl.Fields.Add(new Ext.Net.ModelField() {Name = "DocumentName"});
mdl.Fields.Add(new Ext.Net.ModelField() {Name = "DocumentType"});
mdl.Fields.Add(new Ext.Net.ModelField() {Name = "DocumentStatus"});
mdl.Fields.Add(new Ext.Net.ModelField() {Name = "RequestType"});
mdl.Fields.Add(new Ext.Net.ModelField() {Name = "RequestStatus"});
mdl.Fields.Add(new Ext.Net.ModelField() {Name = "EmployeeID"});
mdl.Fields.Add(new Ext.Net.ModelField() {Name = "TermsEffectiveDate", Type = ModelFieldType.Date});
mdl.Fields.Add(new Ext.Net.ModelField() {Name = "CedentCode"});
mdl.Fields.Add(new Ext.Net.ModelField() {Name = "CedentName"});
mdl.Fields.Add(new Ext.Net.ModelField() {Name = "ContractName"});
mdl.Fields.Add(new Ext.Net.ModelField() {Name = "Correspondent"});
mdl.Fields.Add(new Ext.Net.ModelField() {Name = "Drafter"});
mdl.Fields.Add(new Ext.Net.ModelField() {Name = "RequestDate", Type = ModelFieldType.Date});
mdl.Fields.Add(new Ext.Net.ModelField() {Name = "Reviewer"});
mdl.Fields.Add(new Ext.Net.ModelField() {Name = "SlipCode"});
mdl.Fields.Add(new Ext.Net.ModelField() {Name = "DueDate", Type = ModelFieldType.Date});


s.ID = "filterResultsData";
//s.DataSource = Model;
s.AutoLoad = true;
s.Model.Add(mdl);
s.AutoSync = true;
s.RemotePaging = false;
s.Reader.Add(rdr);
s.PageSize = 25;

store.Add(s);

})
.ColumnModel(cols => {
cols.Add(Html.X().RowNumbererColumn().ID("teamRowNum").Width(35));
cols.Add(Html.X().Column().DataIndex("DocumentType").Width(100).Text("Type"));
cols.Add(Html.X().Column().DataIndex("CedentName").Width(250).Text("Cedent"));
cols.Add(Html.X().Column().DataIndex("SlipCode").Width(65).Text("Slip Code"));
cols.Add(Html.X().Column().DataIndex("SlipStatus").Width(75).Text("Slip Status"));
cols.Add(Html.X().Column().DataIndex("DocumentStatus").Width(150).Text("Status"));
cols.Add(Html.X().Column().DataIndex("RequestType").Width(85).Text("Request Type"));
cols.Add(Html.X().Column().DataIndex("RequestStatus").Width(85).Text("Request Status"));
cols.Add(Html.X().DateColumn().DataIndex("TermsEffectiveDate").Width(80).Align(Alignment.Right).Text("Effective Date").Format("M/d/y"));
cols.Add(Html.X().DateColumn().DataIndex("DueDate").Text("Due Date").Width(75).Align(Alignment.Right).Format("M/d/y"));
cols.Add(Html.X().Column().DataIndex("ContractName").Text("Contract").Width(200));
cols.Add(Html.X().Column().DataIndex("ContractPeriod").Text("Contract Period").Width(100).Hidden(true));
cols.Add(Html.X().Column().DataIndex("Correspondent").Text("Correspondent").Width(150).Hidden(true));
cols.Add(Html.X().Column().DataIndex("Drafter").Text("Drafter").Width(150).Hidden(true));
cols.Add(Html.X().Column().DataIndex("Reviewer").Text("Reviewer").Width(150).Hidden(true));
cols.Add(Html.X().DateColumn().DataIndex("RequestDate").Text("Request Date").Width(80).Hidden(true).Align(Alignment.Right).Fo rmat("M/d/y"));
})
.BottomBar(footer => {
var pager = new Ext.Net.PagingToolbar();

pager.AutoDataBind = true;
pager.HideRefresh = true;
footer.Add(pager);
})
.Focus()
.Selectable(true)
.Title("Search Results"))
@(Html.X().Button().ID("btnSubmit").Text("DirectRun")
.DirectEvents(events =>{
events.Click.Url = Url.Action("Data");
events.Click.Method = HttpMethod.POST;
events.Click.EventMask.ShowMask = true;
events.Click.Success = "onSuccess(App.filterResults, result.result);";

}))
</div>
</body>
</html>




Controller


public ActionResult Index()
{
return View();
}


public ActionResult Data()
{
return this.Content("{result:{\"ContentEncoding\":null,\"ContentType\":null,\"Data\":[{\"FilterId\":0,\"EmployeeID\":0,\"CedentName\":\"Sample Insurance Company (Trainee Department) (S2I)\",\"ContractName\":\"Acme, Co. 8/16/2012 11:04:28\",\"Drafter\":\"Unassigned\",\"Reviewer\":\"Wilde, Laura\",\"Correspondent\":null,\"QAReviewer\":null,\"DocumentType\":\"Original\",\"DueDate\":\"2012-08-21T18:03:30\",\"DocumentID\":131830,\"RequestID\":100000016,\"SlipStatus\":\"Placing\",\"DocumentName\":\"Acme, Co. 8/16/2012 11:04:28\",\"TermsEffectiveDate\":\"2012-01-01T00:00:00\",\"DocumentStatus\":\"Document Requested\",\"RequestDate\":\"2012-08-18T18:03:34\",\"SlipCode\":\"2606\",\"RequestType\":\"Final\",\"RequestStatus\":\"In Process\"},{\"FilterId\":0,\"EmployeeID\":0,\"CedentName\":\"Sample Insurance Company (Trainee Department) (S2I)\",\"ContractName\":\"Acme, Co. 8/18/2012 1:03:28 P\",\"Drafter\":\"Unassigned\",\"Reviewer\":\"Unassigned\",\"Correspondent\":null,\"QAReviewer\":null,\"DocumentType\":\"Original\",\"DueDate\":\"2012-08-21T13:08:32\",\"DocumentID\":131820,\"RequestID\":100000000,\"SlipStatus\":\"Placing\",\"DocumentName\":\"Acme, Co. 8/18/2012 1:03:28 P\",\"TermsEffectiveDate\":\"2012-01-01T00:00:00\",\"DocumentStatus\":\"Document Requested\",\"RequestDate\":\"2012-08-18T13:08:46\",\"SlipCode\":\"2607\",\"RequestType\":\"Final\",\"RequestStatus\":\"In Process\"},{\"FilterId\":0,\"EmployeeID\":0,\"CedentName\":\"Sample Insurance Company (Trainee Department) (S2I)\",\"ContractName\":\"Bob 1\",\"Drafter\":null,\"Reviewer\":null,\"Correspondent\":null,\"QAReviewer\":null,\"DocumentType\":\"Original\",\"DueDate\":null,\"DocumentID\":43298,\"RequestID\":0,\"SlipStatus\":\"Actual\",\"DocumentName\":\"Bob 1\",\"TermsEffectiveDate\":\"2001-10-01T00:00:00\",\"DocumentStatus\":\"Not Needed\",\"RequestDate\":null,\"SlipCode\":\"1001\",\"RequestType\":\"Final\",\"RequestStatus\":\"In Process\"},{\"FilterId\":0,\"EmployeeID\":0,\"CedentName\":\"Sample Insurance Company (Trainee Department) (S2I)\",\"ContractName\":\"Fee Based - 1/14/2008\",\"Drafter\":null,\"Reviewer\":null,\"Correspondent\":null,\"QAReviewer\":null,\"DocumentType\":\"Fee for Service\",\"DueDate\":null,\"DocumentID\":52300,\"RequestID\":0,\"SlipStatus\":\"Placing\",\"DocumentName\":\"Fee Based - 1/14/2008\",\"TermsEffectiveDate\":\"2008-01-14T00:00:00\",\"DocumentStatus\":\"Document Requested\",\"RequestDate\":null,\"SlipCode\":\"2314\",\"RequestType\":\"Final\",\"RequestStatus\":\"In Process\"},{\"FilterId\":0,\"EmployeeID\":0,\"CedentName\":\"Sample Insurance Company (Trainee Department) (S2I)\",\"ContractName\":\"Revenue Sharing - 7/8/2008\",\"Drafter\":null,\"Reviewer\":null,\"Correspondent\":null,\"QAReviewer\":null,\"DocumentType\":\"Revenue Sharing\",\"DueDate\":null,\"DocumentID\":53202,\"RequestID\":0,\"SlipStatus\":\"Actual\",\"DocumentName\":\"Revenue Sharing - 7/8/2008\",\"TermsEffectiveDate\":\"2008-07-01T00:00:00\",\"DocumentStatus\":\"Document Requested\",\"RequestDate\":null,\"SlipCode\":\"2353\",\"RequestType\":\"Final\",\"RequestStatus\":\"In Process\"},{\"FilterId\":0,\"EmployeeID\":0,\"CedentName\":\"Sample Insurance Company (Trainee Department) (S2I)\",\"ContractName\":\"Revenue Sharing - 2/19/2009\",\"Drafter\":null,\"Reviewer\":null,\"Correspondent\":null,\"QAReviewer\":null,\"DocumentType\":\"Revenue Sharing\",\"DueDate\":null,\"DocumentID\":54109,\"RequestID\":0,\"SlipStatus\":\"Actual\",\"DocumentName\":\"Revenue Sharing - 2/19/2009\",\"TermsEffectiveDate\":\"2009-03-01T00:00:00\",\"DocumentStatus\":\"Document Requested\",\"RequestDate\":null,\"SlipCode\":\"2383\",\"RequestType\":\"Final\",\"RequestStatus\":\"In Process\"}],\"JsonRequestBehavior\":\"DenyGet\"}}", "text/javascript");
}

adelaney
Aug 28, 2012, 1:33 PM
I copied your sample exactly (well, converted to VB.NET) and still received the same error. I gave up. I created a separate store from the grid using only the Html.X code to create and configure the store, and I changed the Direct function to a StoreResult. That worked. I don't know why, and can't spend any more time to investigate. Either way, you can simply close the thread.

Daniil
Aug 28, 2012, 1:50 PM
We would be happy to investigate a test project if you will be able to provide use. If yes, please sent to:
support@object.net