Context Menu and Default Button Response Questions

[Paul Yanzick]

Hello,

I have a grid that I do not want to allow editing or deleting on,  If I enable the context menu, it provides options that allow this to happen.  How can I remove those items from the context menu so that it shows Add as the only default item?

I'd also like to change the functionality of add (both the context menu and the add button) to open a dialog control that I have built into a wizard.  How can I override the default options for this?  

Thanks

Paul

[Balaji Marimuthu]

Hi Paul,

Thanks for using Syncfusion Products.

Please find the response.

Based on your requirement we have created the sample. Please find the sample as follows,
Sample: aspsample_(2).zip

Query:#1 I have a grid that I do not want to allow editing or deleting on, If I enable the context menu, it provides options that allow this to happen. How can I remove those items from the context menu so that it shows Add as the only default item?

If you want to display the selected items in context menu, we suggest you to use the “contextMenuItems” property in the contextMenuSettings. It will show the mentioned items only in context menu of Grid and please refer the following code snippet.

<ej:Grid ID="FlatGrid" runat="server" AllowPaging="true">

<ContextMenuSettings EnableContextMenu="true" ContextMenuItems="Add Record">

</ContextMenuSettings>
</ej:Grid>

Could you please refer the online documentation for more information in the following link.
Documentation: http://help.syncfusion.com/UG/JS_CR/ejGrid.html#contextMenuSettings

Query:#2 I'd also like to change the functionality of add (both the context menu and the add button) to open a dialog control that I have built into a wizard. How can I override the default options for this?

The default behavior of the Toolbar Add button can be overridden by using the ToolbarClick event in Grid and the ContextMenu item behavior can be overidden by using the ContextClick event in Grid. Please find the below code snippet.

<ej:Grid ID="FlatGrid" runat="server" AllowPaging="true">

<ClientSideEvents ToolbarClick="onToolBarClick" ContextClick="onContextClick"/>

. . . . . .

</ej:Grid>

<script type="text/javascript">

function onToolBarClick(args) {

if (args.itemName == "Add") {

var obj = $("#MainContent_FlatGrid").ejGrid("instance");

args.cancel = true; // prevent default behavior

obj._startAdd(); // you can use the built in wizard here

}

}

function onContextClick(args) {

if (args.text == "Add Record") {

var obj = $("#MainContent_FlatGrid").ejGrid("instance");

args.cancel = true; // prevent default behavior

obj._startAdd(); // you can use the built in wizard here

}

}
</script>

The default functions are prevented by setting true to the args.cancel function and you can override the method after preventing the default functions to the item. Please refer the documentation for further details.

Documentation for toolbarclick: http://help.syncfusion.com/UG/JS_CR/ejGrid.html#event:toolBarClick
http://help.syncfusion.com/ug/js/index.html#!Documents/toolbar1.htm

Documentation for ContextClick: http://help.syncfusion.com/UG/JS_CR/ejGrid.html#event:contextClick


Please let us know if you have any queries.

Regards,
Balaji Marimuthu

[Paul Yanzick]

Hello,

I am a bit confused.. I am using the ASP.Net control set, but the references provided were for Javascript...  for the heck of it though I tried the Javascript and context menu settings changes but left off the call to startAdd and it still ran the default function.  I would think that if I disabled the default behavior and removed the function call to add, then it wouldn't fire.  Would that not be a correct assumption?

[Balaji Marimuthu]

Hi Paul,

Sorry about the inconvenience caused.

We would like to let you know that we have prevented the default function of Add Record in ToolBarClick and ContextClick client side events. So we have provided the js document online link for your reference.

And the Default function of the toolbar and context menu will be disabled by setting true to the args.cancel function. So the default behavior of the add record will be disabled in the toolbar and context menu.

ej:Grid ID="FlatGrid" runat="server" AllowPaging="true">

<ClientSideEvents ToolbarClick="onToolBarClick" ContextClick="onContextClick"/>

. . . . . .

ej:Grid>

<script type="text/javascript">

function onToolBarClick(args) {

if (args.itemName == "Add") { // for add record

var obj = $("#MainContent_FlatGrid").ejGrid("instance");

args.cancel = true; // prevent default behavior

// you can use the built in wizard here

}

}

function onContextClick(args) {

if (args.text == "Add Record") { // for add record

var obj = $("#MainContent_FlatGrid").ejGrid("instance");

args.cancel = true; // prevent default behavior

// you can use the built in wizard here

}
}
script>

And you can use your own method, after the default behavior is get disabled. We have used the startAdd method for example only, could you please replace your code instead of calling startAdd method.

If the above solution does not meet your requirement, could you please share us your controller and view file that will be helpful to provide better solution ASAP.

Please let us know if you require further assistance on this.

Regards,
Balaji Marimuthu

[Paul Yanzick]

That is basically what I am doing, except I have added alerts for tracing purposes....

function onDialogClose(args) {
    alert("close fired");
    $("#dlgAddCRMA").ejDialog({
        enabled: false
 
    });
    OnSuccess();
}
 
function openWizard() {
    alert("wizard fired");
    $("#dlgAddCRMA").ejDialog({
        enabled: true
 
    });
 
}
 
function onToolbarClick(args) {
    if (args.itemName == "Add") {
        alert('toolbar fired');
        args.Cancel = true;
        var obj = $("#mainContent_gridDashboard").ejGrid("instance");
        if (null == obj)
            alert('object NULL');
        else {
            alert('object NOT NULL');
            openWizard();
        }
 
        //obj._startAdd();
    }
 
}

This still fires the default dialog, even though it fires the alert.  I'd like it to launch a Dialog control on that page, making it visible.  I am just focusing on trying to get the add button working first, and I will move on from there if I can.

[Paul Yanzick]

I'd like to also note that there are no errors in Chrome Inspector appearing.  The Dialog doesn't appear... unless I do a page refresh, then my dialog appears.  If I close it, refresh the page, it re-appears.  If I close it and hit the plus button again, the events fire (I added another alert after enabling the Dialog control) and it STILL shows the default dialog.

[Paul Yanzick]

Hello,

Just trying to touch base on this one.

Thanks
Paul

[Paul Yanzick]

Ok, made some progress.  Turns out I was using args.Cancel instead of args.cancel... So now the default dialog is not firing.  Not sure why I wasn't seeing an error in Inspector.

In any case, (and may be a separate issue), but the dialog control is not appearing.  It is not throwing an exception in Javascript, so it is finding the control... but it is not appearing.  I also get the alert at the end.  Suggestions?

function onToolbarClick(args) {
    if (args.itemName == "Add") {
        args.cancel = true;
        var obj = $("#mainContent_gridDashboard").ejGrid("instance");
        $("#mainContent_dlgAddCRMA").ejDialog({
            enabled: true
 
        });
        alert("add fire complete");
        //obj._startAdd();
    }
 
}

Thanks
Paul

[Paul Yanzick]

Noticing when I hover over .ejDialog in my code, it says 'Property or global variable 'ejDialog' is possibly never assigned'.  Am I missing a script somewhere???

[Paul Yanzick]

Nope, your example does the same.  So, any ideas why the dialog isn't launching?

[Balaji Marimuthu]

Hi Paul,

Thanks for the update.

We have modified your sample based on your requirement. Please refer the below code snippet.

<ej:Dialog ID="dlgAddCRMA" Width="550" runat="server" ShowOnInit="false"/>

<script type="text/javascript">

function openWizard() {

alert("wizard fired");

$("#MainContent_dlgAddCRMA").ejDialog({

enabled: true,

title:"built in wizard"

});

}

function onToolBarClick(args) {

if (args.itemName == "Add") {

alert('toolbar fired');

args.cancel = true; //prevent the default behavior

$("#MainContent_dlgAddCRMA").data("ejDialog") !== undefined && $("#MainContent_dlgAddCRMA").ejDialog("destroy"); //destroy the dialog if element is created

var obj = $("#MainContent_FlatGrid").ejGrid("instance");

if (null == obj)

alert('object NULL');

else {

alert('object NOT NULL');

openWizard(); // render the dialog

}

//obj._startAdd();

}

}

</script>

We would like to let you know that, we need to destroy the dialog element if it already created. Because, it will not appear the element properly for the second time. So when button is clicked, the dialog is not appeared in proper way.

For your convenience we have attached the sample: aspsample.zip

If the above solution does not meet your requirement, please modify the provided sample to issue reproducible, which will be helpful to provide better solution at the earliest.

Please let me know if you have any queries.

Regards,
Balaji Marimuthu

[Paul Yanzick]

Hello,

Thank you for your reply.  There was a line in the Javascript that you had added that seemed to make the difference in launching the Dialog as well as solved another problem I was having, BUT... it caused another issue.

I am using the Dialog to hold several panels in a wizard.  There are buttons on the form that hold ASP.Net controls that do postbacks to methods.  If I launch the dialog from a button on the form, those buttons work due to the Content attribute of the Dialog tab.  If it is launched via Javascript, then none of the buttons work.  It doesn't matter if it is an ASP.Net button, or a SyncFusion button, neither will do a postback.  I can't call the method using Javascript since the method accesses controls on the page for data, which are not static, therefore they would not be available (as I understand it, to do __dopostback the method has to be static).

If that can be solved, then I think I'd be good... however, not sure how it can be.  I have attached a modified sample program with both an ASP.Net and a SyncFusion button for you to try.

Thanks
Paul

Attachment: aspsample2_8f62613e.zip

[Ezhil S]

Hi Paul,

We were unable to reproduce reported issue to trigger the events for button with the shared sample. We have prepared a video to depict the behavior of button click event with the shared sample that works fine at our end. Could you please describe your query in detail and provide us the procedure to reproduce the issue reported with button click post back action? This will help us to provide you an appropriate solution.

Sample video download link : http://www.syncfusion.com/downloads/support/forum/118885/f118885-1379307712.zip

Please let us know if you have any questions.

Regards,
Ezhil S

[Paul Yanzick]

Hello,

No, the example I posted is NOT working, but I didn't explain it all that well either.

Since the topic of discussion is the context menu and the buttons at the top of the bar, that is where the issue lies.  The button I added that says Click Me is to show an example of the dialog launching and working without issue.  If you click the Add button in the bar that is part of the grid, the same Dialog comes up, but the buttons DO NOT WORK there.  Neither of the buttons work, INCLUDING the Javascript call.  

Please see the attached video.

Attachment: 20150504_93315_f3b97adc.zip

[Ezhil S]

Hi Paul,

Thanks for the update.

We are now able to reproduce the issue with triggering events for button control. The issue is because you have destroyed the Dialog which created on click event of the add button and context menu item in the grid. Destroy method will completely remove the control model and unwire the events in the Dialog control. So that you will not be able to trigger the events after destroying the control.
Modified code snippet:
<code>
[Script]

function onToolBarClick(args) {

if (args.itemName == "Add") {

alert('toolbar fired');

args.cancel = true; //prevent the default behavior

// destroy the dialog removed

var obj = $("#<%=gridDashboard.ClientID%>").ejGrid("instance");

if (null == obj)

alert('object NULL');

else {

alert('object NOT NULL');

openWizard(); // render the dialog

}

//obj._startAdd();

}
}
</code>
Please find the modified sample from the link below:
http://www.syncfusion.com/downloads/support/forum/118885/aspsample-651547776.zip

Could you please let us know why you have tried to destroy the dialog content ? so that we can alternate solution instead of destroying the dialog content.

Please let us know if you have any other queries.

Regards,
Ezhil S

[Paul Yanzick]

Why am I destroying the dialog?  Because one of your representatives told me to do so on April 30th on this very chain.

I changed the code to what you suggest... your sample has more changes than just what you pointed out.. the openWizard method is also different.  Now, however, I can click a button in the Dialog and on page refresh the Dialog closes.  I have to click the add button again, and the wizard appears back where it was, with the data filled in as it was (which when I click the add button, I wouldn't expect to continue where it left off).  Also, when I click the X in the corner of the Dialog, it still retains all of the data, which it seems doing the destroy fixed.  I changed the onDialogClose by destroying the dialog (basically putting that line in the onDialogClose) and it didn't work either.  So, in essence, things are worse off.

So, just to clear things up if there is any ambiguity...

1. The dialog presents a wizard, with multiple panes in it, with next and previous buttons

2. The wizard has cancel buttons on every page, as well as the header in the dialog with the X... when any of those are clicked, the dialog fields needs to be cleared (which with the way I had it previously, it was at least doing that)

3. The dialog should stay visible when clicking on a button to go to the next page in the wizard

4. At the end of the wizard, the dialog should be cleared if I click the add button again

5. Code behind events occur on the button clicks, whether it is next, back, or the save button at the end of the wizard

This is what I am after.  Hope that clears up anything that was not clear.  I can send the entire page if you'd like, just not on  the forum (in an incident).

Thanks
Paul

[Ezhil S]

Hi Paul,

Thanks for your update.

We have prepared a sample based on the given scenario with a Dialog and multiple panes in it. We have cleared the values using the Cancel button click in the code behind and achieved the requested behavior on navigating throw the Dialog panes using Button Click event.
Please download the sample prepared from the link below:
http://www.syncfusion.com/downloads/support/forum/118885/aspsample_modified851329976.zip

Please let us know if you have any other queries.

Regards,
Ezhil S

[Paul Yanzick]

Sorry, I didn't get notified of your post, so didn't see anything.. I will take a look at it tonight.

[Paul Yanzick]

Well.. seems my keyboard messed up and didn't put the L in panels... I am using panes, not panels, as mentioned on the 30th.  Sorry about that... 

Good old <asp:panel>.  

                                <asp:Panel ID="pnlCustomerInformation" runat="server">
                    <div style="float: left">
                        <table>
                            <tr>
 
                                <td>
                                    <h2>Customer Information</h2>
                                </td>
                            </tr>
                            <tr>
                                <td>Company Name:</td>
                                <td>
                                    <asp:TextBox ID="txtCompanyName" runat="server"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>First Name:</td>
                                <td>
                                    <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>Last Name:</td>
                                <td>
                                    <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>Phone Number:</td>
                                <td>
                                    <asp:TextBox ID="txtPhoneNumber" runat="server" TextMode="Phone"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>Email Address:</td>
                                <td>
                                    <asp:TextBox ID="txtEmailAddress" runat="server" TextMode="Email"></asp:TextBox>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div style="float: right">
                        <table>
                            <tr>
                                <td>
                                    <h2>Address Information</h2>
                                </td>
                            </tr>
                            <tr>
                                <td>Address 1:</td>
                                <td>
                                    <asp:TextBox ID="txtAddress1" runat="server"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>Address 2:</td>
                                <td>
                                    <asp:TextBox ID="txtAddress2" runat="server"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>City:</td>
                                <td>
                                    <asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>State:</td>
                                <td>
                                    <asp:TextBox ID="txtState" runat="server"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>ZipCode:</td>
                                <td>
                                    <asp:TextBox ID="txtZipCode" runat="server"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>Country</td>
                                <td>
                                    <asp:DropDownList ID="ddlCountry" runat="server" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged"></asp:DropDownList>
                                </td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td>
                                    <asp:Button ID="btnCancelStep1" runat="server" Text="Cancel" OnClick="Cancel_Click" />&nbsp;
    <asp:Button ID="btnNextStep1" runat="server" Text="Next" OnClick="btnNextStep1_Click" />
                                </td>
                            </tr>
 
                        </table>
                    </div>
                </asp:Panel>
                <asp:Panel ID="pnlPartInformation" runat="server" Visible="false">
                    <table>
                        <tr>
                            <td>
                                <h2>RMA Information</h2>
                            </td>
                        </tr>
                        <tr>
                            <td>Distributor:</td>
                            <td>
                                <asp:DropDownList ID="ddlDistributors" runat="server"></asp:DropDownList>
                            </td>
                        </tr>
                        <tr>
                            <td>Part SKU:</td>
                            <td>
                                <asp:DropDownList ID="ddlPartList" runat="server"></asp:DropDownList>
                            </td>
                        </tr>
                        <tr>
                            <td>Serial Number:</td>
                            <td>
                                <asp:TextBox ID="txtSerialNumber" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>Service Request Number:</td>
                            <td>
                                <asp:TextBox ID="txtSRNumber" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>Problem Description:</td>
                            <td>
                                <asp:TextBox ID="txtProblemDescription" runat="server" MaxLength="50" TextMode="MultiLine" Rows="4"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>
                                <asp:Button ID="btnBackStep2" runat="server" Text="Back" OnClick="btnBackStep2_Click" />&nbsp;
<asp:Button ID="btnCancelStep2" runat="server" Text="Cancel" OnClick="Cancel_Click" />&nbsp;
<asp:Button ID="btnNextStep2" runat="server" Text="Next" OnClick="btnNextStep2_Click" />
                            </td>
                        </tr>
                    </table>
                </asp:Panel>

[Paul Yanzick]

UGH.. Panels, not panes...  Been a long day yesterday.

[Ezhil S]

Hi Paul,

Thanks for your update.

We have modified the sample using ASP Panels to clear the values on cancel button click and navigating through the wizard inside the Dialog control. Could you please let us know whether the suggested solution works at your end? So that we can provide you alternative solution.

Modified sample with shared code can be downloaded from link below:
http://www.syncfusion.com/downloads/support/forum/118885/aspsample174297424.zip

Please let us know if you have any other queries.

Regards,
Ezhil S

[Paul Yanzick]

Still not getting email updates (on this particular thread only), odd.

Will take a look tonight, thanks!

Paul

[Paul Yanzick]

Looked at your example quick... Nope, same problems that I have ultimately had

1. When clicking the cancel button, it clears the Dialog but the dialog still appears

2. When clicking the X in the corner of the dialog, the dialog closes ,but re-opening it, the content is still in the form.

Which gets back to where I had it before... I can not get the X to work in the corner (clear the form) and have the buttons post back.

Thanks
Paul

[Ezhil S]

Hi Paul,

Thanks for the update.

In order to achieve this behavior we have already logged a defect as per the forum below,
https://www.syncfusion.com/forums/118886/close-of-the-dialog-control-fire-asp-net-function
We will modify the shared sample along with the fix as per your requirement. Please log on to our support website to track the status of this defect in the incident has been created under your account check for further updates.
https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

Please let us know if you have any other queries.

Regards,
Ezhil S