Component View Editor

**kavit@bdtpark.com** · Jun 12, 2013, 4:55 AM

Hello Sir,

I want to use this (https://examples2.ext.net/#/DataView...ntView/Editor/) example. but I want to do little modification.

Modification are below:

Bring data from the database
when I save the data that will be save in database.

Is it possible? and if yes? then how can do it.

**Daniil** · Jun 12, 2013, 5:48 AM

Hi @kavit,

Well, binding and saving the data doesn't depend much what kind of columns you are using.

For example, binding from a database and saving to that same database is demonstrated here.
https://examples2.ext.net/#/GridPane...SqlDataSource/

I think it should work well with ComponentColumns.

Please note that I don't force you to use an SqlDataSource, it is just an example.

**kavit@bdtpark.com** · Jun 12, 2013, 8:07 AM

Originally Posted by Daniil

Hi @kavit,

Well, binding and saving the data doesn't depend much what kind of columns you are using.

For example, binding from a database and saving to that same database is demonstrated here.
https://examples2.ext.net/#/GridPane...SqlDataSource/

I think it should work well with ComponentColumns.

Please note that I don't force you to use an SqlDataSource, it is just an example.

Thank you sir...
Now I can get data from the database as you suggested

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ComponentViewDemo.Default" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ComponentView Overview - Ext.Net Examples</title>        
    

    <script type="text/javascript">
        function renderText(value) {
            return App.ComboStore.getById(value).data.Text;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server">
        </ext:ResourceManager>
    <div>
    <h1>ComponentView Editing</h1>
        
        <br />

        <ext:Store ID="ComboStore" runat="server">
            <Model>
                <ext:Model ID="Model1" runat="server" IDProperty="Value">
                    <Fields>
                        <ext:ModelField Name="Value" Type="Int" />
                        <ext:ModelField Name="Text" Type="String" />
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>

        <ext:DataView ID="DataView1" runat="server" Padding="6" DisableSelection="true" Width="450">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model ID="Model2" runat="server" IDProperty="StudentID">
                            <Fields>
                                <ext:ModelField Name="StudentID" Type="Int" />
                                <ext:ModelField Name="StudentName" Type="String" />
                                <ext:ModelField Name="StudentCity" Type="String" />
                                <ext:ModelField Name="StudentMarks" Type="Int" />
                             <%--   <ext:ModelField Name="Bool" Type="Boolean" />--%>
                                <ext:ModelField Name="editing" Type="Boolean" DefaultValue="false" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ItemTpl>
                <Html>
                    <tpl if="!editing">
                        <div style="position:relative; border: solid gray 1px; padding:6px; margin-bottom:6px;">
                            <p>ID: {StudentID}</p>
                            <p>Student Name: {StudentName}</p>
                            <p>City: {StudentCity}</p>
                            <p>Marks: {StudentMarks}</p>
                            <div class="edit-button" style="position:absolute; right: 10px; bottom:10px;"></div>
                        </div>                        
                    </tpl>

                    <tpl if="editing">
                        <div style="position:relative; border: solid gray 1px; padding:6px; margin-bottom:6px;">
                            <p>{NumberField}</p>
                            <p>{TextField}</p>
                            <p>{TextField3}</p>
                            <p>{TextField2}</p>
                            <div class="edit-button" style="position:absolute; right: 10px; bottom:35px;"></div>
                            <div class="cancel-button" style="position:absolute; right: 10px; bottom:10px;"></div>
                        </div>                        
                    </tpl>
                </Html>
            </ItemTpl>
            <Plugins>
                <ext:ComponentView ID="ComponentView1" runat="server">
                    <Items>
                        <ext:ViewItem Selector="div.edit-button" Tag="editing">
                            <Component>
                                <ext:Button ID="Button1" runat="server" Icon="NoteEdit" Handler="var record = this.record, editing = record.get('editing'); record.set('editing', !editing); if (editing) {record.commit(true);} " />
                            </Component>
                        </ext:ViewItem>

                        <ext:ViewItem Selector="div.cancel-button">
                            <Component>
                                <ext:Button ID="Button2" runat="server" Icon="Decline" Text="Cancel" Handler="this.record.reject();" />                                
                            </Component>
                        </ext:ViewItem>

                        <ext:ViewItem Value="NumberField" BoundField="StudentID">
                            <Component>
                                <ext:NumberField ID="NumberField1" runat="server" FieldLabel="Student ID" />
                            </Component>
                        </ext:ViewItem>

                        <ext:ViewItem Value="TextField" BoundField="StudentName">
                            <Component>
                                <ext:TextField ID="TextField1" runat="server" FieldLabel="Student Name" />
                            </Component>
                        </ext:ViewItem>


                        <ext:ViewItem Value="TextField3" BoundField="StudentCity">
                            <Component>
                                <ext:TextField ID="TextField3" runat="server" FieldLabel="Student City" />
                            </Component>
                        </ext:ViewItem>

                        <ext:ViewItem Value="TextField2" BoundField="StudentMarks">
                            <Component>
                                 <ext:TextField ID="TextField2" runat="server" FieldLabel="Student Marks" />
                            </Component>
                        </ext:ViewItem>
                    </Items>
                    <Listeners>
                        <BeforeComponentBind Handler="if(item.tag == 'editing') {component.text = record.data.editing ? 'Save' : 'Edit';}" />
                    </Listeners>
                </ext:ComponentView>
            </Plugins>
        </ext:DataView>
    </div>
    </form>
</body>
</html>

in Back end I have written below:

  protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                DataClasses1DataContext db = new DataClasses1DataContext();
                var v = (from c in db.Students
                         select c).Take(1);
                Store1.DataSource = v;
                Store1.DataBind();
              
            }
        }

Here I have attached the view which I am getting when I get data from the database.

Click image for larger version.

Name: img1.jpg
Views: 19
Size: 61.2 KB
ID: 6352

Click image for larger version.

Name: img2.jpg
Views: 23
Size: 64.9 KB
ID: 6353

Now I want to save changes into database. How can I do that.

**Daniil** · Jun 12, 2013, 12:41 PM

Please investigate these examples.
https://examples2.ext.net/#/search/saving

**kavit@bdtpark.com** · Jun 13, 2013, 11:02 AM

Originally Posted by Daniil

Please investigate these examples.
https://examples2.ext.net/#/search/saving

Thank you sir for you lovely hint..Now I am close to complete. In above source code I did modification as below:
In store I added event "OnAfterStoreChanged".

  <Store>
                    <ext:Store ID="Store1" runat="server" OnAfterStoreChanged="Store1_AfterChanged">
                        <Model>
                            <ext:Model ID="Model2" runat="server" IDProperty="StudentID">
                                <Fields>
                                    <ext:ModelField Name="StudentID" Type="Int" />
                                    <ext:ModelField Name="StudentName" Type="String" />
                                    <ext:ModelField Name="StudentCity" Type="String" />
                                    <ext:ModelField Name="StudentMarks" Type="Int" />
                                    <ext:ModelField Name="editing" Type="Boolean" DefaultValue="false" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>

and in button I modified as below:
First

 <ext:Button ID="Button1" runat="server" Icon="NoteEdit" Handler="var record = this.record, editing = record.get('editing'); record.set('editing', !editing); if (editing) {record.commit(true);} " />

Now

  <ext:Button ID="Button1" runat="server" Icon="NoteEdit" Handler="var record = this.record, editing = record.get('editing'); record.set('editing', !editing); if (editing) { #{Store1}.sync(); record.commit(true);} " />

and In cs file of the page I added event as below:

  protected void Store1_AfterChanged(object sender, AfterStoreChangedEventArgs e)
        {
            ResponseRecordsList r = e.ResponseRecords;
         
        }

I am getting modified data in object "e". Please see the screenshot as below:

Click image for larger version.

Name: event2.jpg
Views: 25
Size: 103.7 KB
ID: 6370

But I don't know how to use it?

**Daniil** · Jun 24, 2013, 9:59 AM

Originally Posted by kavit@bdtpark.com

I am getting modified data in object "e". Please see the screenshot as below:

But I don't know how to use it?

Well, you can save it to an external store (e.g. a database).

New and updated records should be put into a response in the state how they are actually saved to external store. For example, if you want to change any record field for some reason, that updated field should go to a response (e.ResponseRecords) to get the client side GridPanel updated accordingly.

Thread: Component View Editor

Thread Tools

Search Thread

Display

Component View Editor

Similar Threads

[CLOSED] Over editor combobox component record gets undefined

[CLOSED] TextArea as column editor corrupts GridPanel view

[CLOSED] Editable / Non Editable component column Grid View - Razor

[CLOSED] [1.0] Grouping view with Row Editor?

[CLOSED] [1.0] Two component at GridPanel View

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: Component View Editor

Component View Editor

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us