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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to enable or disable a template column based on another template column

Thread ID:

Created:

Updated:

Platform:

Replies:

132479 Sep 4,2017 09:04 PM UTC Sep 6,2017 06:56 AM UTC ASP.NET Core 3
loading
Tags: Grid
dsapo
Asked On September 4, 2017 09:04 PM UTC

Hi Support:

I have a grid with two template colums.

The first template column consist of a checkbox as follows:

<script type="text/x-jsrender" id="selectTmpl">

    {{if Active}}
        <input id="Selected" name="Selected" type="checkbox" checked />
    {{else}}
        <input id="Selected" name="Selected" type="checkbox"  />
    {{/if}}
</script>

The second template colum consist in a input textbox as follows:

<script type="text/x-jsrender" id="intervalTmpl">

    {{if Active}}
    <input id="amount" name="amount" type="number" value="{{:Amount}}"  />
    {{/if}}

</script>


We need that the input textbox will show only when the row has the checkbox as checked, otherwise the input should be hide.

How can I achieve that.

Thanks in advanced

David


Venkatesh Ayothi Raman [Syncfusion]
Replied On September 5, 2017 12:03 PM UTC

  
Hi David, 


Thanks for contacting Syncfusion support. 


We have achieved your requirement using same column template feature and bound the change of the checkbox input. In that change event, we can show or hide the input box based on that checkbox value. Please refer to the following code example, 

Code example: 
<ej-grid id="FlatGrid" allow-paging="true"   action-failure="actionFailure"> 
        <e-datamanager json="(IEnumerable<object>)ViewBag.datasource" update-url="NormalUpdate" insert-url="NormalInsert" remove-url="Home/NormalDelete" adaptor="remoteSaveAdaptor" /> 
        <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="@(EditMode.Normal)"></e-edit-settings> 
        <e-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() {"add","edit","delete","update","cancel" })"></e-toolbar-settings> 
        <e-columns> 
            .  .  . 
            <e-column template="#temp1" field="Verified"></e-column> 
            <e-column template="#temp2" field="EmployeeID"></e-column> 
        </e-columns> 
    </ej-grid> 
<script type="text/x-jsrender" id="temp1"> 
 
    {{if Verified}} 
    <input id="Verified" class="checkbox" name="Verified" type="checkbox" checked /> 
    {{else}} 
    <input id="Verified" class="checkbox" name="Verified" type="checkbox" /> 
    {{/if}} 
</script> 
 
<script type="text/x-jsrender" id="temp2"> 
    @*here we can show or hide the input text box based on that checkbox value*@ 
    {{if Verified}} 
    <input id="EmployeeID" name="EmployeeID" type="number" value="{{:EmployeeID}}" /> 
    {{else}} 
    <input id="EmployeeID" name="EmployeeID" type="hidden" value="{{:EmployeeID}}" /> 
    {{/if}} 
 
</script> 
<script type="text/javascript"> 
     
 
    $(document).on("change", "input[name='Verified']", function () { 
         
        if (this.checked) { 
 
            $(this).parents('tr').find('input[name="EmployeeID"]').attr("type", "number"); //shown the input box dynamically change checkbox the value 
        } 
        else 
            $(this).parents('tr').find('input[name="EmployeeID"]').attr("type", "hidden"); //hide the input box dynamically change the checkbox value 
    }); 
   
</script> 


We have also prepared a sample based on your requirement which can be download from following link, 




Regards, 
Venkatesh Ayothiraman. 


dsapo
Replied On September 5, 2017 03:10 PM UTC

Hi Venkatesh:

Thanks for your support.  I have only one question.

Would be possible inside the  $(document).on("change", "input[name='Selected']", function () 

to get the underlying data row from the datasource to be able to read a particular value related with the  record whose checkbox was clicked.

For example suppose that we need to show the texbox after the checkbox is checked ONLY when a field named "AllowChange" that is in the datasource (not rendered in the grid) has a value of True.

Thanks again


David 



           

 


Venkatesh Ayothi Raman [Syncfusion]
Replied On September 6, 2017 06:56 AM UTC

Hi David, 
 
Thanks for the update. 
 
Yes, we can get corresponding row details while check/uncheck the template column like as follows, 
 
Code example: 
$(document).on("change", "input[name='Verified']", function () { 
 
        var gridObj = $("#FlatGrid").ejGrid("instance"), row = $(this).parents('tr'), currentViewData = gridObj.getCurrentViewData(), index=gridObj.getIndexByRow(row); 
 
        var changedRowDetails = currentViewData[index];//here we can get the details of checked/unchecked the row details 
        console.log(changedRowDetails); 
        if (this.checked) { 
 
            $(this).parents('tr').find('input[name="EmployeeID"]').attr("type", "number"); //shown the input box dynamically change checkbox the value 
        } 
        else 
            $(this).parents('tr').find('input[name="EmployeeID"]').attr("type", "hidden"); //hide the input box dynamically change the checkbox value 
    }); 
   
 
Help documentation: 
1)      CurrentViewData: https://help.syncfusion.com/api/js/ejgrid#methods:getcurrentviewdata 
2)      row index: https://help.syncfusion.com/api/js/ejgrid#methods:getindexbyrow 
 
Based on that row values you may check the condition and show/hide the textbox template column.  
 
 
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.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon 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.Close Icon

;