grid Colum edit type boolean editmode dialogtemplate checkbox not showing checked

[Bruce Stevenson]

Greetings and thanks in advance;

I have several boolean values in my grid, and I am using a dialogtemplate to edit the rows.  when the row values are "true" I would expect them to be checked in the dialog.

I have tried the {{ if name}} and using functions in the complete function.

I have modified an on line project that represents the problem:

Double click on a row to edit it, check Priority, then Save.

the grid will display the updated value.

Double click on the same row and note the value displayed.

Thanks

Bruce Stevenson;

Attachment: Grid_b7d14547.zip

[Balaji Marimuthu]

Hi Bruce,

Thanks for contacting Syncfusion support.

We have modified the sample and bind the Boolean (checkbox) column to DialogTemplate using ejCheckBox checked property. Refer to the sample, code example, Help Document as below.

Sample: Sample-Grid

Help Document: http://help.syncfusion.com/js/api/ejcheckbox#members:checked

function complete(args) {

            if (args.requestType == "refresh" || args.requestType == "save") {

                $("#FlatGrid").ejWaitingPopup("hide");

            }

            if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") {

                //to change checkbox size while adding & editing the records

                if ($("#Priority").val() == "true")

                    $("#Priority").ejCheckBox({ size: "medium", checked: true });

                else

                    $("#Priority").ejCheckBox({ size: "medium", checked: false });

              

                   . . .

        }

Or you can use the jsrender to display the Boolean checkbox column in DialogTemplate. Refer to the code example as below.

    <script type="text/template" id="template">

       

            <tr>

                <td>Priority</td>

                <td>

                {{if Priority}}

                <input type="checkbox" id="Priority" name="Priority" checked="checked" class="e-field e-checkbox valid"  style="width:30px"/>

                {{else}}

                <input type="checkbox" id="Priority" name="Priority" class="e-field e-checkbox valid" style="width:30px" />

                {{/if}}

                </td>

                <td></td>

                <td></td>

            </tr>

           
    </script>

   <script type="text/javascript">

       

       

        function complete(args) {

            if (args.requestType == "refresh" || args.requestType == "save") {

                $("#FlatGrid").ejWaitingPopup("hide");

            }

            if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") {

                //to change checkbox size while adding & editing the records

                $("#Priority").ejCheckBox({ size: "medium" });

           }

   </script>

In provided samples, themes are not referred to display the Grid in properly. So, please refer to the following Help document themes in Grid, 

Help Document:  http://help.syncfusion.com/js/control-initialization#manual-reference-of-scripts-and-style-sheets-in-a-html-page

Folder location to refer the themes:

(installed location)\Syncfusion\Essential Studio\12.3.0.36\JavaScript\assets\css\web

Note: The default installed location is C:\Program Files (x86)\

Regards,
Balaji Marimuthu

[Bruce Stevenson]

that got it.

Thanks for the support.

Bruce Stevenson.

[Balaji Marimuthu]

Hi Bruce,

Thanks for the update.

We are happy that the provided solution helped you. Please get back to us if you need any further assistance.

Regards,
Balaji Marimuthu

[sabariswaran]

agree