1

Hi all I have been looking for a lot of relative resource to deal with my problem, however it isn't useful to me, even if I have checked the "jQuery Bootgrid" and many websites , I still didn't find any great example out, hopefully someone who really know it can help me to give me any slim clues or any good simple.
By the way,
1. I wish I can use Ajax to update and see any modifies data between Browser and DB
2. Plesae give me example code
Thanks

Some problems issue
1.Ajax Connection
Front end 

   <table id="grid-data" class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th data-column-id="id" data-type="numeric">ID</th>
            <th data-column-id="sender" data-css-class="sender">Sender</th>
            <th data-column-id="received" data-order="desc">Received</th>
        </tr>
    </thead>
</table>

    <script>
    var grid = $("#grid-data").bootgrid({
        ajax: true,
        url: "WebForm3.aspx/x" // link to your web api
    });
</script>

Back End 

  public partial class WebForm3 : System.Web.UI.Page
    {
        [WebMethod]

        public static string x()
        {
            return "";
        }
    }

Messages 

Uncaught SyntaxError: Unexpected token < in JSON at position 6
    at JSON.parse (<anonymous>)
    at Function.n.parseJSON (jquery-2.1.1.min.js:4)
    at Object.success (jquery.bootgrid.min.js:6)
    at j (jquery-2.1.1.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-2.1.1.min.js:2)
    at x (jquery-2.1.1.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery-2.1.1.min.js:4)
Willie Cheng
  • 7,679
  • 13
  • 55
  • 68

2 Answers2

1

At the moment, bootgrid doesn't provide a way to achieve this out of the box. I'd recommend using X-editable (I prefer bootstrap version) together with bootgrid. Below are the steps to achieve what you want.

Include references

Include all the necessary script/css references in your page. In this example, I needed to include:

  • jQuery
  • Bootstrap
  • Bootgrid
  • xEditable (bootstrap-editable version)

Setup your bootgrid HTML

I got this from their examples:

<table id="grid-data" class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th data-column-id="id" data-type="numeric">ID</th>
            <th data-column-id="sender" data-css-class="sender">Sender</th>
            <th data-column-id="received" data-order="desc">Received</th>
        </tr>
    </thead>
</table>

Take note I added a data-css-class="sender" to the sender's column (th tag). This will make bootgrid insert a "sender" class to every td in that column.

Setup your bootgrid javascript

Just create your bootgrid as you would normally. Again, I got this sample from their page:

var grid = $("#grid-data").bootgrid({
    ajax: true,
    url: "/api/data/basic" // link to your web api
});

I keep a reference to the grid element here, because I need to bind an event to it, when its data is loaded, that is, when all rows (tr) with their respective td are created inside tbody html tag.

Bind X-editable to your td

Just bind the x-editable to your cells. We need to do this inside bootgrid's loaded event, because inside it we are sure all td elements were already created in the DOM.

grid.on("loaded.rs.jquery.bootgrid", function()
{
    /* Executes after data is loaded and rendered */
    /* looks for all td's with "sender" class...and make them editable... */
    grid.find("td.sender").editable({
        url: '/post', // web api url to your post
        title: 'Enter the sender...'
    });
});

Look X-editable example page for more examples. Read their docs to know how to use them.

Also take note X-editable is just one possibility, if you don't like it, or you are more familiar with other plugin, use it instead. Just make sure you configure it inside the bootgrid's loaded event, as I did.

When working with ajax, everytime you type in something in search box, order by a column, change the page, bootgrid will send a request and recreate everything inside tbody. Which means all tr and td will be removed from DOM and recreated (thus firing loaded again).

See JSFiddle.

Alisson Reinaldo Silva
  • 10,009
  • 5
  • 65
  • 83
  • Hi Alisson , thanks for your help and I will be trying it now , hopefully everything is okay, please help me more if I still have problems , thanks again – Willie Cheng Mar 09 '17 at 05:21
  • 1
    @WillieCheng you're welcome, and feel free to ask anything you need, I'll do my best to help you. – Alisson Reinaldo Silva Mar 09 '17 at 05:22
  • Hi Alisson ,first question is " Setup your bootgrid javascript "<-- I had tried it many times with url: "/api/data/basic" // link to your web api <-- I wish I can use Ajax to get Json data from my server site , but it isn't work , so that this setup is okay or not – Willie Cheng Mar 09 '17 at 05:31
  • 1
    @WillieCheng you should replace `/api/data/basic` with a link to your server API url, which returns your JSON data. But you can't just return any JSON, it must follow a specific structure. Check [here](http://www.jquery-bootgrid.com/Examples#data) in **JSON Response** tab. Before trying to build the bootgrid, just hit your server url in browser, and check if your API is returning the proper JSON. – Alisson Reinaldo Silva Mar 09 '17 at 05:35
  • Yes , I know what you mean ,in fact I have put more information in my question, hopefully you can help – Willie Cheng Mar 09 '17 at 05:47
  • by the way I am not using web api , I just use asp.net c# web form to do it , is it okay to do it , – Willie Cheng Mar 09 '17 at 05:50
  • 1
    @WillieCheng it's ok, I thought you already had a url in your server returning json. So, I recommend [adding API](http://stackoverflow.com/questions/20538119/adding-web-api-to-existing-asp-net-web-forms-application) to you webforms project, or maybe using [HttpHandler](http://stackoverflow.com/questions/8072745/how-to-return-a-json-object-in-standard-web-forms-net). – Alisson Reinaldo Silva Mar 09 '17 at 05:58
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/137623/discussion-between-willie-cheng-and-alisson). – Willie Cheng Mar 09 '17 at 05:59
  • 1
    I decided to change another object to finish my project, it isn't useful for me , anywhere thanks very much for your help – Willie Cheng Mar 13 '17 at 03:33
0

New idea for my problem
I have used the jqGrid to deal with my problem and it is very useful to handle UI(DataGrid) with CRUD for me and it also has a lot of specific instructions in Google if you need to more specific steps or operations, so that it should be very good idea to instead of BootGrid. it is my personal suggestion.

Willie Cheng
  • 7,679
  • 13
  • 55
  • 68