use javascript function with ext.net control

Question

I wrote this function in javascript

function CheckBeforeAddNew(btnId, gridSelected) {
$(btnId).click(function () {
      for (var i in gridSelected) {
        return true;
      };
      Ext.Msg.alert('Add', 'Can not do without selected item');
      {
        return false;
      };
    });
};

and when I trying to make this function arrive on button click like this:

<ext:Button runat="server" ID="btnAddNewToMme" Cls="topButton" Text="Add new" Icon="Add" OnDirectClick="btnAddNewToMme_OnDirectClick">
                    <DirectEvents>
                        <Click Before="CheckBeforeAddNew('#<%= btnAddNewToMme.ClientID%>','<%=dlOuterObject.Grid_ClientID %>.selectedIds')"></Click>
                    </DirectEvents>
                </ext:Button>

I got error ReferenceError: $ is not defined $(btnId).click(function () {

How can I invoke this function to make this work?

Edit: Of course I added file with this function to my .aspx like

<script type="text/javascript" src="Scripts/Synchronization.js"></script>

Edit1: in firebug i can see before anything else

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script> so jQuery is loaded correctly

Edit2: I've made changes in my function which @geoffrey provide:

var CheckBeforeAddNew = function (gridSelected) {
for (var i in gridSelected) {
    return true;
}
Ext.Msg.alert('Error', 'Something wrong!');
return false;

};

But using of it

<ext:Button runat="server" ID="btnAddNewToMme" Cls="topButton" Text="Add new" Icon="Add" OnDirectClick="btnAddNewToMme_OnDirectClick">
                <DirectEvents>
                    <Click Before="return CheckBeforeAddNew('<%= dlOuterObject.Grid_ClientID %>.selectedIds');"></Click>
                </DirectEvents>
            </ext:Button>

I can't make this work:

if (grid.getSelectionModel().getCount() < 1) {
   Ext.Msg.alert('Error', 'Please select an Item');

   return false;
}

my dlOuterObject is UserControl which contains grid. So any ideas how make it work?

Thanks for any help:)

Make sure Jquery is loaded correctly. You can use firebug and check if Jquery is referenced correctly. — ssilas777, Aug 30 '12 at 10:01
yes jQuery is referenced correctly as well as `Synchronization.js` file — Harry89pl, Aug 30 '12 at 10:02
inspect the script tag with firebug, to see if the jQuery code really gets loaded. — mas-designs, Aug 30 '12 at 10:06
Make sure you have loaded Jquery before synchronization.js file. The order which you load javascript files is important! — ssilas777, Aug 30 '12 at 10:11

score 1 · Accepted Answer · answered Aug 30 '12 at 16:41

There are a few issues with your original code samples.

This <%= btnAddNewToMme.ClientID%> syntax does not work in ASP.NET markup configuration. You would need to use <%# %> DataBinding syntax.

Your CheckBeforeAddNew JavaScript function does not use the btnId, so you shouldn't need to pass this.

You don't need to use any jQuery either. All the functionality required is included in the ExtJS framework, which is already included on your Page.

Just pass an instance of the GridPanel into your JavaScript function, then encapsulate your logic for getting/checking the Selected Item count in the function.

Here's a fully functional sample demonstrating the scenario using Ext.NET 2.0. If you're using v1.x, the code .Before handler is basically the same, just the GridPanel Model config would be slightly different.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            var store = this.GridPanel1.GetStore();

            store.DataSource = this.Data;
            store.DataBind();
        }
    }

    private object[] Data
    {
        get
        {
            return new object[]
            {
                new object[] { "3m Co" },
                new object[] { "Alcoa Inc" },
                new object[] { "Altria Group Inc" },
                new object[] { "American Express Company" },
                new object[] { "American International Group, Inc." },
                new object[] { "AT&T Inc." },
                new object[] { "Boeing Co." },
                new object[] { "Caterpillar Inc." },
                new object[] { "Citigroup, Inc." },
                new object[] { "E.I. du Pont de Nemours and Company" },
                new object[] { "Exxon Mobil Corp" },
                new object[] { "General Electric Company" }
            };
        }
    }

    protected void Button1_Click(object sender, DirectEventArgs e)
    {
        X.Msg.Notify("Message", "Button1 Clicked").Show();
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Simple Array Grid - Ext.NET Examples</title>

    <script type="text/javascript">
        var checkSelected = function (grid) {
            if (grid.getSelectionModel().getCount() < 1) {
                Ext.Msg.alert('Error', 'Please select an Item');

                return false;
            }

            return true;
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:GridPanel 
        ID="GridPanel1"
        runat="server" 
        Title="Example" 
        Width="600" 
        Height="350">
        <Store>
            <ext:Store runat="server">
                <Model>
                    <ext:Model runat="server">
                        <Fields>
                            <ext:ModelField Name="company" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ColumnModel>
            <Columns>
                <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
            </Columns>            
        </ColumnModel>       
        <SelectionModel>
            <ext:RowSelectionModel runat="server" Mode="Multi" />
        </SelectionModel>
        <Buttons>
            <ext:Button runat="server" Text="Submit" Icon="Accept">
                <DirectEvents>
                    <Click OnEvent="Button1_Click" Before="return checkSelected(App.GridPanel1);" />
                </DirectEvents>
            </ext:Button>
        </Buttons>
    </ext:GridPanel>
</body>
</html>

Hope this helps.

I've never use `<%# %>` syntax could you provide some example of using it? — Harry89pl, Aug 30 '12 at 17:00
The following Microsoft article should help get you started, see http://support.microsoft.com/kb/307860 — geoffrey.mcgill, Aug 30 '12 at 17:05
I've made edited my question for better understanding the problem:) — Harry89pl, Aug 31 '12 at 07:13

use javascript function with ext.net control

1 Answers1