How to setup checkbox event in grid when edit mode
13 Replies
Hi Yukiko,
Based on your previous query you have requested to render checkbox based on another column value. So we have suggested you to achieve your requirement using EditTemplate feature of Grid. While rendering checkbox through editTemplate we have checked the condition based on another column value which is the cause of not rendering ejCheckBox while adding a new record in Grid.
To resolve the issue kindly render the checkbox in editTemplate write function when requestType is add.
Refer the below code example
| <script> function createcheckA(args){ return $("<input>"); } function writecheckA(args) { if (args.requestType == "add") { args.element.ejCheckBox() } if(args.rowdata.checkColumnA == "Y"){ args.element.ejCheckBox({checked :true, change: function (e) { . . . . . } }); } else if(args.rowdata.checkColumnA == "N"){ args.element.ejCheckBox({ checked: false, . . . . . . }); } } function readcheckA(args) { if (args.ejCheckBox("isChecked")) return "Y"; else return "N"; } function createcheckB(args) { return $("<input>"); } function writecheckB(args) { if (args.requestType == "add") { args.element.ejCheckBox() } if (args.rowdata.checkColumnB == "Y") { args.element.ejCheckBox({ checked: true, . . . . . . } }); } else if (args.rowdata.checkColumnB == "N") { args.element.ejCheckBox({ checked: false, . . . . . . }); } } function readcheckB(args) { if (args.ejCheckBox("isChecked")) return "Y"; else return "N"; } </script> |
Refer the below screenshot for the output
 |
Please get back to us if you have further queries.
Regards,
Prasanna Kumar N.S.V.
Hi Yukiko,
Based on your requirement you need to disable or enable the startDate field in a custom dialog based on the value of the checkbox. In your code example we found that you have used dialogEditorTemplate in Grid.
For other editModes we need to use editTemplate property to achieve the requirement. The purpose of using editTemplate property is used to create a custom editor i.e., we can used appropriate JS controls based on the column type.
As we have used dialogEditorTemplate in Grid, so while using template form we can change the HTML elements to appropriate JS controls based on the column type. This can be achieved by using actionComplete event of ejGrid. So, we cannot use editTemplate property for the checkColumn A and checkColumn B in dialogEditorTemplate.
To achieve this requirement we suggest you to render the ejCheckBox inside the dialog using actionComplete event and bind the change event to ejCheckBox. Using the change event of ejCheckBox we can disable or enable the startDate field in the Dialog.
Please refer the below code example.
| <ej:Grid ID="Grid1" runat="server" AllowPaging="True" DataSourceID="test34" ClientIDMode="AutoID" OnServerAddRow="Grid1_ServerAddRow" AllowCellMerging="true" AllowGrouping="true" OnServerEditRow="Grid1_ServerEditRow" AllowSorting="true"> <EditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true" EditMode="DialogTemplate" DialogEditorTemplateID="#temp" /> <PageSettings ShowDefaults="true" PageSize="2" Template="#pageSizeLOATmp" EnableTemplates="true" /> <ClientSideEvents ActionBegin="onbegin" MergeHeaderCellInfo="mergeHead" RowSelected="rowselect" ActionComplete="onGridActionCompleteEvent" BeforePrint="printLOA"/> <ToolbarSettings ToolbarItems="add,edit,delete,update,cancel" ShowToolbar="true"></ToolbarSettings> <Columns> <ej:Column Field="memberId" Width="100px" IsPrimaryKey="true"/> <ej:Column Field="first_name" Type="string" Width="80px" > </ej:Column> …... function onGridActionCompleteEvent(args) { $("#" + args.model.clientId).prepend($(".PrintHeaderLOA")); pageSetting(args, "LOA"); if (args.requestType == "beginedit" || args.requestType == "add") { …... if (args.model.editSettings.editMode == "dialogtemplate") { $("#ctl00_MainContent_ucPerson1_Grid1EditForm").find("#checkColumnA").ejCheckBox({ change: "checkchange" }); $.ajax({ type: "POST", url: "Default.aspx/DropDown", contentType: "application/json; charset=utf-8", dataType: "json", success: function (value) { $("#priceId").ejDropDownList({ dataSource: value.d, fields: { value: "priceId", text: "price1" }, width: "100%" }); }, error: function (e) { alert(e); } }); } } } function checkchange(args) { if (args.isChecked == false) { $("#ctl00_MainContent_ucPerson1_Grid1EditForm").find("#startDate").removeClass("e-disable"); } else if (args.isChecked == true) { $("#ctl00_MainContent_ucPerson1_Grid1EditForm").find("#startDate").addClass("e-disable"); } } |
Refer the below screenshots.
When checkbox is checked startDate is disabled.
When checkbox is unchecked startDate is enabled.
We have prepared a sample with the above mentioned changes. Please refer the below link for sample.
Regards,
Prasanna Kumar N.S.V
Hi Prasanna,
Thank you for your support. I could achieve my requirement.
One more thing that I found was after implemented this function, if it was unchecked in Grid by default, it gets disabled in custom dialog.
I would like to use checkbox like normal dialog even if grid checkbox was unchecked. Is it possible to do that in custom dialog?
I attach my program.
Thanks,
Yukiko
Attachment: test_ea378626.7z
Hi Prasanna,
Thank you for your replying.
I run your solution. I found that default setting of database is different from mine.
I attach my sample again. I changed default value of checkbox column to "N" in the member Table.
If data was like above, it shows like this.
When it comes to this situation, even if in your modified sample, checkbox doesn't work.
Thank you in advance,
Yukiko
Attachment: Checkbox_In_Dialogtemplate_a5f64831.7z
SIGN IN To post a reply.
