This is a migrated thread and some comments may be shown as answers.

Adding New Row in Grid on ClientSide

10 Answers 822 Views

Grid

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

10 Answers, 1 is accepted

answered on 20 Jan 2010, 12:39 AM

Hi Jamil,
I do not beleive this is currently enabled in the MVC grid. You could however easily get by this limitation with jQuery using something like: (Quick example)

    
              <script language="javascript">  
        
                    function AddToGrid() {  
        
                        var newItem1 = $("#col1").val();  //get new val 1
        
                        var newItem2 = $("#col2").val();  //get new val 2
        
                        var lastGridRow = $("#Grid tbody tr:last");  //Get the current last row in the grid
        
                        var gridItems = $("#Grid tbody");  //Get the grid row container
        
                        var lastIsAlternateRow = lastGridRow.hasClass("t-alt");  //see if the current last row has the alternating style class applied
        
                        var rowClass = "";  
        
                        if (!lastIsAlternateRow) //if the last row is not the alternate style, then the new one needs to have it  
        
                            rowClass = "t-alt";  
        
                        gridItems.append("<tr class='" + rowClass + "'><td>" + newItem1 + "</td><td>" + newItem2 + "</td></tr>"); //append the new row to the grid row container 
        
                        //You could then post the new values via an ajax call to persist them.  
        
                    }  
        
                </script>

    
             <%=Html.TextBox("col1") %><%=Html.TextBox("col2") %> 
        
                <input type="button" onclick="AddToGrid();" /> 
        
                <%Html.Telerik()  
        
                      .Grid(Model.RecentItems)  
        
                      .Name("Grid")  
        
                      .Columns(columns => { columns.Add(o => o.Name); columns.Add(o => o.ID); })  
        
                      .Render(); %>

Would that do what you are looking for?
Joshua Holt

answered on 20 Jan 2010, 11:30 AM

HI Joshua,

Thanks! for reply with quick example. I try your example that works great. But I was looking a way with json object. I even found couple of ideas, that I am going to share with you. I looked at the telerik.grid.js file and I understand the code.

There is a function in the js file called "bindTo" that basically binding data to grid. There are two other methods called "createColumnMappings" and "createMapping", that basically mapping a function with each column and what I understand is, that function has ability to get its column values from the json object as I saw in bindTo method it is working.

I got the idea to add a new method in grid called "addRow" and in that I can pass the json that basically understandable for the loaded gird, for example in your provided example it could

{
ID: 1,

Name: 'Jamil 123'
}

Today, I try that but I could not get the grid object on client side although in Telerik API they tell the way to get grid object on client. I try

var grid = $('#Grid').data('tGrid');

I got grid is undefined.

I further debug it and found the place where grid object is saved in "data" using jquery. Here is the code for that

$.fn.tGrid = function(options) {

options = $.extend({}, $.fn.tGrid.defaults, options);

return this.each(function() {

options = $.meta ? $.extend({}, options, $(this).data()) : options;

if (!$(this).data('tGrid')) {

var grid = new $t.grid(this, options);

$(this).data('tGrid', grid);

if (grid.$tbody.find('tr.t-no-data').length)

grid.ajaxRequest();

}

});

}

I try to debug it further to set a breakpoint in "each" method and even I do that console.log('dd') before the line

options = $.meta ? $.extend({}, options, $(this).data()) : options;

But that never executes so It seems to me that this chunk of code is not executing properly. I am debugging using firebug 1.4.

I am not sure what I am doing wrong.

Here is code of my example:

BUSINESS ENTITY

Employee.cs

public class Employee

{

public string ID { get; set; }

public string Name { get; set; }

}

CONTROLLER

public ActionResult Index()

{

List<string> s = new List<string>();

ViewData["Data"] = new List<Employee>() {

new Employee() { ID = "1", Name = "Jamil"},

new Employee() { ID = "2", Name = "Jami2"},

new Employee() { ID = "3", Name = "Jami3"},

new Employee() { ID = "4", Name = "Jami4"}

};

return View();

}

VIEW

Index.aspx

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

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

<%@ Import Namespace="System.Web.Mvc" %>

<title>Index</title>

function AddToGrid() {

var grid = $('#EGrid').data('tGrid');

alert(grid);

// grid.addItem({

// ID: "55",

// Name: "Jamil55"

// });

}

</script>

</head>

<body>

<div>

<%=Html.TextBox("col1") %><%=Html.TextBox("col2") %>

<%Html.Telerik()

.Grid((ViewData["Data"] as List<MvcApplication1.Employee>))

.Name("EGrid")

.Columns(columns => { columns.Add(o => o.Name); columns.Add(o => o.ID); })

.Render(); %>

</div>

</body>

</html>

Hope you understand my problem. I am using MVC 2 RC1. I even add the correct dll of Telerik.Web.MVC from Binary folder from the download.

JAMIL

answered on 20 Jan 2010, 12:13 PM

Hi Atanas,

Thanks for reply. Ok I'll not do that, but another issue, Client side events also not working and I can't get grid object on client side. Althougth a way is mentioned in the API help. Does telerik have issue with ASP.NET MVC 2 RC1? Will that work with MVC 1?

Here is the code:

function onLoad(e) {

//`this` is the DOM element of the grid

var mygrid1 = $(this).data('tGrid');

alert('grid loaded');

//event handling code

}

<%Html.Telerik()

.Grid((ViewData["Data"] as List<MvcApplication1.Employee>))

.Name("EGrid")

.Columns(columns => { columns.Add(o => o.Name); columns.Add(o => o.ID); })

.ClientEvents(events => events.OnLoad("onLoad"))

.Render(); %>

The alert 'grid loaded' never shows up. Please help.

Thanks!

JAMIL

answered on 21 Jan 2010, 11:51 AM

Guys!

Just want to share with you my solution. I got success in adding a new row on client using Teleriks's js functions. Here is the code for that.

function addItem(grid, data, lastGridRow) {

var lastIsAlternateRow = lastGridRow.hasClass("t-alt");

var rowHtml = new $.telerik.stringBuilder();

if (!lastIsAlternateRow)

rowHtml.cat('<tr class="t-alt">');

else

rowHtml.cat('<tr>');

for (var cellIndex = 0, colLength = grid.columns.length; cellIndex < colLength; cellIndex++)

rowHtml.cat('<td').cat(grid.columns[cellIndex].attr).cat("/>");

rowHtml.cat('</tr>');

$(rowHtml.string()).appendTo(grid.$tbody);

var rows = grid.$tbody[0].rows;

var row = rows[rows.length - 1];

for (var i = 0, l = grid.columns.length; i < l; i++) {

var column = grid.columns[i];

var evaluate = grid.createMapping(column); ;

if (evaluate)

row.cells[i].innerHTML = evaluate(data);

}

This is a stand alone function. I hope in next version of Telerik this will be included there.

Thanks!

JAMIL

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Adding New Row in Grid on ClientSide

10 Answers, 1 is accepted