[CLOSED] Grid Panel - CellSelectionModel with RowEditing Plugin

  1. #1

    [CLOSED] Grid Panel - CellSelectionModel with RowEditing Plugin

    Hi

    I am trying to mix 2 things here... I want to implement the row editing plugin.
    But I want user to navigate within cells while in view mode (non-edit). So I have merged the rowediting with cell selection model.

    But now, while I am editing a row, I am able to select cells from non-editable rows.
    Screenshot attached.



    How can I stop cell selection during row editing mode?

    Code given
     Html.X().GridPanel()
                .Cls("channel4-custom-grid grid-border-highlighted")
                .Border(true)
                .ColumnLines(true)
                .RowLines(true)
                .ID("myGrid")
                //.Height(400)
                .Width(500)
                .Store(
                    Html.X().StoreForModel().PageSize(5).Control(s =>
                    {
                        s.AutoSync = true;
                        s.Proxy.Add(
                            new RestProxy
                            {
                                AppendAction = false,
                                Reader = { 
                                    new JsonReader {
                                        Root = "data",
                                        MessageProperty = "message"
                                    }
                                },
                                API =
                                {
                                    Read = Url.Action("Read"),
                                    Update = Url.Action("Update"),
                                    Create = Url.Action("Create"),
                                    Destroy = Url.Action("Destroy")
                                },
                                Writer = {
                                    new JsonWriter
                                    {
                                        AllowSingle = true
                                    }
                                }
                            }
                        );
                        s.Listeners.Write.Fn = "onWrite";
                    })
                )
                
                .ColumnModel(
                 Html.X().Column().Width(20).TdCls("first-row"),
                    Html.X()
                        
                        .ColumnFor(Model, m => m.Id)
                        .ToBuilder<Column.Builder>()
                        .Width(40),
    
                    Html.X().ColumnFor(Model, m => m.Email)
                        .ToBuilder<Column.Builder>()
                        .Flex(1)
                        .Editor(
                            Html.X().TextField().AllowBlank(false).StandardVtype(ValidationType.Email).SelectOnFocus(true)
                                  .Listeners(l=>
                                {
                                    l.SpecialKey.Fn = "preventShiftTab";
                                })
                           
                                    
                        ),
    
                   Html.X().ColumnFor(Model, m => m.First)
                        .ToBuilder<Column.Builder>()
                        .Flex(1)
                        .Editor(
                            Html.X().TextField().AllowBlank(false).SelectOnFocus(true).Disabled(true)
                        ),
    
                   Html.X().ColumnFor(Model, m => m.Last)
                        .ToBuilder<Column.Builder>()
                        .Flex(1)
                        .Editor(
                            Html.X().TextField().AllowBlank(false).SelectOnFocus(true)
                                  .Listeners(l=>
                                {
                                    l.SpecialKey.Fn = "preventTab";
                                })
                        )
                )
              
                .SelectionModel(Html.X().CellSelectionModel())
                .BottomBar(
                Html.X().PagingToolbar())
                .Plugins(
                    Html.X().RowEditing().AutoCancel(false)
                    
                        .Listeners(l => {
                            l.CancelEdit.Handler = "if(e.record.phantom){e.store.remove(e.record);}";
                            l.ValidateEdit.Handler = "v";
                        })
                )
    Attached Thumbnails Click image for larger version. 

Name:	GridRowEditing.PNG 
Views:	93 
Size:	14.0 KB 
ID:	9961  
    Last edited by Daniil; May 06, 2014 at 6:54 AM. Reason: [CLOSED]
  2. #2
    Hi @RajivDutt,

    I would try the following listeners for the RowEditing plugin.
    <BeforeEdit Handler="e.grid.getSelectionModel().setLocked(true)" />
    <Edit Handler="e.grid.getSelectionModel().setLocked(false);" />
    <CancelEdit Handler="e.grid.getSelectionModel().setLocked(false);" />
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @RajivDutt,

    I would try the following listeners for the RowEditing plugin.
    <BeforeEdit Handler="e.grid.getSelectionModel().setLocked(true)" />
    <Edit Handler="e.grid.getSelectionModel().setLocked(false);" />
    <CancelEdit Handler="e.grid.getSelectionModel().setLocked(false);" />

    Thanks for your response.
    I want to stop the paging & sorting, while I am editing a row. When I click on the column to sort or click on the next button, it looses the data on the page.

    Is there any way to prevent that?

    Thanks,
    Rajiv Dutt
  4. #4
    What about to mask all except grid view element
    Please see the following sample
    <%@ Page Language="C#" %>
    
    
    <%@ Import Namespace="System.Collections.ObjectModel" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                
                store.DataSource = new List<object>
                {
                    new { 
                        Name = "Bill Foot", 
                        Email = "bill.foot@object.net", 
                        Start = new DateTime(2007, 2, 5), 
                        Salary = 37000, 
                        Active = true
                    },
                    new { 
                        Name = "Bill Little", 
                        Email = "bill.little@object.net", 
                        Start = new DateTime(2009, 6, 13), 
                        Salary = 53000, 
                        Active = true
                    },
                    new { 
                        Name = "Bob Jones", 
                        Email = "bob.jones@object.net", 
                        Start = new DateTime(2008, 10, 6), 
                        Salary = 70000, 
                        Active = true
                    },
                    new { 
                        Name = "Bob Train", 
                        Email = "bob.train@object.net", 
                        Start = new DateTime(2009, 5, 5), 
                        Salary = 68000, 
                        Active = true
                    },
                    new { 
                        Name = "Chris Johnson", 
                        Email = "chris.johnson@object.net", 
                        Start = new DateTime(2009, 1, 25), 
                        Salary = 47000, 
                        Active = true
                    }
                };
                
                store.DataBind();
            }
        }
    </script>
    
    
    <!DOCTYPE html>
        
    <html>
    <head runat="server">
        <title>GridPanel with RowEditor Plugin - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        
        <ext:XScript runat="server">
            <script>
                var addEmployee = function () {
                    var grid = #{GridPanel1};
                    grid.editingPlugin.cancelEdit();
    
    
                    // Create a record instance through the ModelManager
                    var r = Ext.ModelManager.create({
                        name: 'New Guy',
                        email: 'new@object.net',
                        start: Ext.Date.clearTime(new Date()),
                        salary: 50000,
                        active: true
                    }, 'Employee');
    
    
                    grid.store.insert(0, r);
                    grid.editingPlugin.startEdit(0, 0);
                };
                
                var removeEmployee = function () {
                    var grid = #{GridPanel1},
                        sm = grid.getSelectionModel();
    
    
                    grid.editingPlugin.cancelEdit();
                    grid.store.remove(sm.getSelection());
                    if (grid.store.getCount() > 0) {
                        sm.select(0);
                    }
                };
            </script>
        </ext:XScript>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" ScriptMode="Debug" />
            
            <h1>GridPanel with RowEditor Plugin</h1>
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server"
                Width="600"
                Height="400"
                Frame="true"
                Title="Employees">
                <Store>
                    <ext:Store ID="Store1" runat="server" PageSize="2">
                        <Sorters>
                            <ext:DataSorter Property="start" Direction="ASC" />
                        </Sorters>
                        <Model>
                            <ext:Model runat="server" Name="Employee">
                                <Fields>
                                    <ext:ModelField Name="name" ServerMapping="Name" Type="String" />
                                    <ext:ModelField Name="email" ServerMapping="Email" Type="String" />
                                    <ext:ModelField Name="start" ServerMapping="Start" Type="Date" />
                                    <ext:ModelField Name="salary" ServerMapping="Salary" Type="Float" />
                                    <ext:ModelField Name="active" ServerMapping="Active" Type="Boolean" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <Plugins>
                    <ext:RowEditing runat="server" ClicksToMoveEditor="1" AutoCancel="false">
                        <Listeners>
                            <BeforeEdit Handler="#{Spot1}.show(#{GridPanel1}.view.el);" />
                            <Edit Handler="#{Spot1}.hide();" />
                            <CancelEdit Handler="#{Spot1}.hide();" />
                        </Listeners>
                    </ext:RowEditing>
                </Plugins>            
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button runat="server" Text="Add Employee" Icon="UserAdd">
                                <Listeners>
                                    <Click Fn="addEmployee" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="btnRemoveEmployee" runat="server" Text="Remove Employee" Icon="UserDelete" Disabled="true">
                                <Listeners>
                                    <Click Fn="removeEmployee" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>            
                <BottomBar>
                    <ext:PagingToolbar runat="server" />
                </BottomBar>
                <ColumnModel>
                    <Columns>
                        <ext:RowNumbererColumn runat="server" Width="25" />
                        <ext:Column runat="server"                         
                            Text="Name" 
                            DataIndex="name" 
                            Flex="1">
                            <Editor>
                                <ext:TextField runat="server" AllowBlank="false" />
                            </Editor>
                        </ext:Column>
                        <ext:Column runat="server" Text="Email" DataIndex="email" Width="160">
                            <Editor>
                                <ext:TextField runat="server" AllowBlank="false" Vtype="email" />
                            </Editor>
                        </ext:Column>
                        <ext:DateColumn runat="server" 
                            Text="Start Date" 
                            DataIndex="start" 
                            Format="MM/dd/yyyy" 
                            Width="100">
                            <Editor>
                                <ext:DateField 
                                    runat="server" 
                                    AllowBlank="false" 
                                    Format="MM/dd/yyyy"
                                    MinDate="01.01.2006" 
                                    MinText="Can not have a start date before the Company existed." 
                                    MaxDate="<%# DateTime.Now %>"
                                    AutoDataBind="true"
                                    />
                            </Editor>
                        </ext:DateColumn>
                        <ext:NumberColumn
                            runat="server"
                            Text="Salary" 
                            DataIndex="salary" 
                            Format="$0,0">
                            <Editor>
                                <ext:NumberField 
                                    runat="server" 
                                    AllowBlank="false" 
                                    MinValue="1" 
                                    MaxValue="150000" 
                                    />
                            </Editor>
                        </ext:NumberColumn>
                        <ext:CheckColumn
                            runat="server"
                            Text="Active?" 
                            DataIndex="active"                         
                            Width="50">
                            <Editor>
                                <ext:Checkbox runat="server" Cls="x-grid-checkheader-editor" />
                            </Editor>
                        </ext:CheckColumn>
                    </Columns>
                </ColumnModel>
                <Listeners>
                    <SelectionChange Handler="#{btnRemoveEmployee}.setDisabled(!selected.length);" />
                </Listeners>
            </ext:GridPanel>
    
    
            <ext:Spotlight ID="Spot1" runat="server" />
        </form>  
    </body>
    </html>
  5. #5
    Quote Originally Posted by Vladimir View Post
    What about to mask all except grid view element
    Please see the following sample
    <%@ Page Language="C#" %>
    
    
    <%@ Import Namespace="System.Collections.ObjectModel" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                
                store.DataSource = new List<object>
                {
                    new { 
                        Name = "Bill Foot", 
                        Email = "bill.foot@object.net", 
                        Start = new DateTime(2007, 2, 5), 
                        Salary = 37000, 
                        Active = true
                    },
                    new { 
                        Name = "Bill Little", 
                        Email = "bill.little@object.net", 
                        Start = new DateTime(2009, 6, 13), 
                        Salary = 53000, 
                        Active = true
                    },
                    new { 
                        Name = "Bob Jones", 
                        Email = "bob.jones@object.net", 
                        Start = new DateTime(2008, 10, 6), 
                        Salary = 70000, 
                        Active = true
                    },
                    new { 
                        Name = "Bob Train", 
                        Email = "bob.train@object.net", 
                        Start = new DateTime(2009, 5, 5), 
                        Salary = 68000, 
                        Active = true
                    },
                    new { 
                        Name = "Chris Johnson", 
                        Email = "chris.johnson@object.net", 
                        Start = new DateTime(2009, 1, 25), 
                        Salary = 47000, 
                        Active = true
                    }
                };
                
                store.DataBind();
            }
        }
    </script>
    
    
    <!DOCTYPE html>
        
    <html>
    <head runat="server">
        <title>GridPanel with RowEditor Plugin - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        
        <ext:XScript runat="server">
            <script>
                var addEmployee = function () {
                    var grid = #{GridPanel1};
                    grid.editingPlugin.cancelEdit();
    
    
                    // Create a record instance through the ModelManager
                    var r = Ext.ModelManager.create({
                        name: 'New Guy',
                        email: 'new@object.net',
                        start: Ext.Date.clearTime(new Date()),
                        salary: 50000,
                        active: true
                    }, 'Employee');
    
    
                    grid.store.insert(0, r);
                    grid.editingPlugin.startEdit(0, 0);
                };
                
                var removeEmployee = function () {
                    var grid = #{GridPanel1},
                        sm = grid.getSelectionModel();
    
    
                    grid.editingPlugin.cancelEdit();
                    grid.store.remove(sm.getSelection());
                    if (grid.store.getCount() > 0) {
                        sm.select(0);
                    }
                };
            </script>
        </ext:XScript>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" ScriptMode="Debug" />
            
            <h1>GridPanel with RowEditor Plugin</h1>
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server"
                Width="600"
                Height="400"
                Frame="true"
                Title="Employees">
                <Store>
                    <ext:Store ID="Store1" runat="server" PageSize="2">
                        <Sorters>
                            <ext:DataSorter Property="start" Direction="ASC" />
                        </Sorters>
                        <Model>
                            <ext:Model runat="server" Name="Employee">
                                <Fields>
                                    <ext:ModelField Name="name" ServerMapping="Name" Type="String" />
                                    <ext:ModelField Name="email" ServerMapping="Email" Type="String" />
                                    <ext:ModelField Name="start" ServerMapping="Start" Type="Date" />
                                    <ext:ModelField Name="salary" ServerMapping="Salary" Type="Float" />
                                    <ext:ModelField Name="active" ServerMapping="Active" Type="Boolean" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <Plugins>
                    <ext:RowEditing runat="server" ClicksToMoveEditor="1" AutoCancel="false">
                        <Listeners>
                            <BeforeEdit Handler="#{Spot1}.show(#{GridPanel1}.view.el);" />
                            <Edit Handler="#{Spot1}.hide();" />
                            <CancelEdit Handler="#{Spot1}.hide();" />
                        </Listeners>
                    </ext:RowEditing>
                </Plugins>            
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button runat="server" Text="Add Employee" Icon="UserAdd">
                                <Listeners>
                                    <Click Fn="addEmployee" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="btnRemoveEmployee" runat="server" Text="Remove Employee" Icon="UserDelete" Disabled="true">
                                <Listeners>
                                    <Click Fn="removeEmployee" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>            
                <BottomBar>
                    <ext:PagingToolbar runat="server" />
                </BottomBar>
                <ColumnModel>
                    <Columns>
                        <ext:RowNumbererColumn runat="server" Width="25" />
                        <ext:Column runat="server"                         
                            Text="Name" 
                            DataIndex="name" 
                            Flex="1">
                            <Editor>
                                <ext:TextField runat="server" AllowBlank="false" />
                            </Editor>
                        </ext:Column>
                        <ext:Column runat="server" Text="Email" DataIndex="email" Width="160">
                            <Editor>
                                <ext:TextField runat="server" AllowBlank="false" Vtype="email" />
                            </Editor>
                        </ext:Column>
                        <ext:DateColumn runat="server" 
                            Text="Start Date" 
                            DataIndex="start" 
                            Format="MM/dd/yyyy" 
                            Width="100">
                            <Editor>
                                <ext:DateField 
                                    runat="server" 
                                    AllowBlank="false" 
                                    Format="MM/dd/yyyy"
                                    MinDate="01.01.2006" 
                                    MinText="Can not have a start date before the Company existed." 
                                    MaxDate="<%# DateTime.Now %>"
                                    AutoDataBind="true"
                                    />
                            </Editor>
                        </ext:DateColumn>
                        <ext:NumberColumn
                            runat="server"
                            Text="Salary" 
                            DataIndex="salary" 
                            Format="$0,0">
                            <Editor>
                                <ext:NumberField 
                                    runat="server" 
                                    AllowBlank="false" 
                                    MinValue="1" 
                                    MaxValue="150000" 
                                    />
                            </Editor>
                        </ext:NumberColumn>
                        <ext:CheckColumn
                            runat="server"
                            Text="Active?" 
                            DataIndex="active"                         
                            Width="50">
                            <Editor>
                                <ext:Checkbox runat="server" Cls="x-grid-checkheader-editor" />
                            </Editor>
                        </ext:CheckColumn>
                    </Columns>
                </ColumnModel>
                <Listeners>
                    <SelectionChange Handler="#{btnRemoveEmployee}.setDisabled(!selected.length);" />
                </Listeners>
            </ext:GridPanel>
    
    
            <ext:Spotlight ID="Spot1" runat="server" />
        </form>  
    </body>
    </html>


    Thanks, can you provide me a sample how to use spotlight in MVC razor.
  6. #6
    Just the same use, add Spotlight to the page using Razor syntax
    @Html.X().Spotlight().ID("Spot1")
    and use appropriate RowEditing plugin listeners like in my sample
    Html.X().RowEditing().Listeners(l => {
        l.BeforeEdit.Handler = "#{Spot1}.show(#{GridPanel1}.view.el);";
        l.Edit.Handler = "#{Spot1}.hide();";
        l.CancelEdit.Handler = "#{Spot1}.hide();";
    })

Similar Threads

  1. Replies: 1
    Last Post: Feb 04, 2014, 3:30 PM
  2. RowEditing Plugin Not working
    By GKG4 in forum 2.x Help
    Replies: 2
    Last Post: Apr 27, 2013, 6:49 PM
  3. [CLOSED] Two column combo in grid rowediting plugin
    By ASAPCH in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 08, 2012, 4:52 PM
  4. [CLOSED] About the rowEditing plugin.
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 10, 2012, 11:31 AM
  5. [CLOSED] Grid RowEditing Plugin - Height
    By adelaney in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 13, 2012, 9:00 PM

Posting Permissions