Home Analyst Portal

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

Adrian_PaechAdrian_Paech Customer Advanced IT Monkey ✭✭✭
/*Customise Grid Control UI to Provide Better Feedback*/<br>$(window).load(function () {<br>&nbsp;&nbsp;&nbsp; if (document.URL.indexOf("ServiceCatalog/RequestOffering") === -1) { //Only worry about request offering forms<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return; <br>&nbsp;&nbsp;&nbsp; }<br>&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; //Get all objects that hold our kendo grids.<br>&nbsp;&nbsp;&nbsp; var divGridControls = $("div[data-control=checkboxGridByCriteriaOld");&nbsp;&nbsp;&nbsp; for (var i = 0; i < divGridControls.length; i++) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //Re-get this element as an object.<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var thisKendoGrid = $(divGridControls[i]).getKendoGrid();<br>&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;var selectSummaryID = "gridSelectSummary" + i;<br>&nbsp;&nbsp;thisKendoGrid.selectSummaryId = selectSummaryID;<br>&nbsp;&nbsp;<br>&nbsp;&nbsp;//Add Selection Summary Footer<br>&nbsp;&nbsp;var selectSummary_html = "<span id='" + selectSummaryID + "' class='gridSelectSummary'></span>";<br>&nbsp;&nbsp;thisKendoGrid.wrapper.find(".k-pager-info").parent().before(selectSummary_html);<br>&nbsp;&nbsp;<br>&nbsp;&nbsp;//Bind 'Change' event whenever a Grid item is selected.<br>&nbsp;&nbsp;thisKendoGrid.bind("change", function (e){<br>&nbsp;&nbsp;&nbsp;var thisEventKendoGrid = e.sender;<br>&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;/*html layout*/<br>&nbsp;&nbsp;&nbsp;var selectSummary = "<i>Selected:</i>";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;var entry_html_prefix = "<div class='gridSelectSummary-entity'>";<br>&nbsp;&nbsp;&nbsp;var entry_html_suffix = "</div>";<br>&nbsp;&nbsp;&nbsp;<br><b>&nbsp;&nbsp;&nbsp;/*get all selected items</b><br><b>&nbsp;&nbsp;&nbsp;this is what is not working correctly as it&nbsp;only ever returns 1 result.*/</b><br><b>&nbsp;&nbsp;&nbsp;var selectedRows = thisEventKendoGrid.select();</b><br><b>&nbsp;&nbsp;&nbsp;selectedRows.each(function(index, row) { </b><br><b>&nbsp;&nbsp;&nbsp;&nbsp;selectedRow = thisEventKendoGrid.dataItem(row);</b><br><b>&nbsp;&nbsp;&nbsp;&nbsp;var entry_name = selectedRow.DisplayName;&nbsp;&nbsp;&nbsp;&nbsp;</b><br><b>&nbsp;&nbsp;&nbsp;&nbsp;selectSummary = selectSummary + entry_html_prefix + " " + entry_name + " " + entry_html_suffix;</b><br><b>&nbsp;&nbsp;&nbsp;});</b><br>&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;/*Show selected Summary*/<br>&nbsp;&nbsp;&nbsp;$("#" + thisEventKendoGrid.selectSummaryId).html(selectSummary);<br>&nbsp;&nbsp;});<br>&nbsp;&nbsp;&nbsp; }<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>&nbsp;font-size: 0.86rem;<br>&nbsp;font-family: "PT Sans",sans-serif;<br>}</p><p>.gridSelectSummary-entity {<br>&nbsp;text-align: center; <br>&nbsp;margin: 12px; <br>&nbsp;border: 1px solid gray; <br>&nbsp;padding: 4px; <br>&nbsp;background-color: #f1f1f1; <br>&nbsp;display: inline-block;&nbsp;<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&nbsp;the user&nbsp;whenever they have&nbsp;changed their selection on the kendo grid list control within&nbsp;a request offering. (see <i>Selected: </i>tag in pic&nbsp;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>&nbsp;<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&nbsp;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>&nbsp;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>,&nbsp;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>

Best Answer

Answers

This discussion has been closed.