Solved

Display data in jqGrid Footer row in MVC2 Application

Posted on 2010-08-17
1
3,560 Views
Last Modified: 2013-11-08
I need help display data in the jqGrid footer row. This is my configuration on the Server and below it is my HTML code Notice the userdata = (Hours) line.

The userData amount that I need displayed in the footer is coming through in the JSON. I am using Fiddler to view it. Here is a screenshot of the fiddler view:

I need to display this value of "12" in the footer. This the HTML I am using to read the JSON:
SERVER:

// Format the data for the jqGrid
        var jsonData = new
        {
            total = totalPages,
            page = page,
            records = totalRecords,                                 
            rows = (
                  from a in activities
                  select new
                  {
                      id = a.ActivityId,
                      cell = new string[] {
                      a.ActivityId.ToString(),                          
                      DateTime.Parse(a.Date.ToString()).ToShortDateString(),                          
                      a.Person.Name.ToString(),
                      a.ActivityName.ToString(),
                      a.Hours.ToString()                          
                    }
                  }).ToArray(),
            userdata = (Hours)
        };

        // Return the result in json
        return Json(jsonData, JsonRequestBehavior.AllowGet);

HTML:
jQuery("#list").jqGrid({
        url: gridDataUrl + '?startDate=' + startDate.toJSONString() + '&endDate=' + endDate.toJSONString(),
        datatype: "json",
        mtype: 'GET',
        colNames: ['Activity ID', 'Date', 'Employee Name', 'Activity', 'Hours'],
        colModel: [
          { name: 'ActivityId', index: 'ActivityId', width: 40, align: 'left' },
          { name: 'Date', index: 'Date', width: 50, align: 'left' },
          { name: 'Person.Name', index: 'Person.Name', width: 100, align: 'left', resizable: true },
          { name: 'ActivityName', index: 'ActivityName', width: 100, align: 'left', resizable: true },
          { name: 'Hours', index: 'Hours', width: 40, align: 'left' }
          ],
        loadtext: 'Loading Activities...',
        multiselect: true,
        rowNum: 20,
        rowList: [10, 20, 30],
        imgpath: gridimgpath,
        height: 'auto',
        width: '700',
        pager: jQuery('#pager'),
        sortname: 'ActivityId',
        viewrecords: true,
        sortorder: "desc",
        caption: "Activities",
        footerrow: true, userDataOnFooter: true, altRows: true       
    }).navGrid('#pager', { search: true, edit: false, add: false, del: false, searchtext: "Search Activities" });

Open in new window

JSON.jpg
0
Comment
Question by:obautista
1 Comment
 

Accepted Solution

by:
obautista earned 0 total points
ID: 33454364
This was the solution:

then the userdata part of the JSON data is:

  "userdata":{"Hours":12}

var jsonData = new {
    total = totalPages,
    page = page,
    records = totalRecords,
    rows = (
        from a in activities
        select new {
            id = a.ActivityId,
            cell = new string[] {
                a.ActivityId.ToString(),
                DateTime.Parse(a.Date.ToString()).ToShortDateString(),
                a.Person.Name.ToString(),
                a.ActivityName.ToString(),
                a.Hours.ToString()
            }
        }).ToArray(),
        userdata = new {
            Hours = 12
        }
    };

Open in new window

0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question