Dynamic GridPanel Editable Cell (Cannot Solve This Problem For Days)

  1. #1

    Dynamic GridPanel Editable Cell (Cannot Solve This Problem For Days)

    Hi,

    I have two nested GridPanels, both controls fill with Sql database. And i'm using Visual Basic, not ext.js functions.

    My problem is that; i can not make specific cell-based editing. I do not want column-based edit.

    For example; like this screenshot i only want to edit date columns such as "2016-12-01" and "Bilgi Tipi" column that says "Masraf Merkezi". I can edit only date columns, there's no problem in that. But i cannot prevent the other rows of these date columns which comes being editable.




    I want to prevent the editable of other rows. The screenshot is below;





    I shared my codes below and I did the critical code part bold.



    PAGE;

    <ext:Store ID="StoreDailyWork" runat="server" AutoSave="true" ShowWarningOnFailure="false"
    ClientIdProperty="PhantomId" SkipIdForNewRecords="false" RefreshAfterSaving="None">
    <AutoLoadParams>
    <ext:Parameter Name="start" Value="0" Mode="Raw" />
    <ext:Parameter Name="limit" Value="30" Mode="Raw" />
    </AutoLoadParams>
    <Reader>
    <ext:JsonReader>
    <Fields>
    </Fields>
    </ext:JsonReader>
    </Reader>
    <Listeners>
    <Exception Handler="
    Ext.net.Notification.show({
    iconCls : 'icon-exclamation',
    html : e.message,
    title : 'EXCEPTION',
    autoScroll : true,
    hideDelay : 5000,
    width : 300,
    height : 200
    });" />
    <BeforeSave Handler="var valid = true; this.each(function(r){if(r.dirty && !r.isValid()){valid=false;}}); return valid;" />
    <DataChanged Handler="#{grdDailyWorkList}.getRowExpander().expa ndAll();" Delay="100" />
    </Listeners>
    </ext:Store>




    <ext:Store ID="StoreTerm" runat="server" AutoSave="true" ShowWarningOnFailure="false"
    SkipIdForNewRecords="false" RefreshAfterSaving="None">
    <Reader>
    <ext:JsonReader IDProperty="TERMID">
    <Fields>
    <ext:RecordField Name="TERMID" Mapping="TERMID" Type="Int" />
    <ext:RecordField Name="TERMLONGTEXT" Mapping="TERMLONGTEXT" Type="String" AllowBlank="false" />
    </Fields>
    </ext:JsonReader>
    </Reader>
    </ext:Store>



    <ext:Container ID="containerFilter" runat="server" LabelAlign="Left" Layout="Form" Width="320">
    <Items>
    <ant:SecuredExComboBox runat="server" StoreID="StoreTerm" ID="cmbTerm"
    FieldLabel="Dönem" LabelStyle="width:50px; padding-left:70px;" DisplayField="TERMLONGTEXT" ValueField="TERMID" MinChars="1">
    <DirectEvents>
    <Select OnEvent="Btns_Click">
    <EventMask ShowMask="true" Msg="İşlem Devam Ediyor.Lütfen Bekleyiniz."
    Target="CustomTarget" CustomTarget="={#{grdDailyWorkList}.body}" />

    <ExtraParams>
    <ext:Parameter Name="Term" Value="selected.id">
    </ext:Parameter>
    </ExtraParams>

    <ExtraParams>
    <ext:Parameter Name="Grid1" Value="Ext.encode(#{grdDailyWorkList}.getRowsValue s({selectedOnly : true}))" Mode="Raw"></ext:Parameter>
    </ExtraParams>

    </Select>
    </DirectEvents>
    </ant:SecuredExComboBox>
    </Items>
    </ext:Container>



    <ext:GridPanel ID="grdDailyWorkList" runat="server" ButtonAlign="Left" Icon="Table" Frame="true" Title="" AutoScroll="true"
    Height="500" Width="4070" Layout="Fit" StoreID="StoreDailyWork" StyleSpec="margin-top: 1px;">
    <ColumnModel>
    <Columns>
    <ext:ImageCommandColumn Width="60" Align="Center" Header="Onay">
    <Commands>
    <ext:ImageCommand Icon="RecordRed" CommandName="Unconf">
    <ToolTip Text="Onaysız" />
    </ext:ImageCommand>
    <ext:ImageCommand Icon="RecordBlue" CommandName="TL">
    <ToolTip Text="TL Onayı" />
    </ext:ImageCommand>
    <ext:ImageCommand Icon="RecordGreen" CommandName="SP">
    <ToolTip Text="SP Onayı" />
    </ext:ImageCommand>
    <ext:ImageCommand Icon="Accept" CommandName="MDR">
    <ToolTip Text="Müdür Onayı" />
    </ext:ImageCommand>
    </Commands>
    <PrepareCommand Fn="prepareCommand" />
    </ext:ImageCommandColumn>
    </Columns>
    </ColumnModel>


    <Plugins>
    <ext:RowExpander ID="RowExpander1" SingleExpand="false" runat="server" EnableCaching="true">
    <Template ID="Template1" runat="server">
    <Html>
    <div id="row-{EmployeeID}" style="background-color: White;"></div>
    </Html>
    </Template>
    <DirectEvents>
    <BeforeExpand OnEvent="BeforeExpand" Before="return !body.rendered;" Success="body.rendered=true;">
    <EventMask Msg="Yükleniyor..." ShowMask="true" Target="CustomTarget"
    CustomTarget="={#{grdDailyWorkList}.body}" />
    <ExtraParams>
    <ext:Parameter Name="RowNum" Value="record.json.RowNum" Mode="Raw" />
    <ext:Parameter Name="EmployeeID" Value="record.json.EmployeeID" Mode="Raw" />
    <ext:Parameter Name="TermID" Value="record.json.TermID" Mode="Raw" />
    </ExtraParams>
    </BeforeExpand>
    </DirectEvents>
    </ext:RowExpander>
    </Plugins>

    <TopBar>
    <ext:Toolbar ID="Toolbar3" runat="server">
    <Items>
    <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
    <ext:Button ID="bntToExcel" runat="server" Text="Excel'e Gönder" Flat="true" Icon="PageExcel"
    AutoPostBack="true" Hidden="False" OnClick="SaveExcel">
    <Listeners>
    <Click Fn="SaveExcel" />
    </Listeners>
    </ext:Button>
    </Items>
    </ext:Toolbar>
    </TopBar>

    <BottomBar>
    <ext:PagingToolbar runat="server" PageSize="30" DisplayInfo="true"
    DisplayMsg="Displaying transfers {0} - {1} of {2}" EmptyMsg="No transfers to display" />
    </BottomBar>

    <LoadMask ShowMask="true" />

    <SelectionModel>
    <ext:CheckboxSelectionModel ID="CheckboxSelectionModel2" runat="server" RowSpan="2">
    </ext:CheckboxSelectionModel>
    </SelectionModel>

    </ext:GridPanel>





    CODEBEHIND;


    Private Sub FillGrid(s As Store, g As GridPanel, dt As DataTable)

    s.RemoveFields()

    For Each c As DataColumn In dt.Columns
    s.AddField(New RecordField(c.ColumnName, RecordFieldType.Auto))
    Next

    Dim f As New GridFilters()
    f.Local = True
    g.Plugins.Add(f)


    For Each c As DataColumn In dt.Columns
    Dim sFilter As New StringFilter()
    sFilter.AutoDataBind = True
    sFilter.DataIndex = c.ColumnName
    f.Filters.Add(sFilter)
    Next


    Dim col As Column = Nothing
    'g.ColumnModel.Columns.Clear()

    For Each c As DataColumn In dt.Columns

    col = New Column()
    col.DataIndex = c.ColumnName
    col.ColumnID = c.ColumnName
    col.Header = c.ColumnName

    If col.Header = "Confirmation" Then
    col.Hidden = True
    End If

    If col.Header = "TermID" Then
    col.Hidden = True
    End If

    If col.Header = "EmployeeID" Then
    col.Hidden = True
    End If

    If col.Header = "TeamID" Then
    col.Hidden = True
    End If


    If c.ColumnName = "Fullname" Then
    col.Width = Unit.Pixel(160)
    col.Header = "Adı Soyadı"
    End If

    If c.ColumnName <> "Fullname" Then
    col.Width = Unit.Pixel(110)
    End If


    If c.ColumnName = "EmployeeCode" Then
    col.Header = "Sicil"
    End If

    If c.ColumnName = "Content" Then
    col.Header = "İçerik"
    End If

    If c.ColumnName = "InfoType" Then
    col.Header = "Bilgi Tipi"
    End If


    col.Sortable = True
    col.Groupable = True
    col.MenuDisabled = False
    col.Align = Alignment.Center
    g.ColumnModel.Columns.Add(col)

    Next

    'g.Reconfigure()
    g.Render()
    s.DataSource = dt
    s.DataBind()
    g.DataBind()
    End Sub



    Protected Sub Btns_Click(ByVal sender As Object, ByVal e As DirectEventArgs)
    Try

    Dim termComp As New TermComponent

    Dim startDate As DateTime = Convert.ToDateTime(termComp.CSP_Get_TermStartEnd(c mbTerm.SelectedItem.Value).Rows(0)(0).ToString())

    Dim endDate As DateTime = Convert.ToDateTime(termComp.CSP_Get_TermStartEnd(c mbTerm.SelectedItem.Value).Rows(0)(1).ToString())

    Me.StoreDailyWork.SuspendScripting()
    Me.StoreDailyWork.UseIdConfirmation = False
    Me.StoreDailyWork.ResumeScripting()

    Dim SN As Ext.Net.DefaultSelectionModel = TryCast(Me.TreeOrganizations.SelectionModel.Primar y, Ext.Net.DefaultSelectionModel)

    Dim TeamID As Integer = SelectedNodeID()

    Dim dtDWMonthConfirm As DataTable = termComp.CSP_DailyWork_MonthConfirm(startDate, endDate, TeamID)

    For Each row As DataRow In dtDWMonthConfirm.Rows
    For Each column As DataColumn In dtDWMonthConfirm.Columns
    Dim index As Integer = row.Table.Columns(column.ColumnName).Ordinal

    If index > 5 And row.Item(column.ColumnName) Is System.DBNull.Value = True Then
    column.ReadOnly = False
    row.Item(column.ColumnName) = 0
    End If

    Next
    Next

    FillGrid(StoreDailyWork, grdDailyWorkList, dtDWMonthConfirm)

    Catch ex As Exception
    log.Error(ex)
    End Try
    End Sub


    Protected Sub BeforeExpand(ByVal sender As Object, ByVal E As DirectEventArgs)
    Try
    Dim termComp As New TermComponent
    Dim startDate As DateTime =
    Convert.ToDateTime(termComp.CSP_Get_TermStartEnd(c mbTerm.SelectedItem.Value).Rows(0)(0).ToString())
    Dim endDate As DateTime =
    Convert.ToDateTime(termComp.CSP_Get_TermStartEnd(c mbTerm.SelectedItem.Value).Rows(0)(1).ToString())

    Dim rowNum As String = E.ExtraParams("RowNum")
    Dim EmployeeID As String = E.ExtraParams("EmployeeID")
    Dim TermID As String = E.ExtraParams("TermID")

    Dim store As New Store() With {.ID = "StoreRow_" & EmployeeID}

    Dim reader As JsonReader = New JsonReader()
    reader.IDProperty = "RowNum"

    Dim dtDWMonthConfirmDetail As DataTable =
    termComp.CSP_DailyWork_MonthConfirm_Detail(Convert .ToInt32(TermID), Convert.ToInt32(EmployeeID))


    For Each c As DataColumn In dtDWMonthConfirmDetail.Columns
    If c.ColumnName <> "EmployeeID" And c.ColumnName <> "TermID" Then
    reader.Fields.Add(c.ColumnName)
    End If
    Next

    store.Reader.Add(reader)

    store.DataSource = dtDWMonthConfirmDetail
    store.DataBind()

    Me.RemoveFromCache(store.ID)
    store.Render()
    Me.AddToCache(store.ID)


    Dim grid As New GridPanel() With
    {
    .ID = "GridPanelRow_" & EmployeeID,
    .StoreID = "{raw}StoreRow_" & EmployeeID,
    .AutoHeight = True,
    .AutoScroll = True,
    .Layout = "Fit",
    .Width = 4170
    }

    Dim recField As New RecordField
    recField.Name = "COSTCENTERID"
    recField.Mapping = "COSTCENTERID"

    Dim recField2 As New RecordField
    recField2.Name = "COSTCENTERDESC"
    recField2.Mapping = "COSTCENTERDESC"

    Dim jsonR As New JsonReader
    jsonR.Fields.Add(recField)
    jsonR.Fields.Add(recField2)
    jsonR.IDProperty = "COSTCENTERID"

    Dim str As New Store() With {.ID = "StoreCostCenters_" & EmployeeID}
    str.Reader.Add(jsonR)
    str.DataSource = termComp.CSP_Get_CostCenters()
    str.DataBind()

    Dim combobox As New Ext.Net.ComboBox
    combobox.Shadow = ShadowMode.Drop
    combobox.Mode = DataLoadMode.Local
    combobox.ForceSelection = True
    combobox.TriggerAction = TriggerAction.All
    combobox.DisplayField = "COSTCENTERDESC"
    combobox.ValueField = "COSTCENTERID"
    combobox.Name = "COSTCENTERID"
    combobox.AllowBlank = True
    combobox.Store.Add(str)



    For Each c As DataColumn In dtDWMonthConfirmDetail.Columns
    If c.ColumnName <> "EmployeeID" And
    c.ColumnName <> "TermID" Then

    If c.ColumnName = "EmployeeCode" Then
    grid.ColumnModel.Columns.Add(
    New Column() With
    {
    .Header = "Sicil No",
    .DataIndex = c.ColumnName,
    .Align = Alignment.Center,
    .Width = Unit.Pixel(110)
    })
    ElseIf c.ColumnName = "Fullname" Then
    grid.ColumnModel.Columns.Add(
    New Column() With
    {
    .Header = "Ad Soyad",
    .DataIndex = c.ColumnName,
    .Align = Alignment.Center,
    .Width = Unit.Pixel(160)
    })
    ElseIf c.ColumnName = "InfoType" Then
    grid.ColumnModel.Columns.Add(
    New Column() With
    {
    .Header = "Bilgi Tipi",
    .DataIndex = c.ColumnName,
    .Align = Alignment.Center,
    .Width = Unit.Pixel(110)
    })
    Else

    Dim col As New Column
    col.Header = c.ColumnName
    col.DataIndex = c.ColumnName
    col.Align = Alignment.Center
    col.Width = Unit.Pixel(110)
    col.Editable = True
    col.Editor.Add(combobox)
    grid.ColumnModel.Columns.Add(col)



    End If

    End If
    Next


    grid.ColumnModel.Columns(2).Hidden = True

    grid.ColumnModel.ID = "GridPanelRowCM_" + EmployeeID
    grid.View.Add(New Ext.Net.GridView() With {.ID = "GridPanelRowView_" & EmployeeID, .ForceFit = True})

    Ext.Net.X.Get("row-" + EmployeeID).SwallowEvent(New String() {"click", "mousedown", "mouseup", "dblclick"}, True)

    Me.RemoveFromCache(grid.ID)
    grid.Render("row-" + EmployeeID, RenderMode.RenderTo)

    Me.AddToCache(grid.ID)

    Catch ex As Exception
    log.Error(ex)
    End Try
    End Sub
    Last edited by CYetik; Apr 13, 2017 at 4:32 PM.
  2. #2
    I solved this problem by using this code block;

    Dim col As New Column
    col.EditorOptions.Listeners.StartEdit.Handler = "this.field.setReadOnly(this.record.data.InfoT ype != 'Masraf Merkezi');"

    If your InfoType column value is 'Masraf Merkezi' then only this row will be editable.

    But now i cannot solve another problem.
    Combobox in Gridpanel always returns ValueField after selected. Cannot display DisplayField.
    If i move the combobox out of Gridpanel, there's no problem.

    Who can help me?

Similar Threads

  1. Replies: 3
    Last Post: Jan 18, 2015, 4:50 PM
  2. Replies: 3
    Last Post: Dec 16, 2014, 12:40 PM
  3. Replies: 2
    Last Post: Dec 07, 2014, 9:03 PM
  4. Replies: 1
    Last Post: Mar 15, 2013, 12:33 AM
  5. Replies: 4
    Last Post: Jul 10, 2012, 5:35 PM

Posting Permissions