Grid Events

The Portal Connector offers several page widgets that allow you to display lists of records. The most commonly used one is the Grid. A common question asked on the daily Q&A session is how to format specific cells based on the value it contains.

We have always recommended using one of the events the grid fires right before it displays the data called "DataBound". In order to use this event, you would need to write code to perform the desired actions on the data then manually tie into the event in javascript. Once written, you needed to write additional code to attach to the DataBound event. The Grid widget actually contains properties that allow you to specify the event handler name and The Portal Connector automatically wires up the handler to the grid. This eliminates the need to manually wire up the event.

---

Available Events

In addition to the DataBound event mentioned above, the grid contains more than 20 other events that fire when various things happen like filtering, grouping, paging and sorting. The events are:

All of these events have an advanced property that allows you to set a JavaScript function name to handle the event. In this post, we won't cover any of these events in depth, this post is intended to show how to set handlers for these events. Actual information of what these events actually do are documented here: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events

---

Adding Event Handlers to a Grid

To add event handlers to a grid, we need to take the following steps:

• Create a page with a grid on it.
• Add a Script widget to the page.
• Add event handler code to the Javascript widget.
• Configure the Grid widget to use the handlers.

Let's start by opening a page with a Grid on it for editing in the Sitefinity backend. We won't cover creating a page or basic configuration of a grid, those topics are covered by existing documentation as well as training materials. After the page is open, find and open the the "Scripts and Styles" section in the sidebar to the right and drag a "JavaScript" widget onto the page. Click the "Edit" link to open the designer for the newly added script widget. Once opened, paste the following code into the provided text area:

function DataBindingHandler(e) {

    console.log("DataBinding");

    console.log(e);

}



function DataBoundHandler(e) {

    console.log("DataBound");

    console.log(e);

}



function FilterHandler(e) {

    console.log("Filter");

    console.log(e);

}



function PageHandler(e) {

    console.log("Page");

    console.log(e);

}



function SortHandler(e) {

    console.log("Sort");

    console.log(e);

}

Before saving, click the "More Options" section at the bottom of the designer and select "Before the closing body tag" then click "Save".



Next, open the the designer of a Grid widget and click on the "Advanced" button.

 

• Scrolling down, you will find a button labelled "GridSettings".
• Clicking it and scrolling down again, you will find another button labelled "GridEvents".
• Clicking it will open a list of events with fields to set handlers as seen in the following image:
  
  
  
  
• Find the following fields, and add the specified handler name to the text box:
  • DataBinding -> DataBindingHandler
  • DataBound -> DataBoundHandler
  • Filter -> FilterHandler
  • Page -> PageHandler
  • Sort -> SortHandler
• Once set, save the Grid widget and then publish the page.

Now that the page is configured as needed, navigate to it on the front end. After it loads, open the Developer console of your web browser using the F12 key. You should see something similar to the following image, depending on the browser you are using. You may need to click on the "Console" tab to open the console window.

With the console open, clicking a Grid column header will fire the "Sort" event. This will call the "SortHandler" function we set and you should see something like this:

You might notice that not only did the "Sort" event handler fire, logging the event data to the console, but the "DataBinding" and "DataBound" events fired as well. This is because the data source changed (by changing the sort order) which caused the Grid to fire these events to display the newly sorted data. Filtering and Paging will also fire these additional events.

The ability to easily set event handlers on a grid allows for easier implementation of custom actions triggered by grid events. While wiring events manually does still work, we recommend doing it this way to be sure the handlers are always wired correctly.

As always, feel free to contact us at support@crmportalconnector.com if you have any questions about this or anything else Portal Connector related.