jQuery UI Widgets › Forums › Grid › Validation Popup
Tagged: angular grid, Cell, css, grid, jquery grid, jqxgrid, jqxTooltip, message, offset, pop-up, position, Tooltip, validate, validation, validation popup css overrides
This topic contains 4 replies, has 2 voices, and was last updated by nja 9 years, 2 months ago.
Viewing 5 posts - 1 through 5 (of 5 total)
-
AuthorValidation Popup Posts
-
Hi there,
Is it possible to change the position of the validation popup through CSS?
I am trying to validate the first column of my grid and the popup is off to the left (left: -181px;) and doesn’t show.
/*<div class=" .jqx-grid-validation jqx-grid-validation-office jqx-rc-all jqx-rc-all-office*/ .jqx-grid-validation { z-index: 99999; top: 0px; left: 50px; position: absolute; }The validation code is pretty simple.
{ text: 'To Fund', datafield: 'ToFund', width: '12%', hidden: false, cellsalign: 'center', editable: true, validation: function (cell, value) { var testreturn = fundlist.indexOf(value); if (testreturn == -1){ return { result: false, message: "Please enter a valid Fund Code."}; } return true; }, },thanks,
nja====== html page ===========
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fund Balance Adjustment Details - REAP</title> <link href="/Content/jqx.base.css" rel="stylesheet"/> <link href="/Content/jqx.arctic.css" rel="stylesheet"/> <link href="/Content/jqx.black.css" rel="stylesheet"/> <link href="/Content/jqx.bootstrap.css" rel="stylesheet"/> <link href="/Content/jqx.classic.css" rel="stylesheet"/> <link href="/Content/jqx.darkblue.css" rel="stylesheet"/> <link href="/Content/jqx.energyblue.css" rel="stylesheet"/> <link href="/Content/jqx.fresh.css" rel="stylesheet"/> <link href="/Content/jqx.highcontrast.css" rel="stylesheet"/> <link href="/Content/jqx.metro.css" rel="stylesheet"/> <link href="/Content/jqx.metrodark.css" rel="stylesheet"/> <link href="/Content/jqx.office.css" rel="stylesheet"/> <link href="/Content/jqx.orange.css" rel="stylesheet"/> <link href="/Content/jqx.shinyblack.css" rel="stylesheet"/> <link href="/Content/jqx.summer.css" rel="stylesheet"/> <link href="/Content/jqx.web.css" rel="stylesheet"/> <link href="/Content/jqx.ui-darkness.css" rel="stylesheet"/> <link href="/Content/jqx.ui-lightness.css" rel="stylesheet"/> <link href="/Content/jqx.ui-le-frog.css" rel="stylesheet"/> <link href="/Content/jqx.ui-overcast.css" rel="stylesheet"/> <link href="/Content/jqx.ui-redmond.css" rel="stylesheet"/> <link href="/Content/jqx.ui-smoothness.css" rel="stylesheet"/> <link href="/Content/jqx.ui-start.css" rel="stylesheet"/> <link href="/Content/jqx.ui-sunny.css" rel="stylesheet"/> <link href="/Content/bootstrap.css" rel="stylesheet"/> <link href="/Content/site.css" rel="stylesheet"/> <script src="/bundles/modernizr"></script> <meta name="description" content="The description of my page" /> </head> <body> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <div class="navbar-brand">REAP Fund Balance Adjustment Details</div> </div> </div> </div> <div class="container body-content"> <link href="/Content/jqxgrid.overides.css" rel="stylesheet"/> <div class="row"> <div class="col-md-12"> <p> </p> <h5>Balance Moves from Fund: 110001</h5> <p>Period: <strong>11</strong></p> <div style='width: 600px;overflow: hidden;'> <div style='width: 300px; float:left; margin-left: 50px; text-align:left;'>Projected Balance for this fund: <strong>3,383,861.18</strong></div> </div><br /> <div style='width: 600px;overflow: hidden;'> <div style='width: 300px; float:left; margin-left: 50px; text-align:left;'>New Projected Balance after move: <strong>0.00</strong></div> </div><br /> </div> </div> <div class="row"> <div class="col-md-12"> <div style="width: 98%"> <div id="resultMessage"></div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div id="jqxgrid"></div> </div> </div> <div class="row"> <div class="col-md-12"> <div style="width: 98%"> <p> </p> <button id="closeWindowButton" class="btn btn-default btn-sm pull-right">Close <span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span></button> </div> </div> </div> <div id="messageNotificationSuccess"> <div> Adjustment change saved. </div> </div> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Adjustment Delete</h4> </div> <div class="modal-body"> Projections have been built on this entry. Deleting this adjustment will change the projection. Are you sure? </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel Delete</button> <button type="button" id="okaytodelete" class="btn btn-primary">Delete</button> </div> </div> </div> </div> <hr /> <footer> <p>© 2015 - REAP System</p> </footer> </div> <script src="/Scripts/jquery-1.10.2.js"></script> <script src="/Scripts/bootstrap.js"></script> <script src="/Scripts/respond.js"></script> <script src="/Scripts/jqxcore.js"></script> <script src="/Scripts/jqxdata.js"></script> <script src="/Scripts/jqxgrid.js"></script> <script src="/Scripts/jqxgrid.selection.js"></script> <script src="/Scripts/jqxgrid.pager.js"></script> <script src="/Scripts/jqxlistbox.js"></script> <script src="/Scripts/jqxbuttons.js"></script> <script src="/Scripts/jqxscrollbar.js"></script> <script src="/Scripts/jqxdatatable.js"></script> <script src="/Scripts/jqxtreegrid.js"></script> <script src="/Scripts/jqxmenu.js"></script> <script src="/Scripts/jqxcalendar.js"></script> <script src="/Scripts/jqxgrid.sort.js"></script> <script src="/Scripts/jqxgrid.filter.js"></script> <script src="/Scripts/jqxdatetimeinput.js"></script> <script src="/Scripts/jqxdropdownlist.js"></script> <script src="/Scripts/jqxslider.js"></script> <script src="/Scripts/jqxeditor.js"></script> <script src="/Scripts/jqxinput.js"></script> <script src="/Scripts/globalize.js"></script> <script src="/Scripts/jqxbulletchart.js"></script> <script src="/Scripts/jqxcheckbox.js"></script> <script src="/Scripts/jqxradiobutton.js"></script> <script src="/Scripts/jqxvalidator.js"></script> <script src="/Scripts/jqxpasswordinput.js"></script> <script src="/Scripts/jqxnumberinput.js"></script> <script src="/Scripts/jqxcombobox.js"></script> <script src="/Scripts/jqxgrid.columnsresize.js"></script> <script src="/Scripts/jqxprogressbar.js"></script> <script src="/Scripts/jqxgrid.aggregates.js"></script> <script src="/Scripts/jqxtooltip.js"></script> <script src="/Scripts/jqxgrid.export.js"></script> <script src="/Scripts/jqxdata.export.js"></script> <script src="/Scripts/jqxwindow.js"></script> <script src="/Scripts/jqxexpander.js"></script> <script src="/Scripts/jqxnotification.js"></script> <script src="/Scripts/jqxgrid.edit.js"></script> <script src="/Scripts/jqxdropdownbutton.js"></script> <script src="/Scripts/jqxgrid.grouping.js"></script> <script src="/Scripts/jqxcolorpicker.js"></script> <script src="/Scripts/jqxdragdrop.js"></script> <script type="text/javascript"> $(document).ready(function () { // javascript debugging function function dump(obj) { var out = ''; for (var i in obj) { out += i + ": " + obj[i] + "\n"; } alert(out); } // =================== Validation Setup ===================== // list of active funds for transfer var fundlist = '110001 120001 120003 120007 120009 120012 120020 120021 180004 180005 180006 190100 190200 1940071 '; // ================== Notification for row save events (delete and formula save use dismiss-able alert in resultMessage div ======== // $("#messageNotificationSuccess").jqxNotification({ width: 250, position: "bottom-left", opacity: 0.9, autoOpen: false, animationOpenDelay: 800, autoClose: true, autoCloseDelay: 2500, template: "info", theme: 'energyblue', }); // ============= setup close button and main window call back for grid refresh ===========// $("#closeWindowButton").jqxButton({ }); $("#closeWindowButton").on('click', function () { try{ // refresh grid and close window //window.opener.refreshButton.click(); window.close(); } catch(e){ //catch and just suppress error from failed refresh button click // for example, if the window was closed // and then close this window window.close(); } }); //======================== Get Adjustment Data =====================// //http://localhost:52212/FundAdjustments/getFundBalanceAdjustments/?id=110001&direction=from var thefund = "110001"; var thedirection = "from"; var urlToGoTo = '/FundAdjustments/getFundBalanceAdjustments/?id=' + thefund + '&direction=' + thedirection; // prepare the data var source = { datatype: "json", datafields: [ { name: 'FundAdjustmentId', type: 'number' }, { name: 'FromFund', type: 'string' }, { name: 'FromFundAmt', type: 'number' }, { name: 'ToFund', type: 'string' }, { name: 'ToFundAmt', type: 'number' }, { name: 'FiscalYear', type: 'number' }, { name: 'Period', type: 'number' }, { name: 'Comment', type: 'string' }, { name: 'Active', type: 'number'} ], url: urlToGoTo }; //============================ Build the grid ========================= $("#jqxgrid").jqxGrid({ source: source, width: '98%', autorowheight: true, autoheight: true, editable: true, selectionmode: 'singlerow', editmode: 'click', sortable: true, showsortmenuitems: false, showsortcolumnbackground: false, columnsresize: true, showstatusbar: true, showaggregates: true, altrows: true, theme: 'office', enabletooltips: true, enableellipsis: true, showtoolbar: true, rendertoolbar: function (toolbar) { // appends buttons to the status bar. var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); var addButton = $("<div style='float: left; margin-left: 5px;' title='Add a new Adjustment.'><span class='glyphicon glyphicon glyphicon-plus-sign' aria-hidden='true'></span> Add </div>"); var deleteButton = $("<div style='float: left; margin-left: 5px;' title='Delete the selected Adjustment.'><span class='glyphicon glyphicon glyphicon-minus-sign' aria-hidden='true'></span> Delete</div>"); var reloadButton = $("<div style='float: left; margin-left: 5px;' title='Reload grid. This will cancel any unsaved adjustments.'><span class='glyphicon glyphicon glyphicon-refresh' aria-hidden='true'></span> Refresh</div>"); container.append(addButton); container.append(deleteButton); container.append(reloadButton); toolbar.append(container); addButton.jqxButton({ width: 60, height: 18, theme: 'office' }); deleteButton.jqxButton({ width: 70, height: 18, theme: 'office' }); reloadButton.jqxButton({ width: 70, height: 18, theme: 'office' }); // add new row. addButton.click(function (event) { var datarow = generateNewRowData(); var value = $("#jqxgrid").jqxGrid('addrow', null, datarow[0]); // save our new row blank row to the database var url = '/FundAdjustments/CreateFromGrid'; $.post(url, { fundadjustmentid: datarow[0].FundAdjustmentId, fromfund: datarow[0].FromFund, fromfundamt: datarow[0].FromFundAmt, tofund: datarow[0].ToFund, tofundamt: datarow[0].ToFundAmt, fiscalyear: datarow[0].FiscalYear, period: datarow[0].Period, comment: datarow[0].Comment }, function(data) { if ($.isNumeric(data)){ // empty string is good $("#messageNotificationSuccess").jqxNotification("open"); // select the new row and highlight it var lastrowindex = $(jqxgrid).jqxGrid('getrows').length - 1; $('#jqxgrid').jqxGrid('selectrow', lastrowindex); // set the new row id => param row index, param column datafield, param cell value $("#jqxgrid").jqxGrid('setcellvalue', lastrowindex, "AdjustmentId", data); // return focus to the grid $('#jqxgrid').jqxGrid('focus'); } else { // there was a error display results $("#resultMessage").html(data); } }); }); // delete selected row. deleteButton.click(function (event) { var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex'); var datarow = $("#jqxgrid").jqxGrid('getrowdata', selectedrowindex); //var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount; var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex); var url = "/FundAdjustments/DeleteFromGrid"; var adjId = datarow.FundAdjustmentId; $('#myModal').modal({ keyboard: false }); $('#okaytodelete').on('click',function(evt) { $("#jqxgrid").jqxGrid('deleterow', id); $.post(url, { id: adjId}, function(data) { $("#resultMessage").html(data); reloadButton.click(); }); // close the modal $('#myModal').modal('hide'); }); }); // reload grid data. reloadButton.click(function (event) { //$("#jqxgrid").jqxGrid({ source: getAdapter() }); $('#jqxgrid').jqxGrid('updatebounddata', 'data'); }); }, columns: [ { text: 'From Fund', datafield: 'FromFund', width: '12%', cellsalign: 'center', hidden: false, editable: true, validation: function (cell, value) { var testreturn = fundlist.indexOf(value); if (testreturn == -1){ return { result: false, message: "Please enter a valid Fund Code."}; } return true; }, }, { text: 'Adj. Amount', datafield: 'FromFundAmt', cellsformat: 'f2', cellsalign: 'right', width: '15%', hidden: false, editable: true, aggregates: [{ 'Total': function (aggregatedValue, currentValue, column, record) { var total = parseFloat(record['FromFundAmt']); if (isNaN(total)) { total = 0.00; } return aggregatedValue + total; } }], aggregatesrenderer: function (aggregates) { var renderstring = aggregates["Total"]; return '<span class="allViewSummary">' + renderstring + '</span>'; }, }, { text: 'To Fund', datafield: 'ToFund', width: '12%', hidden: false, cellsalign: 'center', editable: true, validation: function (cell, value) { var testreturn = fundlist.indexOf(value); if (testreturn == -1){ return { result: false, message: "Please enter a valid Fund Code."}; } return true; }, }, { text: 'Adj. Amount', datafield: 'ToFundAmt', cellsformat: 'f2', cellsalign: 'right', width: '15%', hidden: false, editable: true, aggregates: [{ 'Total': function (aggregatedValue, currentValue, column, record) { var total = parseFloat(record['ToFundAmt']); if (isNaN(total)) { total = 0.00; } return aggregatedValue + total; } }], aggregatesrenderer: function (aggregates) { var renderstring = aggregates["Total"]; return '<span class="allViewSummary">' + renderstring + '</span>'; }, }, { text: 'Comment', datafield: 'Comment', width: '35%', hidden: false, editable: true, }, { text: 'Period', datafield: 'Period', width: '10%', hidden: false, editable: false, columntype: 'numberinput', }, { text: 'Id', datafield: 'FundAdjustmentId', width: '10%', hidden: false, editable: false }, { text: 'Fiscal Year', datafield: 'FiscalYear', width: '10%', hidden: false, editable: false }, { text: 'Active', datafield: 'Active', width: '10%', hidden: false, editable: false }, ] }); $('#jqxgrid').on('cellvaluechanged', function (event) { //var args = event.args; // event arguments. //var datafield = event.args.datafield; // column data field. //var rowBoundIndex = args.rowindex; // row's bound index. //var value = args.newvalue; // new cell value. //var oldvalue = args.oldvalue; // old cell value. var rowBoundIndex = args.rowindex; // row's bound index. var datarow = $("#jqxgrid").jqxGrid('getrowdata', rowBoundIndex); var url = "/FundAdjustments/EditFromGrid"; // save our new row blank row to the database var url = '/FundAdjustments/EditFromGrid'; $.post(url, { fundadjustmentid: datarow.FundAdjustmentId, fromfund: datarow.FromFund, fromfundamt: datarow.FromFundAmt, tofund: datarow.ToFund, tofundamt: datarow.ToFundAmt, comment: datarow.Comment }, function(data) { if (data == ""){ // empty string is good $("#messageNotificationSuccess").jqxNotification("open"); // display total projection amount //displayTotalProjectionAndBudgetBalance(); } else { // there was a error display results $("#resultMessage").html(data); } }); }); function generateNewRowData() { var data = new Array(); var row = {}; var i = 0; var direction = "from"; var fromFund = "???"; var toFund = "???"; if (direction == "from"){ fromFund = "110001"; } else { // presume "to" toFund = "110001"; } row["FundAdjustmentId"] = 0; row["FromFund"] = fromFund; row["FromFundAmt"] = 0.00; row["ToFund"] = toFund; row["ToFundAmt"] = 0.00; row["FiscalYear"] = 2014; row['Period'] = 11; row["Comment"] = ""; row["Active"] = "true"; data[i] = row; return data; } }); </script> </body> </html>Hi nja,
The position of the validation message cannot be changed through CSS, because it is dynamically set when the validation is invoked, depending on the validated cell’s position.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Circling back to this project, thanks for your reply.Do you know if there is an example using the tooltip widget with validation as a work around?
Thanks,
njaHi nja,
Unfortunately, we do not have such an example. In the following forum topic you can find an example of the integration of jqxTooltip with jqxGrid: http://www.jqwidgets.com/community/topic/grid-tooltip/#post-46399 (in itself a workaround). We hope it helps.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks I will check it out.
nja
-
AuthorPosts
Viewing 5 posts - 1 through 5 (of 5 total)
You must be logged in to reply to this topic.