ASP.net Mvc 2.0 with JQGrid

Question

I have to implement inline editing with combobox in JQGrid,and i have to populate data in combobox from database no hard coded value i have already written the view part and i am using Linq to Sql as model but not able to write controller for that. I have got one sample for that but in sample repository design pattern has been used and i have not to use that.So can any on help me to write thebcontroller part. My view part is

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <link href="../../Content/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/JQGrid/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="../../Scripts/JQGrid/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="../../Scripts/JQGrid/jquery.jqGrid.src.js" type="text/javascript"></script>
    <script src="../../Scripts/JQGrid/grid.locale-en.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Grid").jqGrid(
      { url: '/Default/GetData',
          datatype: 'json',
          mtype: 'GET',
          colNames: ['Id', 'UserName', 'Organization', 'Report Type', 'EmailID', 'Action'],
          colModel: [

            { name: 'Id', index: 'Id', align: 'center', width: 30, editable: false },

           { name: 'UserName', index: 'UserName', align: 'center', width: 150, editable: true, edittype: 'select', formatter: 'select', editoptions: { dataUrl: '/Default/UserSelect' } },

           { name: 'Organization', index: 'Organization', align: 'center', width: 200, editable: true, edittype: 'select', formatter: 'select', editoptions: { dataUrl: '/Default/OrganizationSelect' }, editrules: { required: true} },

           { name: 'Report Type', index: 'Report Type', align: 'center', width: 200, editable: true, edittype: 'select', editoptions: { value: 'MN:Monthly; YR:Yearly', defaultValue: 'Montyhly'} },

           { name: 'EmailID', index: 'EmailID', align: 'center', width: 250, editable: true, edittype: 'text', editoptions: { size: 30, maxlength: 40} },

           { name: 'act', width: 100, align: 'center', sortable: false, formatter: 'actions', formatoptions: { keys: true, editbutton: true}}],


          pager: jQuery('#pager'),
          rowNum: 10,
          rowList: [5, 10, 20, 50],
          sortname: 'Id',
          sortorder: "asc",
          viewrecords: true,
          caption: 'Regen Users'

      });
        });


    </script>

    <title>Index</title>
</head>
<body>
    <div>
    <table id="Grid">
    </table>
    </div>
    <div id="pager">
    </div>
</body>
</html>

And my get data controller is as

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Important.Models;
using System.Linq.Dynamic;

namespace Important.Controllers
{
    public class DefaultController : Controller
    {
        RegenDataContext db = null;
        public DefaultController()
        {
            db = new RegenDataContext();
        }

        public ActionResult Index()
        {
            return View();
        }
        [HttpGet]
        public ActionResult GetData(string sidx, string sord, int page, int rows)
        {
            var pageIndex = Convert.ToInt32(page) - 1;
            var pageSize = rows;
            var totalRecords = db.rptUsers.Count(); 
            var totalPages = (int)Math.Ceiling(totalRecords / (float)pageSize);


            var user = db.rptUsers
                .OrderBy(sidx + " " + sord)
                .Skip(pageIndex * pageSize)
                .Take(pageSize).AsQueryable();

            var jsonData = new
            {

                rows = (
                from rptUser u in user
                select new 
                {
                    i=u.ID,
                    cell=new string[]{u.ID.ToString(),u.UserName, u.UserOrganizationID.ToString()}
                }).ToArray()

                };
            return Json(jsonData, JsonRequestBehavior.AllowGet);
        }


        public ActionResult UserSelect()
        {


            return View();
        }

        public ActionResult OrganizationSelect()
        {
            return View();
        }
    }

}

help me to write controller action for data url UserSelect.

score 0 · Answer 1 · edited May 23 '17 at 12:30

0

As per below jqGrid documentation

Setting the editoptions dataUrl parameter: The editoptions dataUrl parameter is valid only for element of edittype:select. The dataUrl parameter represent the url from where the html select element should be get. 
When this option is set, the element will be filled with values from the AJAX request. The data should be a valid HTML select element with the desired options - something like:
 <select> 
<option value='1'>One</option> 
<option value='2'>Two</option> 
...
</select>

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#edittype

something like below: NOT TESTED

public JsonResult UserSelect()
        {
            List<User> users=db.GetUsers();
            return Json(users,JsonRequestBehavior.AllowGet);
        }

View: jqGrid

editoptions: { dataUrl:'<%= Url.Action("xxxx","xxxx") %>',
                 buildSelect: function(data) {
                     var response = jQuery.parseJSON(data.responseText);
                     var s = '<select>';
                     if (response && response.length) {
                         for (var i = 0, l=response.length; i<l ; i++) {
                             var ri = response[i];
                             s += '<option value="'+ri+'">'+ri+'</option>';
                         }
                     }
                     return s + "</select>";
                 }
                }

Check this: ASP.NET MVC $.post call returning string...need help with format for jqGrid

edited May 23 '17 at 12:30

Community

1
1

answered Jun 23 '14 at 06:23

malkam

2,337
1
14
17

I have tried it but not getting the requierd result...can u plz test it as i am not getting how to use dis with my code – Aman Singh Jun 24 '14 at 04:06
Are you getting any errors or dropdownlist not populating.Share what you've tried – malkam Jun 24 '14 at 05:25
error is coming at GetUsers() method, can u plz elaborate where i have to declare this method with respect to my code – Aman Singh Jun 24 '14 at 06:54
Write your database access logic to get list of users and return from action method – malkam Jun 24 '14 at 07:02
can i define my GetUser() method in controller page or I have to define it somwhere else – Aman Singh Jun 24 '14 at 09:03
just see d way i have defined d GetUser() method,it is correct or not as i am not getting data in dropdown – Aman Singh Jun 24 '14 at 18:14

ASP.net Mvc 2.0 with JQGrid

1 Answers1