How to Checked Checkbox on dynamic gridpanel

[fendiyono]

Hi,
2552025521

I have a Gridpanel with dynamic checkbox. The goal is when Detail Checkbox Checked, the current record View Checkbox is auto checked with true value.

The issue is, the view checkbox already Checked, but the detail checkbox not checked. in the console of the browser i got the error with cmp.record is undefined. i already attached the images.
here is the code snippet



function ComboBoxDetail_ClientChange(obj, currentSelected, lastSelected) {

console.log(obj)

if (currentSelected) {
var currId = obj.record.data.PK_Module_ID

window.App.StoreView.data.each(function (record) {

if (record.data.PK_Module_ID == currId) {
record.set('BView', currentSelected);

}

})




<ext:GridPanel ID="GridpanelAdd" ClientIDMode="Static" runat="server" Title="Title" AutoScroll="true">

<Store>
<ext:Store ID="StoreView" ClientIDMode="Static" runat="server" OnReadData="Store_ReadData">

<Model>
<ext:Model runat="server" ID="modelgrid" IDProperty="PK_Module_ID">
<Fields>
<ext:ModelField Name="BView" Type="String">
<Convert Handler=" if (value === 'Y') { return true } else { return value};" />
</ext:ModelField>

<ext:ModelField Name="BDetail" Type="String">
<Convert Handler=" if (value === 'Y') { return true } else { return value};" />
</ext:ModelField>

<ext:ModelField Name="IsView" Type="Boolean"></ext:ModelField>

<ext:ModelField Name="IsDetail" Type="Boolean"></ext:ModelField>

</Fields>
</ext:Model>
</Model>

</Store>
<Plugins>

<ext:FilterHeader ID="GridHeader1" runat="server" Remote="false" ClientIDMode="Static" />

</Plugins>

<ColumnModel ID="ColumnModel1" runat="server">
<Columns>

<ext:ComponentColumn ID="ComponentView" runat="server" Editor="true" DataIndex="BView" Flex="1" Text="View" Align="Center">
<Component>

<ext:Checkbox ID="ComboBoxView" runat="server" Editor="true" DataIndex="BView" Flex="1" Text="View"></ext:Checkbox>

</Component>
<Listeners>
<BeforeBind Handler=" if (e.record.data.IsSupportView==0) return false;"></BeforeBind>
</Listeners>
</ext:ComponentColumn>
<ext:ComponentColumn ID="ComponentDetail" runat="server" Editor="true" DataIndex="BDetail" Flex="1" Text="Detail" Align="Center">
<Component>



<ext:Checkbox ID="ComboBoxDetail" runat="server" Editor="true" DataIndex="BDetail" Flex="1" Text="Detail" >
<Listeners>
<Change Fn="ComboBoxDetail_ClientChange" />
</Listeners>

</ext:Checkbox>

</Component>
<Listeners>
<BeforeBind Handler=" if (e.record.data.IsSupportDetail==0) return false;"></BeforeBind>
</Listeners>
</ext:ComponentColumn>
</Columns>
</ColumnModel>

[fabricio.murta]

Hello, @fendiyono, and welcome to Ext.NET Forums!

For the code you provided I can't see anything obviously wrong. We could help though if you provided a full runnable test case so we could reproduce what you describe at our end.

You may be interested in checking these threads for info on how to make runnable test cases, but basically you can base your scenario off an existing example in Examples Explorer (https://examples5.ext.net/).

Here are the guidelines threads that will help you make a test case to share here:

- Tips for creating simplified code samples (http://forums.ext.net/showthread.php?61176-Tips-for-creating-simplified-code-samples)
- More Information Required (http://forums.ext.net/showthread.php?10205-More-Information-Required)
- Forum Guidelines (http://forums.ext.net/showthread.php?3440-Forum-Guidelines-For-Posting-New-Topics)

Looking forward to your follow-up!

[fendiyono]

Thanks for the information

here is the full code

A. Server side



Partial Class CobaView
Inherits System.Web.UI.Page

Private Sub CobaView_Load(sender As Object, e As EventArgs) Handles Me.Load
Try

BindData()

Catch ex As Exception

End Try
End Sub

Private Sub BindData()
Try

Dim listTest As New List(Of DataTest)

Dim test As New DataTest
test.IsSupportView = True
test.IsSupportDetail = True
test.BView = False
test.BDetail = False
listTest.Add(test)

test = New DataTest
test.IsSupportView = True
test.IsSupportDetail = True
test.BView = False
test.BDetail = False
listTest.Add(test)


StoreView.PageSize = 10
StoreView.DataSource = listTest
StoreView.DataBind()

Catch ex As Exception
Elmah.ErrorSignal.FromCurrentContext.Raise(ex)
Ext.Net.X.Msg.Alert("Error", ex.Message).Show()
End Try
End Sub


End Class

Friend Class DataTest
Public Property BView As Boolean
Public Property BDetail As Boolean
Public Property IsSupportView As Boolean
Public Property IsSupportDetail As Boolean
End Class



B. ClientSide



<%@ Page Title="" Language="VB" MasterPageFile="~/Site1.master" AutoEventWireup="false" CodeFile="CobaView.aspx.vb" Inherits="CobaView" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script type="text/javascript">
function ComboBoxDetail_ClientChange(obj, currentSelected, lastSelected) {
if (currentSelected) {
obj.record.set('BView', currentSelected);
}
};

</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<ext:FormPanel ID="FormPanel1" runat="server" ButtonAlign="Right" Height="185" Padding="5" Title="Title" Width="300">
<Items>
<ext:GridPanel ID="GridpanelAdd" ClientIDMode="Static" runat="server" Title="Title" AutoScroll="true">
<Store>
<ext:Store ID="StoreView" ClientIDMode="Static" runat="server">
<Model>
<ext:Model runat="server" ID="modelgrid" IDProperty="PK_Module_ID">
<Fields>

<ext:ModelField Name="BView" Type="String">
<Convert Handler=" if (value === 'Y') { return true } else { return value};" />
</ext:ModelField>

<ext:ModelField Name="BDetail" Type="String">
<Convert Handler=" if (value === 'Y') { return true } else { return value};" />
</ext:ModelField>

<ext:ModelField Name="IsSupportView" Type="Boolean"></ext:ModelField>
<ext:ModelField Name="IsSupportDetail" Type="Boolean"></ext:ModelField>

</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>

<ColumnModel ID="ColumnModel1" runat="server">
<Columns>

<ext:ComponentColumn ID="ComponentView" runat="server" Editor="true" DataIndex="BView" Flex="1" Text="View" Align="Center">
<Component>

<ext:Checkbox ID="ComboBoxView" runat="server" Editor="true" DataIndex="BView" Flex="1" Text="View"></ext:Checkbox>

</Component>
<Listeners>
<BeforeBind Handler=" if (e.record.data.IsSupportView==0) return false;"></BeforeBind>
</Listeners>
</ext:ComponentColumn>

<ext:ComponentColumn ID="ComponentDetail" runat="server" Editor="true" DataIndex="BDetail" Flex="1" Text="Detail" Align="Center">
<Component>

<ext:Checkbox ID="ComboBoxDetail" runat="server" Editor="true" DataIndex="BDetail" Flex="1" Text="Detail" >
<Listeners>
<Change Fn="ComboBoxDetail_ClientChange" />

</Listeners>
</ext:Checkbox>
</Component>
<Listeners>
<BeforeBind Handler=" if (e.record.data.IsSupportDetail==0) return false;"></BeforeBind>
</Listeners>
</ext:ComponentColumn>
</Columns>
</ColumnModel>

</ext:GridPanel>
</Items>

</ext:FormPanel>
</asp:Content>

[fabricio.murta]

Hello again, @fendiyono!

Sorry, your test case does not run. There are some references to entities we don't know; you may need to stub them out or change them by constants.

Please try to provide the test case in the format:



<%@ Page Language="vb" %>

<script runat="server">
Private Sub Page_Load(sender As Object, e As EventArgs)
If Not Ext.Net.X.IsAjaxRequest Then
rem Your page loading code here
End If
End Sub

rem other code behind code here (you can also define stub classes here)
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET Test case</title>
<script type="text/javascript">
// client-side custom scripts can go here
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager runat="server" />

<%-- Ext.NET markup code goes here--%>
</div>
</form>
</body>
</html>


This way we can just copypaste your example in a local project and run it, then we can focus on the actual problem.

[fendiyono]

Sorry for my miss understanding

hopefully this code will run



<%@ Page Language="C#" %>


<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}
}

private object[] Data
{
get
{
return new object[]
{
new object[] { "3m Co", "N","N", 1, 1 },
new object[] { "Alcoa Inc", "N","N", 1, 1 },
new object[] { "Altria Group Inc", "N","N", 1, 1 },
new object[] { "American Express Company", "N","N", 1, 1 },
new object[] { "American International Group, Inc.", "N","N", 1, 1}
};
}
}
</script>


<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET Test case</title>
<script type="text/javascript">
// client-side custom scripts can go here

function ComboBoxDetail_ClientChange(obj, currentSelected, lastSelected) {
if (currentSelected) {
obj.record.set('BView', currentSelected);
}
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager runat="server" />

<%-- Ext.NET markup code goes here--%>
<ext:FormPanel ID="FormPanel1" runat="server" ButtonAlign="Right" Height="400" Padding="5" Title="Title" Width="300">
<Items>
<ext:GridPanel ID="GridpanelAdd" ClientIDMode="Static" runat="server" Title="Title" AutoScroll="true">
<Store>
<ext:Store ID="Store1" ClientIDMode="Static" runat="server">
<Model>
<ext:Model runat="server" ID="modelgrid" IDProperty="PK_Module_ID">
<Fields>
<ext:ModelField Name="company" Type="String"></ext:ModelField>

<ext:ModelField Name="BView" Type="String">
<Convert Handler=" if (value === 'Y') { return true } else { return value};" />
</ext:ModelField>

<ext:ModelField Name="BDetail" Type="String">
<Convert Handler=" if (value === 'Y') { return true } else { return value};" />
</ext:ModelField>

<ext:ModelField Name="IsSupportView" Type="Boolean"></ext:ModelField>
<ext:ModelField Name="IsSupportDetail" Type="Boolean"></ext:ModelField>

</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>

<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column
runat="server"
Text="Company"
DataIndex="company"
Flex="1"
Sortable="false" />
<ext:ComponentColumn ID="ComponentView" runat="server" Editor="true" DataIndex="BView" Flex="1" Text="View" Align="Center">
<Component>

<ext:Checkbox ID="ComboBoxView" runat="server" Editor="true" DataIndex="BView" Flex="1" Text="View"></ext:Checkbox>

</Component>
<Listeners>
<BeforeBind Handler=" if (e.record.data.IsSupportView==0) return false;"></BeforeBind>
</Listeners>
</ext:ComponentColumn>

<ext:ComponentColumn ID="ComponentDetail" runat="server" Editor="true" DataIndex="BDetail" Flex="1" Text="Detail" Align="Center">
<Component>

<ext:Checkbox ID="ComboBoxDetail" runat="server" Editor="true" DataIndex="BDetail" Flex="1" Text="Detail">
<Listeners>
<Change Fn="ComboBoxDetail_ClientChange" />

</Listeners>
</ext:Checkbox>
</Component>
<Listeners>
<BeforeBind Handler=" if (e.record.data.IsSupportDetail==0) return false;"></BeforeBind>
</Listeners>
</ext:ComponentColumn>
</Columns>
</ColumnModel>

</ext:GridPanel>
</Items>

</ext:FormPanel>
</div>
</form>
</body>
</html>

[fabricio.murta]

Hello again, @fendiyono!

Thanks for the test case, I could run it here. What you are getting is, when you change the value of the record, the row gets redrawn; this, in turn, resets the component where the change event is being called; thus you reach an inconsistent state where you ultimately miss the record field associated to the now-defunct checkbox instance.

What you need is to let the change event go without nesting change events in the row/component. So, simply set the change to the record to be applied as soon as the current change event finishes; and for that you can just use the Ext.asap() client-side method (https://docs.sencha.com/extjs/7.3.1/classic/Ext.html#method-asap)!

To do so, just wrap the call to obj.recoird.set() in this method, like this:



Ext.asap(function () { obj.record.set('BView', currentSelected); });


This way your custom method will delay the change to the record to as soon as the event finishes, like a callback. Then it won't hit "deep code" with inconsistent data, and all runs smoothly.

Hope this helps!

[fendiyono]

it works now, thanks for the help

[fabricio.murta]

Glad it helped, thanks for the feedback!