I have a button outside the grid, on clicking of this button i am iterating the row nodes and doing a check whether the data is empty or not. If it is empty i want to highlight that row. Did not found anything which can give me any option to highlight the row in ag grid on button click.
Kindly help
I found the answer for above:
In Component: may be in constructor
this.rowClassRules = {
'invalid-row': (params) => {
if (this.inValidRowNode && this.inValidRowNode.data.name === params.data.name) {
return true;
}
}
};
On button click (in validation method), while iterating the node we need to set the data. I am setting in this way.
node.setDataValue('name', ' ');
In Html:
<ag-grid-angular #agGrid rowSelection="multiple" [gridOptions]="gridOptions" [columnDefs]="gridColumnDefs" (gridReady)="onGridReady($event)"
[rowClassRules]="rowClassRules">
Currently I am using a Jquery ui autocomplete, and after someone selects an option from a Jquery ui autocomplete, I am removing the focus from the textbox.
I would like to add the following functionality -
When someone clicks into the textbox again, I would like to leave the option that was previously selected in the text box, but highlight it (as if the text was double clicked), and redisplay all the choices.
How can this be done?
CURRENT CODE -
$(function () {
var availableItems = ['item1', 'item2', 'item3'];
$("#myTextBox").autocomplete({
source: availableItems,
minLength: 0,
select: function(event, ui) {
$('#myTextBox').blur();
}
}).focus(function () {
$(this).autocomplete("search");
}); ;
});
Did you try to put
$(this).select();
in the focus function()?
Also try
$(this).autocomplete("search", "");
to enhance an empty search
I have textbox whose visibility is controlled by value selected in telerik dropdown. Say if value selected is yes then textbox is visible else it hides. Now when value in dropdown set to Yes i am not able to set focus to that textbox. Only on pressing 'Tab' key focus moves over there but not as soon as textbox appears. I have tried this code:
function OnDropDownChange(e){
if ($(this).val() === "Y") {
$("#txtID").show();
$("#txtID").focus();
}
}
Any help will be appreciated.
Try this it can be work:
$('#txtID').show('slow', function() {
$(this).focus();
});
Reference
$("#txtID").show(400, function() {
$(this).focus();
});
I am new to jquery and Jqgrid. I have problems displaying an alert message, when the checkbox is not selected in jqgrid, i.e i have declared the multiselect:true.
function initJqGridSearchSubProject(table,pager,msg,loadSelID,caption,chkMrk ){
$(table).empty();
$(table).GridUnload();
var mygrid =jQuery(table).jqGrid({
datatype: "local",
data:msg,
width: 1240,
scrollOffset:0,
height: 250,
colNames:['ID','PID','Project Folder Name','Sub Project Name','Responsible','Status','Last Updated On'],
colModel:[
{name:'id',index:'id',hidden:true, width:5, sorttype:"int", editable: false,resizable:false},
{name:'pid',hidden:true, width:5, sorttype:"int", editable: false,resizable:false},
{name:'projectFolderName', width:250, editable: true,formatter:'tsLinks'},
{name:'subProjectName', width:250, editable: true,formatter:'subProjectLinks'},
{name:'responsible', width:200, editable:false,resizable:false},
{name:'status', width:100,editable: true,stype:'select',edittype:"select",resizable:false,editoptions:{value:"ACTIVE:ACTIVE;INACTIVE:INACTIVE;DELETED:DELETED",readonly:false},editrules:{edithidden:false}},
{name:'lastUpdatedOn', width:200,editable: false,resizable:false,sorttype:'date',formatter:'date',formatoptions:{ srcformat: 'M d y H:i:s', newformat: 'd M y h:i A' }}
],
pager: pager,
rowNum:200,
rowList:[200,400,600,1000],
//rowTotal:2000,
//loadOnce:true,
//rownumbers:true,
gridview : true,
//sortname: 'lastUpdatedOn',
viewrecords: true,
//sortorder: "desc",
toppager:true,
multiselect:true,
singleselect: false,
//multiboxonly:true,
//toolbar: [true,'both'],
caption:caption,
hidegrid: false,
gridComplete:function(id){
//$(chkMrk).hide();
//alert('grid complete');
},
beforeSelectRow: function(rowid, e)
{
// reset check box selection only when user clicks on another checkbox
if($(e.target).is("input:checkbox"))
{
// reset/clear other checkboxes selection before making a latest clicked row's checkbox as selected
jQuery(table).jqGrid('resetSelection');
}
// Code To Disable Check Box Selection When User Selects by Clicking on A Row
return $(e.target).is("input:checkbox");
//return(true);
}
});
jQuery(table).jqGrid('navGrid',pager,{del:false,add:false,edit:false,search:false,refresh:true,cloneToTop:true,afterRefresh:function(){}},{},{},{},{});
jQuery(table).jqGrid('navButtonAdd', table+ '_toppager_left',{caption:"Add WO", buttonicon:"ui-icon ui-icon-plus",id:"SUBPROJID", onClickButton: function(){},position:"first",title:"Add WO"});
});
This is my whole code jqgrid...
I have a rows of fields with prjt names and subprjects names, where i use multiselect, to display the checkbox before the row for all fields, Its mandate that user should click one checkbox to show other page,where if user does not check, he should be shown an alert message to check any checkbox.
I hope that I undertand correct your requirements. You added custom button "Add WO" to the navigator bar and you need display alert message if no row is selected when the button are clicked or to redirect to another page if some row is do selected.
You can get the list of selected rows using $(this).jqGrid("getGridParam", "selarrrow") or using $(this).jqGrid("getGridParam", "selrow") inside of onClickButton, which will be called if the user click on the button. The internal parameter selrow represent the rowid of last selected row. If $(this).jqGrid("getGridParam", "selrow") is null then no row is selected. The call $(this).jqGrid("getGridParam", "selarrrow") get the value of another internal parameter "selarrrow" which is array of selected ids. If will be filled in case of usage multiselect:true.
So I think that you can display warning to the user if selrow is null or if selarrrow is empty array. If the need to redirect to another HTML page you can assign new value to location.href.
Use this in last line to uncheck last selected check box
jQuery(this).attr('checked', false);
Full code
jQuery(document).ready(function(){
jQuery('input:checkbox').change(
function(){
if (jQuery('input:checkbox:checked').length == jQuery('input:checkbox').length){
alert('Alert Text.');
jQuery(this).attr('checked', false);
}
});
});
I'm working with jquery-ui. I can create elements with titles and show the titles. However on a click, I would like to take the title and populate another div (this is because touch enabled devices do not have tooltips). I can get a click event, but I can't get the title while in the click event.
$("div").click(function( event ) {
// just to prove that we are entering this event
$("#preShow").html ( Date() );
// show the title
var toolTip = this.attributes.title.value;
$("#show").html ( toolTip );
// just to prove that there was no crash
$("#postShow").html ( Date() );
});
I have also tried using
var toolTip = $(this).attr ("title");
Here is the jsfiddle showing the problem
http://jsfiddle.net/jK5xQ/
The same code works if I create an HTML file and run it in Firefox with a breakpoint at the first line of the click event. Has anyone experienced this?
This is because jQueryUI's Tooltip removes the title and uses it. Try going about it like this...
$(document).ready(function () {
$( document ).tooltip( {
track: true,
content: function() {
return $( this ).attr( "title" );
}
});
$('div').click(function(){
$('#show').html($('#' + $(this).attr('aria-describedby')).children().html());
});
});
DEMO: http://jsfiddle.net/jK5xQ/4/
Let me know if you have any questions!