how to show tooltip in jqgrid edit/add form buttons - jqgrid

I tried
grid.navGrid("#grid_toppager",{},
{
bSubmit: 'Submit',
editCaption: 'Edit',
title: 'Save changes (Ctrl+S)' } );
but Save changes (Ctrl+S) tooltip does not appear if mouse is over Submit button. how to show tooltip in edit and add form submit buttons ?

There are no title option of navGrid method. There are only options like edittitle or addtitle which are not what you need.
What you need is to set title attribute on the "Submit" button which you have to do directly inside of beforeShowForm for example. See the demo.

If u want to add tooltip on your custom jqgrid buttons then just add title .
.navButtonAdd('#discPgr',{ title:"Add Discount" });

Related

How to to use Javascrript querySelector to select the edit button of FilePond?

$('.filepond--action-edit-item').on('click',function(){ console.log($(this)); });
Wish i could do something when click on the edit button of each item.

kendo tree view check boxes issue

I have kendo tree view with check boxes. When i do the button click the values are getting lost after refresh. I wanted to show back to the user after button click could you please help me on this.
$("#treeview1").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource:EquipmentTypes,
id: ["EquipmentTypeId"],
dataTextField:["EquipmentTypeName"],
expanded: false,
spriteCssClass: "rootfolder",
dataValueField: ["EquipmentTypeId"],
value:"#Model.UtilizationFilter.EquipmentTypeFilter"
});
I assume this is because the button in the question does a post of a form. If that is the case then I don't see any easy solutions.
You could either change the buttons so they fetch via ajax. Or add a change event to the tree and then save the values in hidden fields and set them manually after load.
.Events(e => e.Check("onCheck"))

How to add label in navgrid

I use jqgrid.I want use label in navgrid and dynamic change label text.
I can add button by navButtonAdd.
how to add label in navgrid?
Use the caption property of jqGrid navGrid. As given in the Wiki you can see that for existing navGrid buttons you can use the property addCaption/editCaption in case of Edit and caption in case of others to set the label.
As
caption: "Delete",
Since this is a string value you can directly assign a variable dynamically to set the label
If you really need to modify the text of the buttons added by inlineNav or navGrid you have to do this manually because jqGrid has no simplified function for this.
First of all you can use Developer Tools of Internet Explorer (press F12 to start), Firebug or other tools to examine the navigator buttons. You will see something like
The id of every button are constructed from the id of the grid and some button specific suffix. For example the "Edit" button added by inlineNav is "list_iledit" where "list" is the id of the grid and the suffix "_iledit"has the Edit button. To change the texts later you can use the code like
var $div = $("#" + grid[0].id + "_iledit>.ui-pg-div");
var $icon = $div.find(">span.ui-icon");
$div.text("edit"); // new text of the button
$div.append($icon);
$div.parent().attr("title", "my custom edit tooltip"); // new tooltip
You can use something like this:
.navGrid('#pager_list_1', {
//other codes
}).navButtonAdd('#yourpagerId', {
caption: "Del",
url: delUrl,
buttonicon: "ui-icon-trash",
onClickButton: function (response) {}
}

How to remove submit button from jqGrid edit form

jqGrid Edit form invoked using Edit button from top toolbar is defined as
grid.navGrid("#grid_toppager", { del: false,add: false,view: true },
{ url: '/Edit',
bSubmit: 'Save',
editCaption: 'Change',
} );
This is used to show data in readonly grid. Pressing submit button does not make sence in this case.
How to remove submit button ?
You can hide Submit button the in the beforeShowForm of the edit form options:
beforeShowForm: function ($form) {
$form.parent().find('#sData').hide();
}

Grabbing selected row's ID to bring up a fancybox widget with custom button in jqgrid

I am trying to bring up a fancybox widget using a custom button in jqgrid. To do this, I would need to grab the Id of the selected row. I am currently trying this to do it. And it is not working. The custom button shows, it responds to the click event, but I cannot get the selected id. Can anyone help me out? Thanks!!!
jQuery("#list").jqGrid('navGrid','#pagernav',
{edit:true,add:false,del:false,search:false},
{
height:280,
reloadAfterSubmit:true,
closeAfterEdit:true,
editCaption: "Edit Sample",
bSubmit: "Submit",
bCancel: "Cancel",
bClose: "Close",
checkOnSubmit:true,
saveData: "Data has been changed! Save changes?",
bYes : "Yes",
bNo : "No",
bExit : "Cancel"
}
).jqGrid('navButtonAdd','#pagernav',{
caption:"Add",
buttonicon:"ui-icon-add",
onClickButton: function(lastsel){
alert("Adding Row to id" + lastsel);
},
position:"last"
});
Look the answer. It shows how to get 'selrow' parameter of jqGrid which you need. In case of multiselect scenario (multiselect: true) you should use 'selarrrow' parameter instead.
The only parameter of navButtonAdd is the event object from the click event (see jqGrid code). Because the click is on your custom button it bring you very little information. You can use the event only for example to implement different actions if the button was clicked in combination with Ctrl or Shift or some other keys pressed. In all standard scenarios you have to use 'selrow' or 'selarrrow' parameters.
You should be careful, because the custom button can be clicked even if no rows are selected. In the case the value of 'selrow' parameter is null (the value of 'selarrrow' is empty array []).
You can consider to implement hide/show or enable/disable some navigator buttons based on whether or which row is selected. See this and this demos from this and this old answers.

Resources