This is a migrated thread and some comments may be shown as answers.

Grid Functions in Javascript Files

3 Answers 296 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 30 Jul 2015, 08:13 AM

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");
    })
)

3 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 03 Aug 2015, 06:38 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Chris
Top achievements
Rank 1
answered on 18 Aug 2015, 08:29 AM

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.

0
Rosen
Telerik team
answered on 18 Aug 2015, 12:41 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Chris
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Chris
Top achievements
Rank 1
Share this question
or