Skip to main content Skip to footer

Custom Editor with Client-side Editing in GridView

ComponentOne GridView provides both client-side editing and server-side editing options to the end users. You can refer to the following demo's showing various editing techniques available in C1GridView: Server-Side Editing Client-Side Editing Server-Side Editing with Template Fields If you re-look at the list, you will observe that the following scenario is missing from it : Client-Side editing with template fields You must be wondering the reason it is missing, well it is because template fields are a server-side concept, hence, client side editing does not work on Template columns. However, don't lose hope! Read on...... This blog describes how we can display a custom editor with Client Side-editing in C1GridView. The trick is to hide the custom editor initially and then, append it in the current cell using the client- side object model of C1GridView. Let's get to work : Defining Custom Editor You can define any control as a custom editor at design time along with the C1Gridview. I have used the Dropdownlist control as it is the most common editor selected by any user/developer. Here is the source view;


<asp:ScriptManager runat="server" ID="sm1"></asp:ScriptManager>  

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">  
 <ContentTemplate>  
 <wijmo:C1GridView ID="C1GridView1" runat="server" DataKeyNames="ProductID"  
 CallbackSettings-Action="Editing"  
 OnClientAfterCellEdit="onAfterCellEdit"  
 OnClientBeforeCellEdit="onBeforeCellEdit"  
 OnClientBeforeCellUpdate="onBeforeCellUpdate"  
 AllowClientEditing="true"  
 AutoGenerateColumns="false" ShowRowHeader="true">  
 <Columns>  
 <wijmo:C1BoundField DataField="ProductID" HeaderText="ProductID" ReadOnly="true" />  
 <wijmo:C1BoundField DataField="ProductName" HeaderText="ProductName" />  
 <wijmo:C1BoundField DataField="SupplierID" HeaderText="SupplierID" />  
 <wijmo:C1CheckBoxField DataField="Discontinued" HeaderText="Discontinued" />  
 </Columns>  
 </wijmo:C1GridView>  

<div id="ddlParent">  
 <asp:DropDownList runat="server" ID="suppliersDDL" DataTextField="CompanyName" DataValueField="SupplierID" style="visibility:hidden; width:auto" />  
 </div>  
 </ContentTemplate>  
 </asp:UpdatePanel>  


Assigning Custom Editor to the cell You need to handle the 'OnClientBeforeCellEdit' event to unhide the custom editor and append it in the current cell. Also, you should use 'OnClientBeforeCellUpdate' and 'OnClientAfterCellEdit' events to manipulate the editor once the value is selected by the end user. Here is the JS code:


function onBeforeCellEdit(e, args) {  
 if (args.cell.column().dataField == "SupplierID") {  
  args.handled = true;  

 //get the container of the current cell  
 var container = args.cell.container(),  
  cellValue = $.trim(container.text()),  
  select = $("#<%= suppliersDDL.ClientID %>");  
 //unhide the customer editor  
 select.val(cellValue).css("visibility", "visible");  
 //append the editor to current cell  
 container.empty().append(select);  
 }  
}  

function onBeforeCellUpdate(e, args) {  
  if (args.cell.column().dataField == "SupplierID") {  
   args.value = $("#<%= suppliersDDL.ClientID %>").val();  

  //check if blank value is entered by end user  
  if (!args.value && (args.value !== 0)) {  
  window.alert("Empty values are not allowed.");  
  args.cell.container().find("input").focus();  
  return false;  
  }  
 }  
}  

function onAfterCellEdit(e, args) {  
  if (args.cell.column().dataField == "SupplierID") {  
   args.handled = true;  
   var select = $("#<%= suppliersDDL.ClientID %>");  
   //hide the customer editor  
   select.css("visibility", "hidden");  
   $("#ddlParent").append(select);  

   args.cell.container().text(args.cell.value() + "");  
  }  
 }  

Updating value at Server Side The last and most crucial part is updating the value selected by the end user using client-side editing at server-side. You can easily implement it by using RowUpdating and EndRowUpdated events of C1Gridview. The code will look this:



void C1GridView1_RowUpdating(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewUpdateEventArgs e)  
 {  
  List products = GetProducts();  

  ProductInfo product = products.Find(delegate(ProductInfo info)  
  {  
    return info.ProductID.Equals(e.Keys["ProductID"]);  
  });  

  if (product != null)  
  {  
   if (e.NewValues.Contains("ProductName"))  
    {  
     product.ProductName = (string)e.NewValues["ProductName"];  
    }  

   if (e.NewValues.Contains("SupplierID"))  
   {  
    product.SupplierID = (int)e.NewValues["SupplierID"];  
   }  

   if (e.NewValues.Contains("Discontinued"))  
   {  
    product.Discontinued = (bool)e.NewValues["Discontinued"];  
   }  
  }  
 }  

void C1GridView1_EndRowUpdated(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewEndRowUpdatedEventArgs e)  
 {  
  C1GridView1.DataSource = GetProducts();  
  C1GridView1.DataBind();  
 }  


That's it!! Run the above code and you will get the dropdown list showing Supplier names in the SupplierID column. If you face any issues while implementing the code or have any suggestions then feel free to post on our forums. Download Sample

MESCIUS inc.

comments powered by Disqus