IT Monkey:   Click Here to Help Me Build the Agenda for Upcoming Cireson Webinars!

Am Stuck with RO Grid Control UI Customisation. Please Help..

Adrian_PaechAdrian_Paech Customer Advanced IT Monkey ✭✭✭
Hi all,

I am so close to getting a nice customisation working regarding the request offering grid control object picker, but I am stuck with one little issue. I'm hoping someone can figure it out :).

Essentially, I am trying to provide feedback to the user whenever they have changed their selection on the kendo grid list control within a request offering. (see Selected: tag in pic below).

Am essentially trying to put in a work around until the following feature request is accepted (fingers crossed):
https://community.cireson.com/discussion/1101/improve-user-interface-for-ro-query-results-object-picker#latest

 

So it all works great, but whenever the change event is called, and I reference back to the selected items, it only ever returns back the last selected item. (in other words, thisEventKendoGrid.select(); only ever returns 1 result).
What I'm looking to do is be able to retrieve all of the selected items from the multiselector grid control whenever the change event is triggered, so that I can list all selected items next to selected: tag. As you can see above, its only ever showing one result, where I want to list all results.

The only forum I could find where someone had a similar issue with a kendo control is the following:
http://www.telerik.com/forums/grid-select, however I cant quite make sense of how to apply this fix to my custom.js code.

My code is below. I have bolded the area of the code where I am not getting the expected results. Hopefully someone can help :)

Adrian

Custom.js code:

/*Customise Grid Control UI to Provide Better Feedback*/
$(window).load(function () {
    if (document.URL.indexOf("ServiceCatalog/RequestOffering") === -1) { //Only worry about request offering forms
        return;
    }
   
    //Get all objects that hold our kendo grids.
    var divGridControls = $("div[data-control=checkboxGridByCriteriaOld");
    for (var i = 0; i < divGridControls.length; i++) {       
        //Re-get this element as an object.
        var thisKendoGrid = $(divGridControls[i]).getKendoGrid();
    
  var selectSummaryID = "gridSelectSummary" + i;
  thisKendoGrid.selectSummaryId = selectSummaryID;
  
  //Add Selection Summary Footer
  var selectSummary_html = "<span id='" + selectSummaryID + "' class='gridSelectSummary'></span>";
  thisKendoGrid.wrapper.find(".k-pager-info").parent().before(selectSummary_html);
  
  //Bind 'Change' event whenever a Grid item is selected.
  thisKendoGrid.bind("change", function (e){
   var thisEventKendoGrid = e.sender;
   
   /*html layout*/
   var selectSummary = "<i>Selected:</i>";      
   var entry_html_prefix = "<div class='gridSelectSummary-entity'>";
   var entry_html_suffix = "</div>";
   
   /*get all selected items
   this is what is not working correctly as it only ever returns 1 result.*/
   var selectedRows = thisEventKendoGrid.select();
   selectedRows.each(function(index, row) {
    selectedRow = thisEventKendoGrid.dataItem(row);
    var entry_name = selectedRow.DisplayName;    
    selectSummary = selectSummary + entry_html_prefix + " " + entry_name + " " + entry_html_suffix;
   });
   
   /*Show selected Summary*/
   $("#" + thisEventKendoGrid.selectSummaryId).html(selectSummary);
  });
    }
});

Custom.css code (required in order to view results):/* Grid Select Summary Layout */
.gridSelectSummary {
 font-size: 0.86rem;
 font-family: "PT Sans",sans-serif;
}.gridSelectSummary-entity {
 text-align: center;
 margin: 12px;
 border: 1px solid gray;
 padding: 4px;
 background-color: #f1f1f1;
 display: inline-block; 
}

Best Answer

Answers

This discussion has been closed.