jqGrid custom buttons with edit/delete behaviour

Question

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!

Solution

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.

Comments

[Lorenzo]

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

[Oleg]

@Lorenzo: You welcome! For moving any elements from one place to another you can use jQuery.insertAfter or jQuery.insertBefore. See stackoverflow.com/questions/2678904/… for details.

[JorgeGRC]

@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!

[Oleg]

@Jorge33212: Sorry, but what code you need? The answer for example which I reference in the answer contains the code of usage navButtonAdd. What you need exactly?

[JorgeGRC]

@Oleg I just took a look to your answer HERE 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.

[Oleg]

@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 or here.

[JorgeGRC]

@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

[Oleg]

@Jorge33212: You are welcome! $.jgrid.info_dialog have a lot of options which you can specify in the last parameter. See here. For example left and top option can be used. Try $.jgrid.info_dialog("Test Title", "Test message",$.jgrid.edit.bClose, {left: 500, top: 100});

[JorgeGRC]

@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 ;)

[Oleg]

@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. One need just spend some time and always stay clear.

[JorgeGRC]

@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

[Oleg]

@Jorge33212: In case of Search button you calls searchGrid of jqGrid indirectly. You add Search button to navigator bar by call of navGrid. 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*/}}).

[JorgeGRC]

@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 -.-