Hi,
I need to add a row on client side only without AJAX or Postback call. I try it in 2 ways but I am not able to render Template column on client side without AJAX or Postback.
1) I define a JSON array of items which will bcome data source by calling masterTableView.set_dataSource(). This array will store in hidden field and pass to server side on final postback.
2) I add rows(TR) and cells(TD) and set their values manually
In both approaches I am not able to rendered Template Item of Templete Column. on calling set_dataSource(), OnRowCreating client side event does not fire. Is it default?
Client Side:
Server SIde:
I need to add a row on client side only without AJAX or Postback call. I try it in 2 ways but I am not able to render Template column on client side without AJAX or Postback.
1) I define a JSON array of items which will bcome data source by calling masterTableView.set_dataSource(). This array will store in hidden field and pass to server side on final postback.
2) I add rows(TR) and cells(TD) and set their values manually
In both approaches I am not able to rendered Template Item of Templete Column. on calling set_dataSource(), OnRowCreating client side event does not fire. Is it default?
Client Side:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default2.aspx.cs" Inherits="TestGrid._Default2" %> |
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
<html xmlns="http://www.w3.org/1999/xhtml" > |
<head runat="server"> |
<title>Untitled Page</title> |
<script type="text/javascript" src="script/jquery/1.3.2/jquery.js"></script> |
<script type="text/javascript" src="json.js"></script> |
<telerik:RadScriptBlock ID="SB" runat="server"> |
<script type="text/javascript"> |
var dataItems = new Array(); |
var dataRows = 0; |
var empId = -999; |
var employee = |
{ |
EmployeeID : null, |
FirstName : null, |
LastName : null, |
Title : null, |
TitleOfCourtesy : null, |
BirthDate : null, |
Notes : null, |
create : function() |
{ |
var obj = new Object(); |
obj.EmployeeID = 0; |
obj.FirstName = ""; |
obj.LastName = ""; |
obj.Title = ""; |
obj.TitleOfCourtesy = ""; |
obj.BirthDate = ""; |
obj.Notes = ""; |
return obj; |
} |
}; |
$(document).ready(pageLoad); |
function pageLoad() |
{ |
var grd = $find("<%= RadGrid1.ClientID %>"); |
//loadGrid(grd); //Approach 1 |
loadGrid2(grd); //Approach 2 |
} |
function addEmployee() |
{ |
var newEmployee = employee.create(); |
newEmployee.FirstName = "Taimur"; |
newEmployee.LastName = "Khan"; |
newEmployee.EmployeeID = empId--; |
newEmployee.Title = "Mr"; |
newEmployee.Notes = "XYZ"; |
newEmployee.BirthDate = "12-12-1970"; |
var grd = $find("<%= RadGrid1.ClientID %>"); |
//Approach 1 |
//addNewItem(grd,newEmployee); |
//Approach 2 |
addNewItem2(grd,newEmployee); |
dataItems[dataRows] = newEmployee; |
document.getElementById("hdEmployees").value = $.toJSON(dataItems); |
} |
function loadGrid(grd) |
{ |
if(grd == null) |
return; |
var masterTable = grd.get_masterTableView(); |
if(masterTable == null) |
return; |
var ds = document.getElementById("hdEmployees").value; |
if(ds && ds != "") |
{ |
masterTable.set_dataSource($.parseJSON(ds)); |
masterTable.dataBind(); |
} |
} |
function addNewItem(grd,dataItem) |
{ |
if(grd == null || dataItem == null) |
return; |
var masterTable = grd.get_masterTableView(); |
if(masterTable == null) |
return; |
var ds = masterTable.get_dataSource(); |
if(!ds) |
ds = new Array(); |
ds[ds.length] = dataItem; |
masterTable.set_dataSource(ds); |
masterTable.dataBind(); |
document.getElementById("hdEmployees").value = $.toJSON(ds); |
} |
function loadGrid2(grd) |
{ |
if(grd == null) |
return; |
var ds = document.getElementById("hdEmployees").value; |
if(ds && ds != "") |
{ |
dataItems = $.parseJSON(ds); |
} |
} |
function addNewItem2(grd,dataItem) |
{ |
var masterTable = grd.get_masterTableView(); |
if(masterTable == null) |
return; |
if(dataRows == 0) |
{ |
dataRows = masterTable.get_dataItems().length; |
if(dataRows == 0) |
{ |
//delete row of "No record" |
masterTable._element.deleteRow(masterTable._element.rows.length-1); |
} |
} |
var tBodyNode = null; |
for(var i=0;i<masterTable._element.childNodes.length;i++) |
{ |
var node = masterTable._element.childNodes[i]; |
if(node.nodeName == "TBODY") |
{ |
tBodyNode = node; |
break; |
} |
} |
if(tBodyNode != null) |
{ |
tBodyNode.insertRow(-1); |
var newRowIndex = masterTable._element.rows.length - 1; |
var row = masterTable._element.rows[newRowIndex]; |
row.id = masterTable._element.id + "__" + newRowIndex; |
row.className = (dataRows == 0 || dataRows % 2 == 0) ? "rgRow" : "rgAltRow"; |
debugger; |
var columns = masterTable.get_columns(); |
for(var i=0;i<columns.length;i++) |
{ |
var uniqueName = columns[i]._data.UniqueName; |
masterTable._element.rows[newRowIndex].insertCell(i); |
var td = masterTable._element.rows[newRowIndex].cells[i]; |
if(uniqueName == "EmployeeID") |
{ |
td.innerHTML = dataItem.EmployeeID; |
td.style.display = "none"; |
} |
if(uniqueName == "mode") |
{ |
td.innerHTML = "Add"; |
td.style.display = "none"; |
} |
if(uniqueName == "FirstName") |
td.innerHTML = dataItem.FirstName; |
if(uniqueName == "LastName") |
td.innerHTML = dataItem.LastName; |
if(uniqueName == "Title") |
td.innerHTML = dataItem.Title; |
if(uniqueName == "TitleOfCourtesy") |
td.innerHTML = ""; |
if(uniqueName == "BirthDate") |
td.innerHTML = dataItem.BirthDate; |
if(uniqueName == "Notes") |
td.innerHTML = dataItem.Notes; |
} |
dataRows++; |
} |
} |
function OnCommand(sender,args) |
{ |
debugger; |
$get("<%= Panel1.ClientID %>").innerHTML = String.format("<b>RadGrid1_Command</b><br />CommandName : {0}, CommandArgument : {1} <br /><br />", args.get_commandName(), args.get_commandArgument()); |
//args.set_cancel(true); |
if(args.get_commandName() == "InitInsert") |
{ |
alert(""); |
} |
var currentPageIndex = sender.get_masterTableView().get_currentPageIndex(); |
var pageSize = sender.get_masterTableView().get_pageSize(); |
var sortExpressions = sender.get_masterTableView().get_sortExpressions(); |
var filterExpressions = sender.get_masterTableView().get_filterExpressions(); |
if(sortExpressions.length > 0 && filterExpressions.length > 0 && currentPageIndex > 0) |
{ |
sender.get_masterTableView().set_currentPageIndex(0); |
} |
var sortExpressionssortExpressionsAsSQL = sortExpressions.toString(); |
var filterExpressionsfilterExpressionsAsSQL = filterExpressions.toString(); |
} |
function OnRowDataBound(sender,args) |
{ |
var row = sender.get_masterTableView().get_dataItems()[0]; |
var cell = sender.get_masterTableView().getCellByColumnUniqueName(row, "CurrencyId"); |
// conditional formatting |
args.get_item().get_cell("TitleOfCourtesy").style.fontWeight = (args.get_dataItem()["TitleOfCourtesy"] == "Dr.")? "bold" : "normal"; |
var sb = new Sys.StringBuilder(); |
sb.appendLine("<b>RadGrid1_RowDataBound</b><br />"); |
for(var item in args.get_dataItem()) |
{ |
sb.appendLine(String.format("{0} : {1}<br />", item, args.get_dataItem()[item])); |
} |
sb.appendLine("<br />"); |
sb.appendLine("<br />"); |
$get("<%= Panel1.ClientID %>").innerHTML += sb.toString(); |
} |
function OnDataBinding(sender,args) |
{ |
} |
function OnRowCreating(sender,args) |
{ |
} |
</script> |
</telerik:RadScriptBlock> |
</head> |
<body > |
<form id="form1" runat="server"> |
<div> |
<asp:ScriptManager ID="ScriptManager1" runat="server" ></asp:ScriptManager> |
<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1NeedDataSource" > |
<MasterTableView AutoGenerateColumns="false" EditMode="InPlace" AllowAutomaticInserts="true" DataKeyNames="EmployeeID" CommandItemDisplay="Top"> |
<Columns> |
<telerik:GridBoundColumn DataField="EmployeeID" Display="false" DataType="System.Int32"> |
</telerik:GridBoundColumn> |
<telerik:GridBoundColumn DataField="mode" Display="false"> |
</telerik:GridBoundColumn> |
<telerik:GridBoundColumn DataField="FirstName" HeaderText="First Name"> |
</telerik:GridBoundColumn> |
<telerik:GridBoundColumn DataField="LastName" HeaderText="Last Name"> |
</telerik:GridBoundColumn> |
<telerik:GridBoundColumn DataField="Title" HeaderText="Title"> |
</telerik:GridBoundColumn> |
<telerik:GridBoundColumn DataField="TitleOfCourtesy" HeaderText="Title Of Courtesy" > |
</telerik:GridBoundColumn> |
<telerik:GridBoundColumn DataField="BirthDate" HeaderText="BirthDate" > |
</telerik:GridBoundColumn> |
<telerik:GridBoundColumn DataField="Notes" HeaderText="Notes"> |
</telerik:GridBoundColumn> |
<telerik:GridTemplateColumn HeaderText="Curr" UniqueName="CurrencyId"> |
<HeaderStyle Width="40px" HorizontalAlign="Center" VerticalAlign="Top" /> |
<ItemTemplate> |
<asp:DropDownList |
ID="drpCurrency" |
runat="server" |
Enabled="true" |
CssClass="select" |
Width="50px" |
onchange="DoCalculations(event);" > |
<asp:ListItem Text="Item 1" Value="1">Item 1</asp:ListItem> |
<asp:ListItem Text="Item 2" Value="2">Item 2</asp:ListItem> |
<asp:ListItem Text="Item 3" Value="3">Item 3</asp:ListItem> |
</asp:DropDownList> |
</ItemTemplate> |
<ItemStyle Width="5%" HorizontalAlign="Center" VerticalAlign="Top" /> |
</telerik:GridTemplateColumn> |
</Columns> |
<CommandItemTemplate> |
<input type="button" value="+" id="add" onclick="addEmployee();" /> |
</CommandItemTemplate> |
</MasterTableView> |
<ClientSettings> |
<ClientEvents OnCommand="OnCommand" OnDataBinding="OnDataBinding" OnRowCreating="OnRowCreating" /> |
</ClientSettings> |
</telerik:RadGrid> |
<asp:Button ID="button1" runat="server" OnClick="button1_Click" /> |
<asp:HiddenField ID="hdEmployees" runat="server" /> |
</div> |
<br /> |
<br /> |
Events: |
<asp:Panel ID="Panel1" Style="height: 200px; overflow: auto; padding: 15px;" CssClass="module" |
runat="server"> |
</asp:Panel> |
</form> |
</body> |
</html> |
using System; |
using System.Collections; |
using System.Collections.Generic; |
using System.Configuration; |
using System.Data; |
using System.Linq; |
using System.Web; |
using System.Web.Security; |
using System.Web.UI; |
using System.Web.UI.HtmlControls; |
using System.Web.UI.WebControls; |
using System.Web.UI.WebControls.WebParts; |
using System.Xml.Linq; |
using System.Web.Services; |
using System.Web.Script.Services; |
using System.Reflection; |
using Newtonsoft.Json; |
using Newtonsoft.Json.Schema; |
using CS.DataAccessLayer.EntityClasses; |
using CS.DataAccessLayer.CollectionClasses; |
using CS.CommonLib.ErrorHandling; |
using CS.BusinessClasses.Helpers; |
using CS.BusinessClasses.SystemAndApp; |
using CS.DataAccessLayer.HelperClasses; |
using CS.DataAccessLayer; |
using CS.BusinessClasses; |
using Telerik.Web.UI; |
using System.Globalization; |
using System.Drawing; |
using CS.DataAccessLayer.CSTypes; |
using CS.DataAccessLayer.FactoryClasses; |
using CS.DataAccessLayer.DaoClasses; |
using CS.DataAccessLayer.RelationClasses; |
//Check line 1651 |
using SD.LLBLGen.Pro.ORMSupportClasses; |
namespace TestGrid |
{ |
public partial class _Default2 : System.Web.UI.Page |
{ |
protected void Page_Load(object sender, EventArgs e) |
{ |
} |
protected void RadGrid1NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e) |
{ |
RadGrid1.MasterTableView.DataSource = Employees; |
} |
protected void button1_Click(object sender, EventArgs e) |
{ |
_employees = (List<Employee>)JsonConvert.DeserializeObject(hdEmployees.Value, typeof(List<Employee>)); |
RadGrid1.Rebind(); |
} |
private List<Employee> _employees = new List<Employee>(); |
public List<Employee> Employees |
{ |
get { return _employees; } |
} |
} |
public class Employee |
{ |
string firstName = ""; |
public string FirstName |
{ |
get { return firstName; } |
set { firstName = value; } |
} |
int employeeId = 0; |
public int EmployeeID |
{ |
get { return employeeId; } |
set { employeeId = value; } |
} |
string lastName = ""; |
public string LastName |
{ |
get { return lastName; } |
set { lastName = value; } |
} |
string title = ""; |
public string Title |
{ |
get { return title; } |
set { title = value; } |
} |
string toc = ""; |
public string TitleOfCourtesy |
{ |
get { return toc; } |
set { toc = value; } |
} |
public string BirthDate = ""; |
public string Notes = ""; |
} |
} |