checkbox disabled

[Sergiy Tokarchuk]

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]

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]

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]

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, 

Help documentation: https://help.syncfusion.com/aspnet/grid/data-adaptors#webmethod-adaptor 

We have also prepared a sample for your reference which can be download from following link, 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/DataBinding160653_(2)798504724 

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