We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

checkbox disabled

Thread ID:

Created:

Updated:

Platform:

Replies:

117264 Sep 18,2014 10:00 PM Mar 3,2017 12:53 PM ASP.NET Web Forms 3
loading
Tags: Grid
Sergiy Tokarchuk
Asked On September 18, 2014 10:00 PM

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 ?


Alan Sangeeth S [Syncfusion]
Replied On September 19, 2014 08:15 AM

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


Steve Deshaies
Replied On March 2, 2017 12:56 PM

Thank you for this sample! Very helpful.

Continuing on with this same exact example:
- I would like to update the backend database with the new checkmark, via a stored procedure I have written in Microsoft SQL.
- datatype is a boolean bit field(0 or 1)

- I believe the javascript would need to fire an event that the codebehind would then run. Utilizing a column from the checkmarked row
as a parameter to the stored procedure.

Using Visual Studio 2015 ASP.Net WebForms. Microsoft SQL Server 2008 R2. 

Thanks for your time and help!

Steve


Venkatesh Ayothi Raman [Syncfusion]
Replied On March 3, 2017 12:53 PM

Hi Steve, 
Thanks for the update. 
We have achieved your requirement using WebMethod adaptor in Grid. In that, we can bind the data source and perform the CRUD operations such as Insert,Delete and Update at server side. Please refer to the help documentation for more information, 
We have also prepared a sample for your reference which can be download from following link, 

In this sample, we have bounded the dummy data source for your requirement. In that, we have rendered the check box template column based on the integer Boolean field. the modified values are sends to server side while saving the record. Please refer to the following code example and screenshot, 
 Code example
@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 
                 
 
             
        } 

Screenshot
 
Regards, 
Venkatesh Ayothiraman 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;