Onder Horka
Onder Horka

Reputation: 21

How to call external javascript function to ClientSideEvents.Click event?

I have DevExpress().Button on a website which should take specific grid value from a focused row and pass it to external function.

Here is my button:

@Html.DevExpress().Button(
             settings =>
             {
                 settings.Name = "btnMyName";
                 settings.Width = 120;
                 settings.Height = 25;
                 settings.Text = "MyText";
                 settings.Styles.Native = true;
                 settings.ClientEnabled = true;
                 settings.ClientSideEvents.Click = "function(s, e) { gridView.GetRowValues(gridView.GetFocusedRowIndex(), 'MyValue', OnGetRowValues); }";
}).GetHtml()

I simply can't reach OnGetRowValues function - always get the same exception:

Uncaught ReferenceError: OnGetRowValues is not defined

I have the script in the same folder as my .cshtml file and tried to reference it with <script src=""></script> in relative and absolute way. I tried to put the code to function directly between script tags to the cshtml page but nothing works and I get always the same error. The only solution which so far worked was to put the entire script as assingment to ClientSideEvents.Click but because the OnGetRowValues function is big, it will become messy and downright unpractical solution. Any help will be appreciated.

Upvotes: 0

Views: 1992

Answers (1)

Niranjan Singh
Niranjan Singh

Reputation: 18290

Go through Client-Side Events documentation and implement using below example:

<script type="text/javascript" src="~/Content/js/index.js"></script>
<script type="text/javascript">

    function ButtonClick(s,e)
    {
        gridView.GetRowValues(gridView.GetFocusedRowIndex(), 'ShipName', OnGetRowValues);
    }
</script>
@Html.DevExpress().Button(settings =>
{
    settings.Name = "btnGetSelectedRowValue";
    settings.UseSubmitBehavior = true;
    settings.ClientSideEvents.Click = "ButtonClick";
}).GetHtml()


@Html.Action("GridViewPartial")

index.js

// Value contains the "EmployeeID" field value returned from the server, not the list of values 
function OnGetRowValues(Value) {
    // Right code 
    alert(Value);
    // This code will cause an error 
    // alert(Value[0]); 
}

Hope this help..

Upvotes: 1

Related Questions