Grid Functions in Javascript Files

[Chris]

I would like to create certain functions that can be called by Grids (and other widgets for that matter), not in the Grid's view, but an associated Javascript file so that multiple views can use them.

I have included an example below.

If it was included in the View, then I can use 'this', but I don't believe that works in a separate JavaScript file.

Independent JavaScript File

// Draw Contract Overview Grid Charts
function updateGridRows(e) {
     // need to get calling Grid / GridName here

               var gridName = ???;

     var grid = $("#" + gridName).data("kendoGrid");

     // update grid rows .....

} 

Calling Grid View (of which there are others)

    @(Html.Kendo().Grid<ContractModel>()
    .Name("ContractGrid")

      // columns .....

    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("ReadContractGrid", "Home").Data("getDataSourceParameters"))
        .Update(update => update.Action("UpdateContract", "​Contracts"))
        .Model(model =>
        {
            model.Id(contract => contract.ID);
        })
    )
    .Events(e =>
    {
        e.DataBound("updateGridRows");
    })
)

[Rosen]

Hello Chris,

Indeed, using a function in such way is possible. However, it will require attaching the handler in slighting different way - using a inline function in which to capture the grid's name. Similar to the following:

   .Events(events => events.DataBound(@<text>
        function(e) {
            updateGridRows.call(this, e, "gridName");
        }
    </text>))

<script type="text/javascript">
    function updateGridRows(e, gridName) {
       //....
    }
</script>

Another approach will be to use the sender passed as an event data of the handler:

function updateGridRows(e) {
      var grid = e.sender;
}

Regards,
Rosen
Telerik

 

 

[Chris]

Thanks Rosen.

If I call it from a Custom Command column, then in the second option, sender is not available.

I have tried the first option, but that is not sending through e. Is this the correct form?

 columns.Command(command =>
            {
                command.Custom("Team")
                    .Click("showProjectTeam(this, e, '" + gridName + "')");
            });

 

Thanks,

 

Chris.

[Rosen]

Hello Chris,

Note that the click configuration (similar as with the events) expects a reference to a function not the function call as in the code you have pasted.

The column.command.click handler does not have the e.sender as it is a "regular" click handler, thus the argument is jQuery Event. However, the function will be executed in the context of the Grid widget - the this of the function will be the Grid widget. For example:

command.Custom("Team").Click("showProjectTeam");

 

 

<script>

function showProjectTeam(e) {

   var grid = this;
     //do something here...

}

</script>

Regards,
Rosen
Telerik