DevExpress MVC Gridview

Question

Good day guys I'm trying to add a extra column on the grid view with this code. But when i run it. I cant click the button on the grid view. Got any idea what i'm doing wrong. Thanks

        settings.Columns.Add(column =>
        {
            column.FieldName = "Unbound";
            column.Caption = "Action";
            column.UnboundType = DevExpress.Data.UnboundColumnType.Object
            column.EditFormSettings.Visible = DevExpress.Utils.DefaultBoolean.True;
            column.ReadOnly = false;
            column.SetDataItemTemplateContent((c) =>
            {

                Html.DevExpress().Button(b =>
                {
                    b.Name = "btnVE" + c.KeyValue;
                    b.Text = "V/E";
                    b.ClientSideEvents.Click =
                    "function(s, e) { document.location='" + DevExpressHelper.GetUrl(new { Controller = "ViewPrincipal", Action = "EditRecord" })
                    + "?key=' + s.GetRowKey(e.visibleIndex); }";

                }).GetHtml();
            });
        });

        settings.Columns.Add("Id");
        settings.Columns.Add("Code");
        settings.Columns.Add("CompanyId");
        settings.Columns.Add("Description");
        settings.Columns.Add("ContactPerson");
        settings.Columns.Add("TelNo");
        settings.Columns.Add("Notes");

Update: i found the error on web via web developer tools but i dont know how to fix it Error button hover

Are you getting error in browser console? I suspected you're using wrong sender in `s.GetRowKey(e.visibleIndex)`, the sender is button object, not `MVCxGridView`. — Tetsuya Yamamoto, Oct 05 '18 at 08:12
@TetsuyaYamamoto... hmm.. i cant even fire the code. The grid view doesnt allow me to click on the added button. I cant figure out what code that will allow me to click on the button. — Jesun Bicar, Oct 05 '18 at 08:15

Tetsuya Yamamoto · Accepted Answer · 2018-10-05T08:52:30.247

2

Sounds like the problem is originated from s which assigned to button sender on this block instead of GridView row:

Html.DevExpress().Button(b =>
{
    b.Name = "btnVE" + c.KeyValue;
    b.Text = "V/E";
    b.ClientSideEvents.Click =
    "function(s, e) { document.location='" + DevExpressHelper.GetUrl(new { Controller = "ViewPrincipal", Action = "EditRecord" })
    + "?key=' + s.GetRowKey(e.visibleIndex); }"; // ==> 's' refers to button object as sender
}).GetHtml();

What you should use is GridViewDataItemTemplateContainer object to get KeyValue property for corresponding row, which returns integer value from GridViewBaseRowTemplateContainer:

column.SetDataItemTemplateContent((c) =>
{
    Html.DevExpress().Button(b =>
    {
        b.Name = "btnVE" + c.KeyValue;
        b.Text = "V/E";
        b.UseSubmitBehavior = false; // prevent default submit action
        b.EnableClientSideAPI = true; // add this line if not sure
        b.ClientSideEvents.Click =
        "function(s, e) { window.location = '" + DevExpressHelper.GetUrl(new { Controller = "ViewPrincipal", Action = "EditRecord" })
        + "?key=" + c.KeyValue.ToString() + "'; }";

    }).GetHtml();
});

Or using string.Format() which easier to read:

b.ClientSideEvents.Click = string.Format("function(s, e) {{ window.location = '{0}?key={1}'; }}", 
                           DevExpressHelper.GetUrl(new { Controller = "ViewPrincipal", Action = "EditRecord" }), 
                           c.KeyValue.ToString());

Notes:

1) If you want to get row index, use c.VisibleIndex.

2) For cross-browser concern, I preferred window.location to document.location as provided here.

Related issue: GridView - How to define Button inside grid

edited Oct 05 '18 at 08:52

answered Oct 05 '18 at 08:36

Tetsuya Yamamoto

24,297
8
39
61

i got some update on my main post. Can you check it out? – Jesun Bicar Oct 05 '18 at 08:51
The JS error provided seem to be truncated. Please provide the error as text instead of image. Also read [this reference](https://www.devexpress.com/Support/Center/Question/Details/Q463854/javascript-runtime-error-aspxaddhoveritems-is-undefined) for jQuery bundling. – Tetsuya Yamamoto Oct 05 '18 at 08:53
Found the answer. Your answer help me to realize some things. Thanks – Jesun Bicar Oct 05 '18 at 09:07
this gives me an error when i use your code The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult EditRecord(Int32)' in 'WMS_Web.Controllers.FileMaintenance.ViewPrincipalController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter. Parameter name: parameters – Jesun Bicar Oct 05 '18 at 09:46
In which part of code throwing the error, can you show `EditRecord` method definition? Sounds like you have `id` parameter for `EditRecord` function but you're passing different parameter name. – Tetsuya Yamamoto Oct 05 '18 at 09:51
the previous was int.. but now ive change it to a model.It pass thru but its null public ActionResult EditRecord(PrincipalModels id) { String x = id.Id; return PartialView("~/Views/FileMaintenance/Principal/EditPrincipal.cshtml", PrincipalInfo); } – Jesun Bicar Oct 05 '18 at 09:52
Sounds like you don't need to pass entire model as action parameter, just pass `Id` as integer key value for each row in the `GridView`. Then you can perform query to return entire model for displaying in partial view. – Tetsuya Yamamoto Oct 05 '18 at 09:56
Yes i did that . But it give the null error public ActionResult EditRecord(int id) { int x = id; return PartialView("~/Views/FileMaintenance/Principal/EditPrincipal.cshtml", PrincipalInfo); } – Jesun Bicar Oct 05 '18 at 10:00

score 0 · Answer 2 · answered Oct 05 '18 at 09:06

Found the problem. Apparently this should be place on the front of the view before the creation of the grid view. But i was thinking this should be a JScript. It should run asynchronous. Ohh well as long as it works. Thanks for the help @tetsuya

 @Html.DevExpress().GetStyleSheets(
        new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
        new StyleSheet { ExtensionSuite = ExtensionSuite.Editors, ExtensionType = ExtensionType.Button },
        new StyleSheet { ExtensionSuite = ExtensionSuite.GridView }

    )
    @Html.DevExpress().GetScripts(
        new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
        new Script { ExtensionSuite = ExtensionSuite.Editors, ExtensionType = ExtensionType.Button },
        new Script { ExtensionSuite = ExtensionSuite.GridView }
    )

DevExpress MVC Gridview

2 Answers2