Over a million developers have joined DZone.

Filling Flexigrid with JSON/XML data

DZone's Guide to

Filling Flexigrid with JSON/XML data

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

Flexigrid is one of the most useful and powerful grid plugins for jQuery. Unfortunately, as the author explains in the project page, there is no much documentation so you must learn how to use it looking at existing code.

If anytime you need to fill a Flexigrid with JSON or XML content and you are a little buggy to look at example code, here is the great summary:

Remember XML/JSON data must follow the next rules: total, page, rows. And for every row specify and id and a cell structure.

Next steps show you how to make it run step by step.

  • Sample data for both types are:
        page: 1,
        total: 2,
        rows: [
            {id: 'reg1',    cell: ['reg1-cell1','reg1-cell2']},
            {id: 'reg2',    cell: ['reg2-cell1','reg2-cell2']}
        <row id="reg1">
        <row id="reg2">
  • Put some element on your HTML document:
    <p id="yourId"></p>
  • Convert that element into a flexigrid with:
        url: 'your_file_name.json_or_xml',
        dataType: 'json',

Now you know how to build a gorgeous grid from XML or JSON data.


From http://acuriousanimal.com/blog/2011/12/09/filling-flexigrid-with-jsonxml-data/

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}