Hi when I try to use this :
<ej:Grid ID="gposted" AllowSelection="true" runat="server" AllowPaging="True" AllowResizeToFit="true" AllowSorting="True"><Columns>
<ej:Column Field="isChecked" HeaderText="#" Width="30" >
</ej:Column>
And my Datasource has isCheked Column type of bool I get the table with CheckBoxes . BUT I can't click on those checkboxes they have row=disabled .
How can I add checkboxes to Grid ?
Hi Sergiy,
We would like to let you know that the checkbox in Grid Columns will be enabled only during editing. To prevent modifying checkbox value, we have disabled checkbox when not editing the record.
If you need to have checkbox enabled in Grid columns, then we suggest you to use template column. Please refer the following code snippets.
<script type="text/x-jsrender" id="columnTemplate"> {{if Verified}} // based on the Verified column boolean value of Grid datasource <input type="checkbox" checked /> {{else}} <input type="checkbox" /> {{/if}} </script>
<ej:Grid ID="EmployeesGrid" runat="server" AllowSorting="true" AllowPaging="true" > <Columns> ... <ej:Column HeaderText="CheckBox Column" Template="true" TemplateID="#columnTemplate" Width="100" /> </Columns> </ej:Grid> |
For your convenience we have created a sample and the same can be downloaded from below link.
Sample: http://www.syncfusion.com/downloads/support/directtrac/129812/ASPSample-1804000813.zip
Please let us know if you need any further assistance.
Regards,
Alan Sangeeeth S
@Grid team
<ej:DataManager runat="server" ID="DataManager" URL="Default.aspx/DataSource" UpdateURL="Default.aspx/Update" RemoveURL="Default.aspx/Remove" InsertURL="Default.aspx/Insert" Adaptor="WebMethodAdaptor"/>
<ej:Grid runat="server" ID="Grid" EnableViewState="false" AllowPaging="true" DataManagerID="DataManager" >
<ClientSideEvents ActionBegin="actionBegin" ></ClientSideEvents>
<Columns>
. . .
<ej:Column Field="Verified" HeaderText="CheckBox Column" Template="true" TemplateID="#columnTemplate" Width="100" />
</Columns>
<EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" ></EditSettings>
<ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
</ej:Grid>
@template column
<script type="text/x-jsrender" id="columnTemplate">
{{if Verified == 0}}
<input type="checkbox" checked />
{{else}}
<input type="checkbox" />
{{/if}}
</script>
@server side
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object DataSource(DataManager value)
{
List<Orders> order = new List<Orders>();
order.Add(new Orders(1, "Nancy", "Sales Representative", "Seattle", "USA", 0));
order.Add(new Orders(2, "Andrew", "Vice President, Sales", "Tacoma", "USA", 0));
order.Add(new Orders(3, "Janet", "Sales Representative", "Kirkland", "USA", 1));
order.Add(new Orders(4, "Margaret", "Sales Representative", "Redmond", "USA", 1));
order.Add(new Orders(5, "Steven", "Sales Manager", "London", "UK", 0));
order.Add(new Orders(6, "Michael", "Sales Representative", "London", "UK", 0));
order.Add(new Orders(7, "Robert", "Sales Representative", "London", "UK", 1));
order.Add(new Orders(8, "Laura", "Inside Sales Coordinator", "Seattle", "USA", 0));
order.Add(new Orders(9, "Anne", "Sales Representative", "London", "UK", 1));
IEnumerable data = order;
. . .
return value.RequiresCounts? new { result = data, count = count } : data as Object ; //the count must be returned along with response while we enabled the paging
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static void Update(Orders value)
{
DataBaseDataContext _dataContext = new DataBaseDataContext();
//do stuff here
} |