2

I am using custom edit/delete functions in jqGrid and I really enjoyed the fact that they call your custom function after checking if a row was selected or not.

Now I would like to add two more buttons and I would like to use the same behaviour of the edit/delete, so when a row is selected my function get called but if no rows have been selected they show the default popup that says "please select a row first".

Is there a way to achieve this? Alternatively, is there a way to call the method that is called by the grid itself?

thanks!

Lorenzo
  • 29,081
  • 49
  • 125
  • 222

1 Answers1

4

You should test whether any row is selected or not inside the onClickButton method of your custom button (see Jqgrid: navigation based on the selected row as an example). If you want to display exactly the same warning you should follow the code from Preventing the opening of a form on a add button click.

To make all easier I modified an old example for you. On the example you can click on the custom button "My special Action" and see the warning if no row is selected. If some row is selected you can do something with the data from the selected row. Instead of some complex actions I displayed a message only.

UPDATED: The answer to the questions "Adding jqGrid Custom Navigation to Top Toolbar" can be also interesting for you.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • thanks very much Oleg. It works! Another question: how to add the button to the top toolbar as you've answered to me in this question? `http://stackoverflow.com/questions/3902611/toolbar-in-jqgrid` – Lorenzo Oct 11 '10 at 22:36
  • @Lorenzo: You welcome! For moving any elements from one place to another you can use `jQuery.insertAfter` or `jQuery.insertBefore`. See http://stackoverflow.com/questions/2678904/adding-button-to-jqgrid-top-toolbar/2679672#2679672 for details. – Oleg Oct 11 '10 at 22:54
  • @Oleg Hi Oleg! I think the example is overriden with another new code :( Could you please post the code for archieving what this question was about? It would be so useful for me :) Many thanks! – JorgeGRC Dec 10 '14 at 12:43
  • @Jorge33212: Sorry, but what code you need? [The answer](http://stackoverflow.com/a/3024278/315935) for example which I reference in the answer contains the code of usage `navButtonAdd`. What *you* need exactly? – Oleg Dec 10 '14 at 12:50
  • @Oleg I just took a look to your answer [HERE](http://stackoverflow.com/a/2841899/3736964) but in console I get `viewModal is not defined`. I just copied the two lines where you call the alert dialog and pasted it inside the script I run if the user clicks the button and I detect no row is selected. I needed to do the same as the user who made the question, show an alert dialog saying "please select a row" or something like that if the user clicks a specific button and no row is selected. I'm off my computer now but I'll keep testing in an hour or so. – JorgeGRC Dec 10 '14 at 12:52
  • 1
    @Jorge33212: You reference to *very old answer*. jqGrid is changed since last years. The method `viewModal` is now `$.jgrid.viewModal`. If you want to display simple dialog box like jqGrid do then you can use `$.jgrid.info_dialog` for example. See [here](http://stackoverflow.com/a/6218257/315935) or [here](http://stackoverflow.com/a/21588926/315935). – Oleg Dec 10 '14 at 13:01
  • @Oleg: Thanks a lot, I've tried both and both worked for me. The only thing is that when the dialogs appear, they appear on the left side of the Grid. Is there a quick way to make them appear centered? That would fit perfect in my webapp :D – JorgeGRC Dec 10 '14 at 14:30
  • @Jorge33212: You are welcome! `$.jgrid.info_dialog` have a lot of options which you can specify in the last parameter. See [here](https://github.com/tonytomov/jqGrid/blob/v4.7.0/js/grid.common.js#L210-L228). For example `left` and `top` option can be used. Try `$.jgrid.info_dialog("Test Title", "Test message",$.jgrid.edit.bClose, {left: 500, top: 100});` – Oleg Dec 10 '14 at 14:35
  • @Oleg Whoa, thanks! I find it a little bit difficult to learn javascript/jQuery as I've learned languages like Java and C++ before and I'm used to find a big API (like Java's one for example) where I can find all methods and examples...But this jQuery stuff is completely different. Thanks a lot for your help, I've seen your answers in lots of posts here in stackoverflow and also in trirand and you frankly make a difference by helping people out ;) – JorgeGRC Dec 10 '14 at 14:40
  • @Jorge33212: You are welcome! I understand your problems in JavaScript, jQuery and DOM. I had the same problems some years before till I started seriously to study all of them. The most problem that Java/C#/C++ developer suppose that they read and understand JavaScript code, but in reality they misunderstood it. In the same way one could produce *very ineffective* JavaScript code if one don't understand basics of DOM like the existence of browser [reflow](https://developers.google.com/speed/articles/reflow). One need just spend some time and always stay clear. – Oleg Dec 10 '14 at 14:51
  • @Oleg this might be going a little off the initial question bounds, but if I wanted to, for example, change the size or position of the dialog which appears when the user clicks the search button, how would I know what to do? I'm not asking for the code lines, but for the process.. I want to learn how to do that change by myself, but I don't know where to start from. I guess first you have to know the id of the element, but then what? Nevermind... I think I'll read some books about basic DOM management – JorgeGRC Dec 10 '14 at 15:15
  • @Jorge33212: In case of Search button you calls [searchGrid](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:singe_searching#options) of jqGrid indirectly. You add Search button to navigator bar by call of [navGrid](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator#definition). The `prmSearch` parameter of `navGrid` can be used to forward the option of `searchGrid`. For example `$("#grid").jqGrid("navGrid", "#pager", {}, {}, {}, {}, {top: 100, width:550, searchOnEnter: true, closeOnEscape: true, onInitializeSearch: function ($form) {/*some initializing code*/}})`. – Oleg Dec 10 '14 at 16:19
  • @Oleg Thank you very much, I'll think about this and also I'll try to learn about DOM basics.. I don't like doing projects in a hurry like this because I can't fully understand what I'm doing -.- – JorgeGRC Dec 10 '14 at 16:27