[Solved] Unexpected behavior with Grid Custom Command

[Frank Michael]

I have a custom command for the Grid

    Html.Telerik().Grid<RenderSprint>()
        .BindTo(Model)
        .Name("SprintGrid")
        .Localizable("de-DE") //ToDo Culture allgemein ersetzen
        .ToolBar(tb => {
            tb.Insert();
            tb.Custom().Action<SprintController>(sc => sc.AjaxAggregate()).Text("Aggregate");
        })
        .DataBinding(b => b.Ajax()

This is the implementation of the action:

[Authorize]
        [GridAction]
        public ActionResult AjaxAggregate()
        {
            PerformAggregation();

            // Redirect

            var bon = new BusinessObjectNode<Sprint>();

            var sprints = bon.Retrieve();

            var gridVd = new GridModel(sprints);

            return View(gridVd);
        }

The behavior I expected was, that if I press the button the spinner within the Grid (bottom left) would be spinning as long as the action is executed and the content refeshes as soon as the action is finished. But in fact the browser tab is spinning so as if I had server binding. This I did not expect.
In fact when I leave the page in this time and return to it, I get an exception within my normal retrieve action. You know - on page enter it is built with server binding, because that is what you proposed in the training videos.
So is my expectation with regards to the behavior wrong or should I implement anything different?

[Atanas Korchev]

Hello Frank Michael ,

Custom commands perform HTTP GET request - much like the ActionLink. They do not perform Ajax requests.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Frank Michael]

I see. Thank you.

Is this due to architectural limitations or concept reasons or is it maybe planned for the future? Is it thinkable?

[Atanas Korchev]

Hello Frank Michael ,

This is by design. Custom commands are currently not planned to perform Ajax requests.

Greetings,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Frank Michael]

.. but in theory I probably could do this:
1) catch the button event
2) preventDefault
3) send an AjaxRequest
4) On Reply rebind
Should that work?

[Atanas Korchev]

Hi Frank Michael ,

Yes, this should definitely work. You can use the HtmlAttributes of the custom command to assign a click handler and execute the required code there:

Custom().HtmlAttributes(new {onclick="clickHandler(event)"});

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Frank Michael]

I made some progress.

function onToolbarCustomButtonClick(e)
         {
             if (!e) var e = window.event;

             // e.preventDefault();

             var grid = $("#SprintGrid").data("tGrid");

             var target = e.target.href;
             if (!target) target = e.srcElement.href; // microsoft ie

             // call the Controller Action
             $.ajax({
                 url: target,
                 contentType: 'application/json; charset=utf-8',
                 type: 'GET',
                 dataType: 'jsonp',
                 error: function (xhr, status) {
                     alert(status);
                 },
                 // data: {
                 //    q: $('#searchText').val()
                 // },
                 success: function (result) {
                     grid.dataBind(result.results);
                 }
             });
         }

So far so good. I end up in the error routine. After debugging I found out this response:

Diese Anforderung wurde blockiert, da unter Umständen vertrauliche Informationen gegenüber Websites von Drittanbietern offengelegt werden, wenn dies in einer GET-Anforderung verwendet wird. Legen Sie "JsonRequestBehavior" auf "AllowGet" fest, um GET-Anforderungen zuzulassen.

This means, that the json request was blocked, because the JsonRequestBehavior was not set to allow for GET requests.

I had a similar error some weeks ago in a different scenario, where I manually create a Json result for an action.
This was the solution back then:

return Json(table, JsonRequestBehavior.AllowGet);

However in this scenario I can not apply this, because the Json conversion is done in the GridAction Filter. Probably I need to copy and modify the filter.

[Frank Michael]

I also have have a different problem.

First IE does not support the same event like Firefox.

The code looks like this:

function onToolbarCustomButtonClick(e)
         {
             if (!e) var e = window.event;

             e.preventDefault();

At least I am getting some event e in IE. But it does not support e.preventDefault();
If I leave it out, then I get:

Die Ansicht "AjaxAggregate" oder deren Master wurde nicht gefunden. Durchsuchte Orte:
~/Views/Sprint/AjaxAggregate.aspx
~/Views/Sprint/AjaxAggregate.ascx
~/Views/Shared/AjaxAggregate.aspx
~/Views/Shared/AjaxAggregate.ascx

quite naturally, because at the end of the action I return:

            var gridVd = new GridModel(vd.sprints);

            return View(gridVd);
        }

It now dawns to me that I do not understand this programming model.

In your example for Ajax databinding you write:

[GridAction]
        public ActionResult _AjaxBinding()
        {
            return View(new GridModel<Order>
            {
                Data = GetOrders()
            });
        }

But what does this mean? There is no View "_AjaxBinding.ascx" either.

[Frank Michael]

And a third problem is, that the grid seems to reload prematurely. As soon as the ajax request ist sent, seemingly it starts and completes a Select() that overtakes the custom ajax request. Does that make sense?

[Frank Michael]

Since the event I get does not support e.preventDefault, I was trying a different method:

            tb.Custom().Action<SprintController>(sc => sc.AjaxAggregate())
                    .Text("Aggregate")
                    .HtmlAttributes(new {name="custom-action-aggregate"})
                    //.HtmlAttributes(new {onclick="onToolbarCustomButtonClick(event)"})
                    ;

and

<% Html.Telerik().ScriptRegistrar()
            .OnDocumentReady(() => {
    %>
        $('.t-grid-select').live('click', function (e) {
            e.preventDefault();
            var grid = $("#SprintGrid").data("tGrid");
            var dataItem = grid.dataItem($(e.target).closest('tr'));
            var id = dataItem.RowKey;
            location.href = "/Sprint/Detail/" + id;
        });
        $('.custom-action-aggregate').live('click', function (e) {
             e.preventDefault();
             var grid = $("#SprintGrid").data("tGrid");
             var target = e.target.href;
             if (!target) target = e.srcElement.href; // microsoft ie
             $.ajax({
                 url: target,
                 contentType: 'application/json; charset=utf-8',
                 type: 'GET',
                 dataType: 'jsonp',
                 error: function (xhr, status) {
                     alert(status);
                 },
                 success: function (result) {
                     grid.dataBind(result.results);
                 }
             });
        });
<% }); %>

Doing this I was trying to "copy" the solution for the row Custom Select Button.
But $('.custom-action-aggregate') does not find the right element.

[Frank Michael]

This is my code now:

            tb.Custom().Action<SprintController>(sc => sc.AjaxAggregate())
                    .Text("Aggregate")
                    .HtmlAttributes(new {id="custom-action-aggregate"});

and

$("#custom-action-aggregate").live('click', function (e) {
             e.preventDefault();
             var grid = $("#SprintGrid").data("tGrid");
             var target = e.target.href;
             // if (!target) target = e.srcElement.href; // microsoft ie
             $.ajax({
                 url: target,
                 contentType: 'application/json; charset=utf-8',
                 type: 'POST',
                 // type: 'GET',
                 dataType: 'jsonp',
                 error: function (xhr, status) {
                     alert(status);
                 },
                 success: function (result) {
                     // grid.dataBind(result.results);
                     grid.dataBind(result);
                 }
             });
        });

The request and response is fine, but not bound to the grid. I can not break at grid.dataBind(result).
The request:

Host: 127.0.0.1:86
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; de; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 ( .NET CLR 3.5.30729; .NET4.0E)
Accept: text/javascript, application/javascript, */*
Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Content-Type: application/json; charset=utf-8
X-Requested-With: XMLHttpRequest
Referer: http://127.0.0.1:86/Sprint
Content-Length: 27
Cookie: .ASPXAUTH=7E23993EC339EBD3AF6FF9840FE1F2702DBA0D53D3DA2D4A3E044C6C9659EDEF07B89B6CB5D61ACC25718D3FFBBA7170A3D42BE228719AF666207C88A15F0CB98D99F860F5962EDBBB6B33D28ACEEC88
Pragma: no-cache
Cache-Control: no-cache

The response:

Cache-Control: private, s-maxage=0
Content-Type: application/json; charset=utf-8
Server: Microsoft-IIS/7.0
X-AspNetMvc-Version: 2.0
X-AspNet-Version: 2.0.50727
X-Powered-By: ASP.NET
Date: Thu, 06 May 2010 22:36:02 GMT
Content-Length: 6907

And the data:

{"data":[{"Title":"Beginn der Selbständigkeit","Description":null,"Date":"\/Date(1283299200000)\/","RemainingDays":777,"RemainingHours":5,"CreatedBy":"Frank","CreatedAt":"\/Date(1270652212947)\/","ChangedBy":"Frank","ChangedAt":"\/Date(1270822652384)\/","Timestamp":"\/Date(-62135596800000)\/","PartitionKey":"Frank","RowKey":"04db01e7-478c-4c1c-b484-e2eabaed62ca"},{"Title":"Provide Coaching Content for Workstream Portal","Description":"Lean Business Process Modelling\r\n\r\nEs ist eine spezielle Modellierungsmethode. \r\nDiese ist Top Down Modellierung into BOs - integriert. \r\nDas ist meine Methode. \r\nMit Hilfe von BPMN (Erweiterungen, wenn es sein muss).\r\nNicht alles von BPMN ist hilfreich. \r\nIch konzentriere mich auf das, was wirklich hilfreich ist. \r\nMit Modellverwaltung, Governance und Simulation / Coaching. \r\nEs muss FULL CYCLE COACHING sein. \r\nBPM -\u003e Choreography Model -\u003e Business Object -\u003e Multi Tenancy -\u003e System","Date":"\/Date(1301443200000)\/","RemainingDays":59,"RemainingHours":7.5,"CreatedBy":"Frank","CreatedAt":"\/Date(1254401318731)\/","ChangedBy":"Frank","ChangedAt":"\/Date(1270643992289)\/","Timestamp":"\/Date(-62135596800000)\/","PartitionKey":"Frank","RowKey":"0ab241d5-3ac3-425a-8415-d9c13456c36f"},{"Title":"Späteste Abgabe Antrag auf Gründungszuschuss (24.9.2010)","Description":null,"Date":"\/Date(1285286400000)\/","RemainingDays":1,"RemainingHours":0.5,"CreatedBy":"Frank","CreatedAt":"\/Date(1270643728510)\/","ChangedBy":"Frank","ChangedAt":"\/Date(1270822336253)\/","Timestamp":"\/Date(-62135596800000)\/","PartitionKey":"Frank","RowKey":"212a7911-7134-4e62-a504-c4d4924756a5"},{"Title":"Erste Workstream Platform Sales Präsentation für mögliche Pilotkunden","Description":"ACM - why many BPM Projects fail - Nachhaltiges Prozessmanagement / Sustainable Process Management","Date":"\/Date(1276992000000)\/","RemainingDays":5,"RemainingHours":3.5,"CreatedBy":"Frank","CreatedAt":"\/Date(1270822884021)\/","ChangedBy":"Frank","ChangedAt":"\/Date(1273134072541)\/","Timestamp":"\/Date(-62135596800000)\/","PartitionKey":"Frank","RowKey":"2dfdf30d-bd64-4d63-baf0-cd6ec477e809"},{"Title":"Ende Sommerferien / Pilotrelease: Fashion","Description":null,"Date":"\/Date(1281830400000)\/","RemainingDays":4,"RemainingHours":1,"CreatedBy":"Frank","CreatedAt":"\/Date(1270822417387)\/","ChangedBy":"Frank","ChangedAt":"\/Date(1272462713087)\/","Timestamp":"\/Date(-62135596800000)\/","PartitionKey":"Frank","RowKey":"321f03fc-7101-48de-8f8b-4512b3005f90"},{"Title":"Process Driven Workstream Portal auf PinPoint und Asperado veröffenlichen","Description":"i.\tProzess als BPMN Metamodell, aber mit MVC Classic Architektur. \r\nii.\tRückmeldewesen als Grundstock für Portfolio.\r\niii.\tMVC Classic Architektur beschreiben.","Date":"\/Date(1285804800000)\/","RemainingDays":59,"RemainingHours":0.5,"CreatedBy":"Frank","CreatedAt":"\/Date(1261057670698)\/","ChangedBy":"Frank","ChangedAt":"\/Date(1270639444089)\/","Timestamp":"\/Date(-62135596800000)\/","PartitionKey":"Frank","RowKey":"34d10875-018a-47fa-8513-4e61446d31f7"},{"Title":"Architektur und Usability Release","Description":null,"Date":"\/Date(1274313600000)\/","RemainingDays":18,"RemainingHours":0.75,"CreatedBy":"Frank","CreatedAt":"\/Date(1267094241727)\/","ChangedBy":"Frank","ChangedAt":"\/Date(1273133960427)\/","Timestamp":"\/Date(-62135596800000)\/","PartitionKey":"Frank","RowKey":"497f941f-4b32-4b7d-af43-78a7d6c72e9a"},{"Title":"Wichtige Private Erledigungen","Description":null,"Date":"\/Date(1273449600000)\/","RemainingDays":3,"RemainingHours":0.25,"CreatedBy":"Frank","CreatedAt":"\/Date(1265662933718)\/","ChangedBy":"Frank","ChangedAt":"\/Date(1273133943209)\/","Timestamp":"\/Date(-62135596800000)\/","PartitionKey":"Frank","RowKey":"68d4886b-a86a-4f0b-b713-39219febddf3"},{"Title":"Erste Schulung halten","Description":"Schulung: Improving Knowledge Work\r\nMDA und ERP?\r\n\r\n==\u003e Loosely coupled and tightly coupled processes\r\n==\u003e What is the difference between Tightly coupled processes and Loosely coupled processes?\r\n==\u003e Mastering Tightly coupled Processes\r\n==\u003e Mastering Loosely coupled Processes\r\n==\u003e Deciding when to use which.  \r\n","Date":"\/Date(1284508800000)\/","RemainingDays":25,"RemainingHours":0.5,"CreatedBy":"Frank","CreatedAt":"\/Date(1260821702517)\/","ChangedBy":"Frank","ChangedAt":"\/Date(1270822672773)\/","Timestamp":"\/Date(-62135596800000)\/","PartitionKey":"Frank","RowKey":"6b59435f-588c-48bd-9e27-47ec5e05b42f"},{"Title":"Funktionales und Optimierungsrelease","Description":null,"Date":"\/Date(1276128000000)\/","RemainingDays":15,"RemainingHours":1,"CreatedBy":"Frank","CreatedAt":"\/Date(1272441855389)\/","ChangedBy":"Frank","ChangedAt":"\/Date(1273133157078)\/","Timestamp":"\/Date(-62135596800000)\/","PartitionKey":"Frank","RowKey":"7e1a2ed0-230d-4145-9382-80c1ba2c3227"},{"Title":"Markterschließung","Description":null,"Date":"\/Date(1291161600000)\/","RemainingDays":22,"RemainingHours":7.5,"CreatedBy":"Frank","CreatedAt":"\/Date(1268997655552)\/","ChangedBy":"Frank","ChangedAt":"\/Date(1270822756156)\/","Timestamp":"\/Date(-62135596800000)\/","PartitionKey":"Frank","RowKey":"834306c6-59e3-45e0-a22c-880d75a8cc1b"},{"Title":"Einzug im TZL Büro","Description":null,"Date":"\/Date(1275350400000)\/","RemainingDays":1,"RemainingHours":4.5,"CreatedBy":"Frank","CreatedAt":"\/Date(1270822211248)\/","ChangedBy":"Frank","ChangedAt":"\/Date(1270822211248)\/","Timestamp":"\/Date(-62135596800000)\/","PartitionKey":"Frank","RowKey":"8d6f41b9-1bd0-456c-a39d-803ecb071405"},{"Title":"Anmeldung der Selbständigkeit","Description":"2 bis 4 Wochen\r\n\r\n1) Notar gründen. \r\n2) Bank\r\n3) Geld einzahlen 25.000 Euro\r\n4) Eintragung in das Handelsregister - bis dahin keine Ausgaben\r\n5) Finanzamt - Bogen ausfüllen Vorauszahlungen - rechnen mit einer 0","Date":"\/Date(1277942400000)\/","RemainingDays":13,"RemainingHours":0,"CreatedBy":"Frank","CreatedAt":"\/Date(1240096821000)\/","ChangedBy":"Frank","ChangedAt":"\/Date(1271521902629)\/","Timestamp":"\/Date(-62135596800000)\/","PartitionKey":"Frank","RowKey":"a0780000003wm0eAAA"},{"Title":"Umzug nach Stuttgart","Description":null,"Date":"\/Date(1309478400000)\/","RemainingDays":1,"RemainingHours":4,"CreatedBy":"Frank","CreatedAt":"\/Date(1253548836233)\/","ChangedBy":"Frank","ChangedAt":"\/Date(1253548836233)\/","Timestamp":"\/Date(-62135596800000)\/","PartitionKey":"Frank","RowKey":"c4b90fa0-047d-43f9-8a7d-202dd7656994"},{"Title":"Abgabe Business Plan beim TZL / Beginn Sommerferien","Description":null,"Date":"\/Date(1277942400000)\/","RemainingDays":19,"RemainingHours":2.5,"CreatedBy":"Frank","CreatedAt":"\/Date(1270644844466)\/","ChangedBy":"Frank","ChangedAt":"\/Date(1270822449338)\/","Timestamp":"\/Date(-62135596800000)\/","PartitionKey":"Frank","RowKey":"f9221ae3-ac5e-45e8-8f79-5a55bd0215ed"}],"total":15}

I am not sure if I should use GET or POST. Probably POST. Both does not work.