Custom Columns Grids Context Menu

[priyamsharma2704Participant]

Hi,

I have a grid with custom columns. I added a context menu on that grid to add/delete rows and columns. But when I right click on grid and choose “Add Row”, I never get the cell info like row number or datafield. I tried using “getselectedrowindex” and “getselectedcell”. With “getselectedrowindex” I get row index as -1 even after selecting the cell. Is it because I have custom columns? I have attached a link to an example.

https://jseditor.io/?key=custom-column-context-menu

Thanks

[MartinParticipant]

Hello priyamsharma2704,

Can you, please, check if your link to the example is correct?
Currently, it is redirecting to https://jseditor.io.
Please, note that you have to share the example to be “Public” for the “Share” menu tab.
Thanks!

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[priyamsharma2704Participant]

sorry for that. I have made it public now.

https://jseditor.io/?key=custom-column-context-menu

[MartinParticipant]

Hello priyamsharma2704,

You get the index as -1 when you use getselectedrowindex because you selection mode is singlecell but not singlerow.
You can use getselectedcell but in this case you need to have the cell selected before the right click for opening the context menu.

So, I would suggest you to use getcellatposition and pass the coordinates that you use for opening the context menu.
I have updated your Example.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[priyamsharma2704Participant]

Thanks a lot. It worked for me.

[priyamsharma2704Participant]

Hi Martin, I have one more question. How can I avoid the context menu to popup whenever I click on Column Header. I mean I don’t want the context menu on header, I want it to appear only when I right click on the rows.

Regards.

[priyamsharma2704Participant]

And also why it take 3 clicks to get the drop down list? Is it because of the custom columns?

[MartinParticipant]

Hello priyamsharma2704,

You can check the position and height of the grid’s header and add a check in the “contextmenu” handler to not open the menu if the click Y is above the rows.
For the editing, you can set the editmode property to “click”, if you want the edit to begin when you select a cell.

I have updated the Fiddle Example.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[priyamsharma2704Participant]

Thank you very much.

[priyamsharma2704Participant]

And I have few more queries. Now I have a jqxInput field and when I select the cell, I want the text to get highlighted. Second, assume that I have implemented a validation that allows only numbers into jqxInput type cells. I want to display some text in that cell as default, but as soon as I click on it, it should show me 0.

In the below example, row 1 is of type JqxInput.
https://jseditor.io/?key=javascript-app-ver-6

Thanks

[MartinParticipant]

Hello priyamsharma2704,

By “highlighted” do you mean selecting the text? If so you can use inputElement.jqxInput('selectAll');, otherwise you can apply some css.
For changing the cell value to 0, you can either do it in the cellclick event handler or in the initGridEditor function, depending on the behavior you need.

You can update you initGridEditor function like this:

var initGridEditor = function (row, cellValue, editor, cellText, width, height) {
    // set the editor's current value. The callback is called each time the editor is displayed.
    if (row == 0) {
        //editor.jqxNumberInput({ decimal: parseInt(cellValue)});
        var inputElement = editor.find('input');
        inputElement.jqxInput('val', 0);
        inputElement.jqxInput('selectAll');

    } else if (row == 1) {
        editor.jqxDropDownList('selectItem', cellValue);
    } else if (row == 2) {
        var checkBoxHTMLElement = editor.find('div:first');
        checkBoxHTMLElement.jqxCheckBox({ checked: cellValue.toString() == "true" });
    }
}

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts