Am Stuck with RO Grid Control UI Customisation. Please Help..
Adrian_Paech
Customer Advanced IT Monkey ✭✭✭
/*Customise Grid Control UI to Provide Better Feedback*/<br>$(window).load(function () {<br> if (document.URL.indexOf("ServiceCatalog/RequestOffering") === -1) { //Only worry about request offering forms<br> return; <br> }<br> <br> //Get all objects that hold our kendo grids.<br> var divGridControls = $("div[data-control=checkboxGridByCriteriaOld"); for (var i = 0; i < divGridControls.length; i++) { <br> //Re-get this element as an object.<br> var thisKendoGrid = $(divGridControls[i]).getKendoGrid();<br> <br> var selectSummaryID = "gridSelectSummary" + i;<br> thisKendoGrid.selectSummaryId = selectSummaryID;<br> <br> //Add Selection Summary Footer<br> var selectSummary_html = "<span id='" + selectSummaryID + "' class='gridSelectSummary'></span>";<br> thisKendoGrid.wrapper.find(".k-pager-info").parent().before(selectSummary_html);<br> <br> //Bind 'Change' event whenever a Grid item is selected.<br> thisKendoGrid.bind("change", function (e){<br> var thisEventKendoGrid = e.sender;<br> <br> /*html layout*/<br> var selectSummary = "<i>Selected:</i>"; <br> var entry_html_prefix = "<div class='gridSelectSummary-entity'>";<br> var entry_html_suffix = "</div>";<br> <br><b> /*get all selected items</b><br><b> this is what is not working correctly as it only ever returns 1 result.*/</b><br><b> var selectedRows = thisEventKendoGrid.select();</b><br><b> selectedRows.each(function(index, row) { </b><br><b> selectedRow = thisEventKendoGrid.dataItem(row);</b><br><b> var entry_name = selectedRow.DisplayName; </b><br><b> selectSummary = selectSummary + entry_html_prefix + " " + entry_name + " " + entry_html_suffix;</b><br><b> });</b><br> <br> /*Show selected Summary*/<br> $("#" + thisEventKendoGrid.selectSummaryId).html(selectSummary);<br> });<br> }<br>});</code></div><div><code></code></div><div><code><p></p><p><u><b></b></u></p><p><u><b><br></b></u></p><p><u><b>Custom.css code (required in order to view results):</b></u></p><p>/* Grid Select Summary Layout */<br>.gridSelectSummary {<br> font-size: 0.86rem;<br> font-family: "PT Sans",sans-serif;<br>}</p><p>.gridSelectSummary-entity {<br> text-align: center; <br> margin: 12px; <br> border: 1px solid gray; <br> padding: 4px; <br> background-color: #f1f1f1; <br> display: inline-block; <br>}</p></code></div><div><code></code></pre>Hi all,<p></p><p>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 :).</p><p></p><p>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 <i>Selected: </i>tag in pic below).</p><p>Am essentially trying to put in a work around until the following feature request is accepted (fingers crossed):<br><a title="Link: https://community.cireson.com/discussion/1101/improve-user-interface-for-ro-query-results-object-picker#latest" href="https://community.cireson.com/discussion/1101/improve-user-interface-for-ro-query-results-object-picker#latest" target="_blank" rel="nofollow">https://community.cireson.com/discussion/1101/improve-user-interface-for-ro-query-results-object-picker#latest</a> </p><p> <img width="793" height="446" title="Image: https://us.v-cdn.net/6026663/uploads/editor/1u/r7cmjbdcgym0.png" alt="" src="https://us.v-cdn.net/6026663/uploads/editor/1u/r7cmjbdcgym0.png"></p><p></p><p>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. <i>(in other words, </i><span><i>thisEventKendoGrid.select(); only ever returns 1 result).</i><br></span>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 <i>selected:</i> tag. As you can see above, its only ever showing one result, where I want to list all results.</p><p>The only forum I could find where someone had a similar issue with a kendo control is the following:<br><a title="Link: http://www.telerik.com/forums/grid-select" href="http://www.telerik.com/forums/grid-select">http://www.telerik.com/forums/grid-select</a>, however I cant quite make sense of how to apply this fix to my custom.js code.</p><p>My code is below. I have bolded the area of the code where I am not getting the expected results. Hopefully someone can help :)</p><p>Adrian</p><p></p><p></p><p><b>Custom.js code:</b></p><div><code>
0
Best Answer
-
Adrian_Paech
Customer Advanced IT Monkey ✭✭✭
Had to put a workaround in to get this working.
Have uploaded the solution for others if they are interested:
Cheers,
Adrian
6
This discussion has been closed.
Answers
Had to put a workaround in to get this working.
Have uploaded the solution for others if they are interested:
https://community.cireson.com/discussion/1167/download-improve-ui-on-request-offering-grid-picker/p1?new=1
Cheers,
Adrian