Client side event documentation

[Joe]

I can't find any detailed documentation on client-side events so I will just post my issues as they come up. I have several issues with the grid events.

1. In the Telerik grid, there was an OnComplete event. What is the Kendo grid equivalent?
2. In the Edit client event:
   1. How do you determine the mode (add or edit)? In the telerik grid it was simply e.mode.
   2. How do you determine if the cancel click event on the edit form came from the edit or insert mode? In the Telerik grid I could do this:    

    $(e.form).find(".t-grid-cancel").click(function () {

 

    if (e.mode == "insert") {

       //do insert cancel cleanup code

    }

 

});

 
                3. What is the Kendo equivalent of this:                    

$(e.form).find(".t-grid").data("tGrid").ajaxRequest({ InventoryItemId: key });

 

    3. In the Save client event, what would be the equivalent of this code for Kendo?

e.values.inventoryItemId = key;

I think that is enough to start with..

Thanks in advance for any help!

[Atanas Korchev]

Hi Joe,

 The Kendo Grid event documentation can be found here: http://docs.kendoui.com/api/web/grid#events 
 
  You can subscribe to events from the MVC wrapper like this:

.Events(e => e.Save("onSave").Edit("onEdit"))

 Up to your questions:

1. There is no direct equivalent of the OnComplete event. Could you please tell us what code were you running there?
2. You can use the model field of the edit event arguments and call its isNew method. If it returns true then you are in "insert" mode.
      

   var insertMode = e.model.isNew();

3. Use your existing code combined with the previous suggestion
4. The equivalent is this:
   

   this.dataSource.read({ InventoryItemId: key });

5. The equivalent is this:
   

   e.model.set("inventoryItemId", key);

I hope this helps,
Atanas Korchev
the Telerik team

[Joe]

Thank you very much for the reply, it has been very helpful.

I do know where the documentation is, it is just that it is kind of lacking. I see how the events are all documented and the API but there is no documentation on what the "e" parameter gives you in the various api calls or events. This would be very helpful as it is painstaking to try and inspect it at runtime for what you need. Other than that, it has been very helpful in at least finding out what events are available and what api calls are available.

For the "OnComplete" event I was using it to pop up a details window when a custom command button was clicked (this was from one of the Telerik MVC examples). I have found the exampe for Kendo on showing a details popup and have figured out how to use that to get what I need so the OnComplete event is no longer needed.

All your other answers were very helpful, thank you so much! My only problem is that I am still unable to subscribe to the "Cancel" button click event. I am doing it in my edit event and the code is as follows:

function master_edit(e) {

             

    $(e.form).find(".k-grid-cancel").click(function () {

 

        var insertMode = e.model.isNew();

 

        if (insertMode) {

        var urlPath = '@Url.Content( @"~\CatalogAdministration\RemoveBlankInventoryItem?inventoryItemId=")';

        urlPath += key;

 

        $.post(urlPath);

        }

 

    });

 

    this.dataSource.read({ InventoryItemId: key });

 

}

The function that is assigned never fires (controller action RemoveBlankInventoryItem is never hit). Am I hooking up to this event incorrectly?

Thanks again!

[Atanas Korchev]

Hello Joe,

 Could you show us any events that lack event argument documentation? In some cases there is just no data passed in the event arguments.

 As for the cancel command I believe the problem stems from the fact that e.form is undefined. The event argument is now called container. This is mentioned in the edit event documentation. You could try changing your code to


$(e.container).find(".k-grid-cancel").click(function () {

 

        var insertMode = e.model.isNew();

 

        if (insertMode) {

        var urlPath = '@Url.Content( @"~\CatalogAdministration\RemoveBlankInventoryItem?inventoryItemId=")';

        urlPath += key;

 

        $.post(urlPath);

        }

 

    });

Regards,
Atanas Korchev
the Telerik team

[Joe]

Well, one example would be the event I am currently working with, the grid.Edit event. I have yet to find somewhere that defines some common things you can do with the event argument or really anything about the event argument - such as capturing the cancel event, determining edit mode etc. I followed your link to the edit event and that is exactly what I am talking about. It shows you how to capture the event and create the client-side function, but inside all of the functions you just have a comment that says "Handle event here". It would be way more helpful if you actually showed us some examples of common things done when the event occurs rather than just a comment. I realize that these are fairly new controls though and that hopefully the documentation will become better over time. I know on the Telerik side there is rarely something I can't find in the documentation or forum posts and I am sure these controls will get there over time as well.

On to your solution... this works great if the Cancel button is actually clicked but on the Telerik side it would also capture if the popup window was closed by hitting the X in the upper right hand corner. This is not the case with the Kendo grid. Is there a way to also capture when the form was closed due to the user hitting the X in the window?

Thanks!

[Atanas Korchev]

Hello Joe,

 Here is how to handle the window close button as well:

$(e.container).find(".k-grid-cancel").add($(e.container).parent().find(".k-i-close")).click(function(e) {
       // event handler code
 });

Regards,
Atanas Korchev
the Telerik team

[Joe]

Awesome, thank you! That actually handles both the Canel button click and the closing of the window through the "X". Excellent.
Thanks again!

[Joe]

Awesome, thank you! That actually handles both the Canel button click and the closing of the window through the "X". Excellent.
Thanks again!

[suman]

in telerik grid we can add Client side events with ClientEvents, onLoad event can be added with this.

Is there any equivalent to this for kendo grid?

Reply would be appreciated