[CLOSED] Grid panel Editing?

[Etisbew]

Hi,

I Have one grid panel and one button in my page.I am filling the grid with the fallowing columns

Id,Name(edit type textfield),Country(edit type ComboBox),State(edit type ComboBox),Salary(edit type textfield).

The above filed in the table Emp.

I am filling the grid panel with the aboveData.(I am adding one check box column at end first time it is unchecked for all rows)

My requirement is

1)If i change the country ComboBox the state ComboBox is set to set the first item.

2)I need check the checkbox column if any thing is changed in the that row.

3) In the button click event i want the rows which is checked(Changed)

Any one give me the sample plz...

[Vladimir]

Hi,

You need to use AfterEdit event of GridPanel

AfterEdit : ( Object e )
Fires after a cell is edited.
grid - This grid
record - The record being edited
field - The field name being edited
value - The value being set
originalValue - The original value for the field, before the edit.
row - The grid row index
column - The grid column index

Listeners will be called with the following arguments:
e : Object
An edit event (see above for description)

1. "If i change the country ComboBox the state ComboBox is set to set the first item."

<AfterEdit Handler="if(e.field == 'Country'){e.record.set('State', 'required value')}" />

Replace 'required value' by value which should be set

2. "I need check the checkbox column if any thing is changed in the that row."
The same as first item

 <AfterEdit Handler="e.record.set('CheckColumnDataIndex', true)" />

Replace 'CheckColumnDataIndex' by your check column dataindex

3. "In the button click event i want the rows which is checked(Changed)"

    function getValues(grid){   
       var records = [],
             values = [];

       grid.store.each(function(r){
             if(r.get('PutHereCheckColumnDataIndex') === true){
                records.push(r);
             }
       });

       for (i = 0; i < records.length; i++) {
            var dataR = grid.store.prepareRecord(records[i].data, records[i], {});

            if (!Ext.isEmptyObj(dataR)) {
                values.push(dataR);
            }
        }

        return values
    }

Add the following ExtraParameter for Button's AjaxEvent

<ext:Parameter Name="rows" Value="Ext.encode(getValues(GridPanel1))" Mode="Raw"/>

[Etisbew]

Hi ,

Button's AjaxEvent does not have <ext:Parameter1)I am using the edit type <ext:TimeField Editable="false" runat="server">
</ext:TimeField>
It is coming with am and pm I want to set the 24 hour format.


2)If u r click on the edit of state column then user must have the alert that select the country first if country is null.How to validate this thing.

[Vladimir]

Hi,

1. ext:Parameter should be in ExtraParams collection of AjaxEvent


2. "If u r click on the edit of state column then user must have the alert that select the country first if country is null.How to validate this thing."
Use BeforeEdit event of GridPanel and show alert.


BeforeEdit : ( Object e )
Fires before cell editing is triggered. The edit event object has the following properties
grid - This grid
record - The record being edited
field - The field name being edited
value - The value for the field being edited.
row - The grid row index
column - The grid column index
cancel - Set this to true to cancel the edit or return false from your handler.
Listeners will be called with the following arguments:
e : Object
An edit event (see above for description)


Set

e.cancel=true;

if need to cancel the edit

<BeforeEdit Handler="if(e.field=='State' &amp;&amp; Ext.isEmpty(e.record.get('Country',false))){Ext.Msg.alert('Title','Message'); e.cancel=true;}" />

3.TimeField 24-hour format. Try to set Format="H:mm" for TimeField. Please note that we are working on TimeField now because it contains some problems. We should fix soon

[Etisbew]

Hi Vladsch,


"In the button click event i want the rows which is checked(Changed)"

<div class="forum-code">

    function getValues(grid){   
       var records = [],
             values = [];

       grid.store.each(function(r){
             if(r.get('PutHereCheckColumnDataIndex') === true){
                records.push(r);
             }
       });

       for (i = 0; i < records.length; i++) {
            var dataR = grid.store.prepareRecord(records[i].data, records[i], {});

            if (!Ext.isEmptyObj(dataR)) {
                values.push(dataR);
            }
        }

        return values
    }

I Added the following ExtraParameter for Button's AjaxEvent
<div class="forum-code">

<ext:Parameter Name="rows" Value="Ext.encode(getValues(GridPanel1))" Mode="Raw"/>

In the code behind i getting the result like this

"[{\"ID\":2,\"Time\":\"12:15 am\",\"ChangeType\":true},{\"ID\":3,\"Time\":\"12: 45 am\",\"ChangeType\":true}]"

Is it possible to get the above data in the datatable(like below). so that it will be easy to sent to the database.


Id Time ChangeType
2 12:15 true
3 12:45 true

[Vladimir]

Hi,

You can deserialize json to the XML, Dictionary or own Business object (if object has corresponding properties)

protected void SubmitValues(object sender, AjaxEventArgs e)
{
    //JSON representation
    string gridJson = e.ExtraParams["rows"];

    //XML representation
    XmlNode gridXml = JSON.DeserializeXmlNode("{records:{record:" + gridJson + "}}");

    //array of Dictionaries
    Dictionary<string, string>[] grid1Data = JSON.Deserialize<Dictionary<string, string>[]>(gridJson);
}

After it you can manually create required DataTable and put that data (we cannot directly put json to the DataTable because it have complex structure and mapping can't be perfomed, therefore you need to perform it manually, create columns/rows in DataTable and put values from deserialized object).