Loading...

RE: Custom Action in Toolbar of QlistView trigerring JavaScript

RE: Custom Action in Toolbar of QlistView trigerring JavaScript

#5431
Anonymous
Anonymous
Participant

Hi

QuickApps allow users to extend the default behavior by implementing custom action classes that can be plugged into the system and configure to use and attached to UI (context menu or toolbar button). The QuickApps installation comes with sample C# solution/project that illustrates how to develop custom actions to perform server side processing. Once you are done with developing the custom code, deploy to your SharePoint environment, and configure Web Part's Action or Custom Action property to associate it as "Custom" action. When you click on the associated UI (menu or button), your custom logic will be executed.

In this particular case where you would like to use client JavaScript function rather than implementing and extending custom action, this is also possible with some workarounds.

First, you would still need to define your toolbar button, providing button text, whether to perform validation or not and etc. But do not add any pre-built action classes or specifying your own custom action classes. This will allow the web part to render the button for you but not to execute any server side code. The rest will need to be taken care of from client side using JavaScript.

For example, on the same page, drop a Script Editor (under Media and Content web part category) or HTML Form Web Part (under Form category) so you may inject custom JavaScript and modify the HTML Form Web Part source to include some JavaScript function, which allows you to locate the button and attach onclick event so it can take over the execution of your custom JavaScript function to do whatever you would like.

Here is the code snippet (using jquery in this case):

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
  function loadButton() {
    // as a workaround as currently even if you specify ID for the custom action item
    // the ID is not attached to the UI element, so you will have to come up with your
    // own jquery selector to locate the custom action button/menu
    $('a.rmRootLink').click(function(evt) {
      evt.preventDefault();
      alert("Run my function...");
    });
  };

  loadButton();

</script>

To get to the selected items from client JavaScript, I would recommend that you check out Telerik ASP.NET Controls RadGrid and its client side API. Below is the little script just to illustrate the idea (you can put after the alert statement in the above script):

// an alternative way to get the RadGrid client id
var divid = $('div.RadGrid').attr('id');
var grid = $find(divid);
// use Telerik javascript client API
var MasterTable = grid.get_masterTableView();
// if we have at least one row in grid selected
if(MasterTable.get_selectedItems().length>0) {
   // get the DataKeyValue of selected item
   var dataKeyValue = MasterTable.get_selectedItems()[0].getDataKeyValue("ID");
   // print out the selected list item ID
   alert(dataKeyValue);
}

I hope this helps.