Form Editing

Sep 2, 2012 at 5:56 PM

Hi Tomasz, I am trying to create a grid with editing via forms.

I'm sure I'm doing something wrong because I fail to display the form correctly, you can help me?

 

@using Lib.Web.Mvc.JQuery.JqGrid;
@{
        ViewBag.Title = "Roles";
        var grid = new JqGridHelper<TaskManager.Models.RolModel>("roles",
        dataType: JqGridDataTypes.Json,
        methodType: JqGridMethodTypes.Post,
        pager: true,
        width: 700,
        rowsList: new List<int> { 10, 15, 20, 25, 30 },
        sortingName: "RolId",
        sortingOrder: JqGridSortingOrders.Asc,
        url: Url.Action("List", "Rol"),
        viewRecords: true
    ).Navigator(new JqGridNavigatorOptions { Search = false },
        editActionOptions: new JqGridNavigatorEditActionOptions { Url = Url.Action("UpdateRol","Rol") },
        addActionOptions: new JqGridNavigatorEditActionOptions { Url = Url.Action("InsertRol", "Rol") },
        deleteActionOptions: new JqGridNavigatorDeleteActionOptions { Url = Url.Action("DeleteRol", "Rol") }
    );
}

<h2>List</h2>

@grid.GetHtml()
<div id="dlgRol"></div>

@section JavaScript {
    <script id="rol-tmpl" type="text/x-jquery-tmpl">
        ${RolId}<br /><br />
        ${RolName}<br />
        ${Actions}
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            @grid.GetJavaScript()
            $('#dlgRol').dialog({ autoOpen: false, bgiframe: true, resizable: false, title: 'Rol' });
            $('a[roles_RolId]').live('click', function (e) {
                if (e.preventDefault)
                    e.preventDefault();
                else
                    e.returnValue = false;

                var dialogPosition = $(this).offset();
                $.post('@Url.Action("RolResult","Rol")', { RolId: $(this).attr('roles_RolId') }, function(data) {
                    $('#dlgRol').empty();
                    $('#rol-tmpl').tmpl(data).appendTo('#dlgRol');
                    $('#dlgRol').dialog('option', 'position', [dialogPosition.left, dialogPosition.top]);
                    $('#dlgRol').dialog('open');
                });
            });
        });
    </script>
}

 

By the way your development is excellent

Coordinator
Sep 3, 2012 at 6:39 AM

Hi debiagui,

At first glance your code looks correct, can you please describe some more symptoms of your issue (does the form appear but it looks incorrect, is there any error in JavaScript console etc.).

Regards,
Tomasz Pęczek


Sep 3, 2012 at 12:23 PM

Tomasz Hi thanks for your quick response, today I am developing on another pc different, but I mention it to inspect the code through firebug, no javascript errors, in  fact if I change the property "AutoOpen: false" to true the form shown but empty, I'm thinking that maybe some other script is preventing the normal course of implementation, tonight will try to leave the full sample with all source code.

Sep 3, 2012 at 1:14 PM
Edited Sep 3, 2012 at 1:16 PM

First, this is my model:

 

    using System.ComponentModel.DataAnnotations;
    using Lib.Web.Mvc.JQuery.JqGrid.DataAnnotations;
    using Lib.Web.Mvc.JQuery.JqGrid;

    public class RolModel
    {
            [Required]
            [ScaffoldColumn(false)]
            [JqGridColumnEditable(false)]
            public int RolId { get; set; }

            [Required]
            [JqGridColumnEditable(true, EditType = JqGridColumnEditTypes.Text)]
            [Display(Name = "Rol Name")]
            public string RolName { get; set; }

            [Required]
            [JqGridColumnEditable(true, "Actions", "Home", EditType = JqGridColumnEditTypes.Select)]
            [Display(Name = "Actions")]
            public string Actions { get; set; }
    }

 

Second, this is my ActionResult

 

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult List(JqGridRequest request, RolModel viewModel)
        {
            var query = _roleProvider.GetRoles();
            var totalRecords = query.Count();

            var response = new JqGridResponse
            {
                //Total pages count
                TotalPagesCount = (int)Math.Ceiling(totalRecords / (float)request.RecordsCount),
                ////Page number
                PageIndex = request.PageIndex,
                ////Total records count
                TotalRecordsCount = totalRecords
                };
                response.Records.AddRange(from r in query.Skip(request.PageIndex * request.RecordsCount).Take(request.RecordsCount)
                                select new JqGridRecord<RolModel>(Convert.ToString(r.RolId), 
                                    new RolModel
                                        {
                                            RolId = r.RolId, 
                                            RolName =r.RolName,
                                            Actions = string.Join(",", _roleProvider.GetActionsForRol(r.RolName))
                                        }));

                return new JqGridJsonResult{ Data = response};
        }

 

Third, this is the _Layout.cshtml

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
	<link href="@Url.Content("~/Content/jquery-ui.css")" media="screen" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/ui.jqgrid.css")" media="screen" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Site.css")" media="screen" rel="stylesheet" type="text/css" />
    @RenderSection("Css", false)
    <script src="@Url.Content("~/Scripts/jquery-1.8.0.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/grid.locale-es.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.23.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-2.5.3.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/SideBar.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>
    @RenderSection("JavaScript", false)
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<body>
    <div class="page">
        <header>
            <div id="title">
            </div>
        </header>
        <section id="main">
            @RenderBody()
        </section>

I've checked the code with firebug again now but have not found errors, everything seems to be correct, that I can add other information that serves to diagnose the problem.
thanks

Coordinator
Sep 4, 2012 at 10:13 AM

Hi debiagui,

As far as this code can be analyzed, everything seems to be in order. I'm afraid I can't figure out anything conrete from static analysis but the conflict between scripts seems the most probable cause.

Regards,
Tomasz Pęczek

Sep 9, 2012 at 1:59 AM
TPeczek wrote:

Hi debiagui,

As far as this code can be analyzed, everything seems to be in order. I'm afraid I can't figure out anything conrete from static analysis but the conflict between scripts seems the most probable cause.

Regards,
Tomasz Pęczek

 

Tomasz I recreated the references to all libraries jqGrid of my project and everything started to work, obviously had not all complete