Adding rows to data grid using jQuery

Jun 21, 2011 at 3:47 AM

Is it possible to add rows to the grid by using jQuery?  I am struggling to find a way to load a datagrid when the page is already present.  I want to do this via AJAX so my thought was to go to the server and get a collection of items to add to the grid.

I tried using an AJAX form around the control but I struck problems as the control is already in an AJAX form so it was getting a bit complicated.

Thanks,

Craig

Coordinator
Jun 21, 2011 at 8:36 AM

you can easily render the whole grid through ajax.

You can also trigger the function that add a new row to the grid, but then you must fill it with data, so you need to write a function that find each filed in the row in the row and fill it with data.

The function that add a new ro is:

DataGrid_ChecKInsertNewItem(itemRoot)

 

Where itemRoot is the id of the "container" of any row. It is normally called by the add butto that is in the insert template, so normally the itemRoot passed is the id of the row that contains the add button. You can see how its id is created by looking at the html code generated by the grid.

 

However if your purpose is jast filling an html template with Json data coming from the server, it is better to use the client side viewmodel approach explained here: 

http://mvccontrolstoolkit.codeplex.com/wikipage?title=Client-Side%20ViewModel%20%26%20Bindings

After you have read this you can read the specific documentation about client side templates:

http://mvccontrolstoolkit.codeplex.com/wikipage?title=Client-Side%20Templates

 

and some tutorilals :

Using Client Side Templates:

 

The example dode used in the tutorials is http://mvccontrolstoolkit.codeplex.com/releases/view/68354#DownloadId=249904

Please notice that a new version of the toolkit has been releases. See here the list of changes(some bugs have been removed, so you have better to change). You need just to change the toolkit dll and the main javascript file.

Jun 21, 2011 at 9:42 PM
Edited Jun 21, 2011 at 10:50 PM

Far out, you have me really confused now :)

I've been trawling through the documents and links you indicated and am totally confused with it.  I understand that I need to bind my ViewModel object to the DataGrid.  I basically start with an empty grid, I want to click a button and load the grid up with my content return from a JSON call.

So what I have is this for the data grid:

 

@Html.DataGridFor(model => model.PortfolioAllocations,ItemContainerType.tr, "PortfolioSetEditItem", "PortfolioSetDisplayItem", "PortfolioSetGrid", "PortfolioSetInsertItem"

) 

and have this defined to do the client bindings.

var bindings = Html.ClientViewModel("pfaHandling", m => m.PortfolioAllocations);

bindings.AddMethod("addNewItem",@"function () {

this.PortfolioAllocations.push(this.ItemToAdd());

this.ItemToAdd(null);

"});

This however now causing the Data Grid to complain about a NULL reference, which is weird cause I check the Model.PortfolioAllocations and it is created (with 0 items in it).

I then have a button on the page that when I click it I get back a JSON List<PortfolioAllocation> object of my View Model which I want to bind to this datagrid.  So I have this JS function on the page which I am wanting to use to now bind this to the DataGrid: 

function setAllocations(result) {  

if (result != null ) {

//This is where I have by List<PortfolioAllocation> which needs to be tied to the Data Grid.

 

for

(i = 0; i < result.length; i++) {

bindings.addNewItem(result[i]);

}

}

}

so inside the function I am trying to add each item in the list to the grid.  However this function never has a chance to get called during the page error with the rendering of the Data Grid.

Just as an aside, I tried all day yesterday to get the AJAX populating working but couldn't.  I think it has to do with my form structure and partial page structure making it exceedingly complex and JS seems to get all confused and I get JS errors in the core jQuery library.  So I have dumped this option and the only way I can see is with this jQuery loading of the grid.

Can you help?

Thanks,

Craig

PS - the examples on the site seem a bit weird, is there typos in it regarding the "Keywords" example.  There are references to "Keywords" and "ClientKeywords" but the model only has "Keywords" on it.

 

Coordinator
Jun 21, 2011 at 10:27 PM

Adding json data to a datagrid created with datagridfor is quite difficult. So I substantially suggesting to use clients side templates instead of the datagridfor, not to mix both of them.

In other terms if you use Clientside Templates you don't need at ALL the DataGridFor helper. You just define a table header using a <theader> tag, possibly a table footer and then you leave the <tbody> empty. This will be filled with the templates istantiated by json data, However the template is is not a template of the datagrid it is a client side template that is declared as explained here.

See how this examples work: http://mvccontrolstoolkit.codeplex.com/releases/view/68354#DownloadId=249904

 

Download them and just run them to see what you can do, then if you think that a similar think is ok for you go on with the documenation. and tutorials.

 

If you want to use the Datagridfor you can use theader and tbody as in the case of client side templates doing something like this:

 

	<table >
              <thead>
                  <tr>
                  <td><strong>column1</strong></td>
                  <td><strong>column2</strong></td>
                  <td><strong>column4</strong></td>
                  <td><strong>column5</strong></td>
                  
                  </tr>
              </thead>
              <tbody  id="ajaxTarget">
              </tbody>
              </table>

 

 

this will render an empty grid. When you click your button you make an ajax call to a controller that uses a datagridfor that just renders some <tr> containing your data(in this case data needs to be html, not json!) and append them to the <tbody> called ajaxTarget.

 

 

Jun 21, 2011 at 11:36 PM

I've been trying to get the other method of adding items to the Grid working by using the DataGrid_ChecKInsertNewItem method.  However this is not going for me either.

I tried to call the method like this:

DataGrid_ChecKInsertNewItem("PortfolioAllocations___" + i + "___Item_Value");

Where i is the index of the item in the array.  However it keeps falling over in the MVC Controls toolkit file on:

jQuery.validator.unobtrusive.parseExt('#'+ newItemName);

I am a bit confused by it cause when I put a break in the function and check the variable itemRoot it is exactly the same for when I call it manually and when it gets called via clicking the Add link.  I.e. PortfolioAllocations___0___Item_Value

However the "Add" one works where my Manual one doesn't.

Craig

Jun 22, 2011 at 4:26 AM

OK, I have given up on doing it this way.  The DataGrid error I was getting was due to it not being within a Html.BeginForm

Craig

Coordinator
Jun 22, 2011 at 9:11 AM

In the Mvc Controls Toolkit there are two types of templates: server side templates and client side templates. Both can be defined in a similar way either with Razor helpers, or as partial views, or as lambda expressions. However, server templates are istantiated on the sever. This means, they are filled with data on the server, while client side templates are filled with data on the client. Thus if you want to use json data on the client you are supposed to use client side templates, not the edit and display templates of the Datagrid that are server side templates. If you use client side templates you can continue using paging and sorting if you want ,since they are added as separate controls. You can also use the tracker object if you want. So you may have the same functionalities you have with the DataGrodFor helper.

About DataGrid_ChecKInsertNewItem need to receive the "item name" of the row that contains the "add button". You can get this id by just calling Html.PrefixedId(string.Empty) in the insert template and storing this name in some javascrip place. However, the problem is that this id always change as new rows are added...because when you add a new row, anew row containing an add button is added with a new id....so it is quite difficult to use this technique.

 

if you want to use the datagrid, since its templates are server side template, the best choice is to instantiate them on the sever, instead of trying hacks to add new rows and fill them with data. So, in this case I advice to follows what I said in my previous answer:

"""

If you want to use the Datagridfor you can use theader and tbody as in the case of client side templates doing something like this:

 

	<table >
              <thead>
                  <tr>
                  <td><strong>column1</strong></td>
                  <td><strong>column2</strong></td>
                  <td><strong>column4</strong></td>
                  <td><strong>column5</strong></td>
                  
                  </tr>
              </thead>
              <tbody  id="ajaxTarget">
              </tbody>
              </table>

 

 

this will render an empty grid. When you click your button you make an ajax call to a controller that uses a datagridfor that just renders some <tr> containing your data(in this case data needs to be html, not json!) and append them to the <tbody> called ajaxTarget.

 

""