Current filter:
                                You should refresh the page.
                                  • I'd like to use a dxPopover inside a cell template on a dxDataGrid in order to display extra content specific to that row. I've done quite a bit of searching on Google and your site and haven't found any examples. Can you point me to a good example of how to do this? The only examples I have found do not nest the dxPopover inside a grid but instead show one or a few on a page.
                                • Marion (DevExpress Support) 05.25.2016
                                  Hello Kirk,

                                  Your scenario is not entirely clear to me. Why do you want to put dxPopover inside a grid cell rather than outside it? Please take a look at the following example:
                                  http://jsfiddle.net/o8g0uzmz/1/
                                  Does this solution meet your requirements? 

                                • Kirk Wilson 1 05.25.2016
                                  My question wasn't about the dxPopup. It was about he dxPopover. I can find lots of articles on how to use a dxPopup from the cellclick of a celltemplate. However, I want to use the Popover to show data when you hover over the cell not when you click the cell.

                                  Your fiddle gets me a little closer. If I'm reading it correctly, I should have one popover on the page and should load the content dynamically. Is that correct? I assume from this article and this article that I should use some variation of cellHoverChanged. Is it safe to assume that I would replace the onCellClick in your example with onCellHoverChanged or is there some other even that I should use? 
                                • Marion (DevExpress Support) 05.25.2016
                                  Kirk,

                                  If you wish to show a single popover at a time, it is better to have a single popover on a page. You are correct; to handle when the mouse is over a cell, use the onCellHoverChanged event.

                                • Kirk Wilson 1 05.25.2016
                                  I'm still confused about how to load the "extra" data into the popover. The closest I can get to making this work using onCellHoverChanged is the last code block below. Is there an option for hover using the on syntax like in this article or this article? Is there a hover equivalent to dxclick? Something like the dxhover I used to replace dxclick in the code below. 
                                  [JavaScript]
                                  columns: ['firstName', 'lastName', 'sex', { width: 100, alignment: 'center', cellTemplate: function (container, options) { $('<a/>').addClass('dx-link') .text('details') .on('dxhover', function () { $("#popup").dxPopup("instance").show(); $("#txt").dxTextArea("instance").option("value", options.data.firstName); }).appendTo(container); } }]

                                  All I want to do is display a popover showing content specific to the row when you hover over a specific cell in the grid. 
                                  Here is my most recent attempt: 

                                  HTML
                                  [HTML]
                                  <div id="gridContainer"></div> <div id="popover3" dx-popover="withAnimationOptions"> 2012 Sales Report has to be completed so we can determine if major changes are required to sales strategy. </div>
                                  JS

                                  [JavaScript]
                                  $scope.withAnimationOptions = { target: "#link3", position: "top", width: 300, animation: { show: { type: "pop", from: { scale: 0 }, to: { scale: 1 } }, hide: { type: "fade", from: 1, to: 0 } }, visible: false }; $("#gridContainer") .dxDataGrid({ dataSource: { store: { type: "array", key: "ID", data: employees } }, columns: [ { dataField: 'ID' }, { dataField: 'FirstName' }, { dataField: 'LastName' }, { dataField: 'Address' }, { dataField: 'City' }, { dataField: 'State' }, { dataField: 'State', captoin: "details", cellTemplate: function(container, options) { $('<a id="link3" />') .addClass('dx-link') .text(options.data.State) .attr('href', '#/' + options.data.ID) .on('hover', alert('testing')) .appendTo(container); } } ], onCellHoverChanged: function (hoverCell) { if (hoverCell.eventType === 'mouseover') { //alert('entering cell '); $("#link3") .unbind() .hover(function () { $("#popover3").dxPopover("instance").toggle(); }); //$("#popup") // .dxPopup({ // width: 600, // height: 400, // contentTemplate: function (contentElement) { // $("<div />") // .addClass("drill-down") // .dxTextBox({ // text: "some content" // }) // .appendTo(contentElement); // } // }) // .dxPopup("instance"); //hoverCell.cellElement.addClass('hovered'); } //else //hoverCell.cellElement.removeClass('hovered'); } }); var employees = [ { "ID": 1, "FirstName": "John", "LastName": "Heart", "Address": "351 S Hill St.", "State": "California", "City": "Los Angeles" }, { "ID": 2, "FirstName": "Jim", "LastName": "Smith", "Address": "231 Main St.", "State": "California", "City": "Los Angeles" } ];


                                • Kirk Wilson 1 05.25.2016
                                  I'm very close to having a solution. I completely got rid of the dxPopover and am instead just using a Bootstrap popover. However, as you can see from the attached image, the popover gets cut off by the dxDataGrid. Is there a setting on the grid that I can use to make the popover show over the grid? I've tried setting the z-index of the popover to 10000 but it doesn't make any difference. 


                                  Here is my almost working code:
                                  [HTML]
                                  <script type="text/javascript"> var myApp = angular.module('myApp', ['dx']); myApp.controller("defaultCtrl", function($scope) { var employees = [ { "ID": 1, "FirstName": "John", "LastName": "Heart", "Address": "351 S Hill St.", "State": "California", "City": "Los Angeles" }, { "ID": 2, "FirstName": "Jim", "LastName": "Smith", "Address": "231 Main St.", "State": "California", "City": "Los Angeles" } ]; $("#gridContainer") .dxDataGrid({ dataSource: { store: { type: "array", key: "ID", data: employees } }, columns: [ { dataField: 'ID' }, { dataField: 'FirstName' }, { dataField: 'LastName' }, { dataField: 'Address' }, { dataField: 'City' }, { dataField: 'State' }, { dataField: 'State', captoin: "details", cellTemplate: function (container, options) { $('<a>Popover ' + options.data.State + '<div class="my-popover-content">Here ' + options.data.State + '</div></a>') .addClass('panel-link dx-link') .attr('href', '#') .appendTo(container); } } ] }); }); $(document) .ready(function () { setTimeout(doSomething, 2000); }); function doSomething() { var popoverOptions = { content: function () { return $(this).children('.my-popover-content').html(); }, trigger: 'hover', animation: false, placement: 'bottom' }; $('.panel-link').popover(popoverOptions); } </script> <style> .panel-link { } .my-popover-content { display:none; } .popover { z-index: 10000; } </style> </head> <body ng-controller="defaultCtrl"> <div class="container"> <div id="gridContainer"></div> </div> </body> </html>



                                2 Solutions

                                Creation Date Importance Sort by
                                Here is the final solution that uses the dxPopover by using data from the current row in the grid. I hope this helps someone else.

                                [HTML]
                                <div id="searchGridContainer" dx-data-grid="searchDataGridOptions" style="margin-top: 60px;"></div> <div id="popup"></div>

                                [JavaScript]
                                var popup = $("#popup").dxPopover({ width: 300, height: 200 }).dxPopover("instance"); var searchGridDataSource = { key: "ShipmentID", load: function (loadOptions) { var d = $.Deferred(); $.getJSON("/Order/ShipmentSearch/?shipmentStatusID=" + 101 ) .done(function (result) { //alert("done"); d.resolve(result, { totalCoult: result.totalCount }); }); return d.promise(); } }; $scope.searchDataGridOptions = { dataSource: searchGridDataSource, columns: [ { dataField: 'ShipmentID', visible: false }, { dataField: 'ShipmentNumber'}, { dataField: 'ShipDate', caption: 'Ship Date', width: 100, dataType: 'date' }, { dataField: 'DeliveryDate', caption: 'Del. Date', width: 100, dataType: 'date' }, { dataField: 'Origin', caption: 'Origin', width: '15%', minWidth: 150 }, { dataField: 'Destination', caption: 'Destination', width: '15%' }, { dataField: 'LimitingPercent', caption: 'Percent Full', dataType: 'integer', width: 100, allowFiltering: false, allowSorting: true, cellTemplate: function (container, options) { $('<div class="progress progress-striped panel-link" ><div class="progress-bar ' + (options.value < .7 ? "progress-bar-success" : (options.value < 1 ? "progress-bar-warning" : "progress-bar-danger")) + '" style="width: ' + options.value * 100 + '%;">' + options.value * 100 + '%</div>' + '</div>') .appendTo(container); } } ], onCellHoverChanged: function(e) { if (e.column.dataField === "LimitingPercent") { popup.option("contentTemplate", function(contentElement) { $("<div style='font-weight: bold;'/>") .append('Pallets: ' + e.data.TotalPallets + ' of ' + e.data.MaxPallets + '<div class="progress progress-striped panel-link" ><div class="progress-bar ' + (e.data.PalletsFullPercent < .7 ? "progress-bar-success" : (e.data.PalletsFullPercent < 1 ? "progress-bar-warning" : "progress-bar-danger")) + '" style="width: ' + e.data.PalletsFullPercent * 100 + '%;">' + e.data.PalletsFullPercent * 100 + '%</div>' + '</div>' + 'Weight: ' + e.data.TotalWeight + ' of ' + e.data.MaxWeight + '<div class="progress progress-striped panel-link" ><div class="progress-bar ' + (e.data.WeightFullPercent < .7 ? "progress-bar-success" : (e.data.WeightFullPercent < 1 ? "progress-bar-warning" : "progress-bar-danger")) + '" style="width: ' + e.data.WeightFullPercent * 100 + '%;">' + e.data.WeightFullPercent * 100 + '%</div>' + '</div>') .appendTo(contentElement); }); popup.option("target", e.cellElement); popup.show(); } } };


                                • Marion (DevExpress Support) 05.27.2016
                                  Kirk,
                                  Thank you for sharing your solution with us and other customers. 
                                  If you need any further assistance, feel free to contact us.
                                Kirk,

                                The onCellHoverChanged event provides a lot of parameters that you can use to obtain grid data and then show it in dxPopover. For example:

                                http://jsfiddle.net/o8g0uzmz/3/
                                [JavaScript]
                                onCellHoverChanged: function(e) { if (e.column.dataField == "FirstName") { popup.option("contentTemplate", function(contentElement) { $("<div/>") .append(e.text) .appendTo(contentElement); }); popup.option("target", e.cellElement); popup.show(); } }

                                Does this solution meet your requirements?

                                • Kirk Wilson 1 05.26.2016
                                  That's very close but how do I get the value out of a field that is not referenced by a column or from a hidden column? I need to display information that is NOT in the column, not just repeat the same information that they can already see. 
                                • Kirk Wilson 1 05.26.2016
                                  I figured out how to get data from another field: 

                                  [JavaScript]
                                  , onCellHoverChanged: function(e) { if (e.column.dataField === "FirstName") { popup.option("contentTemplate", function(contentElement) { $("<div/>") .append('<div>' + e.data.City + '</div>') .appendTo(contentElement); }); popup.option("target", e.cellElement); popup.show(); } }