[CLOSED] Grid Panel Row Expander Keyboard navigation issue

[RajivDutt]

Hi

In the given example, save button takes the changes and updates the form.
http://mvc.ext.net/#/GridPanel_RowExpander/Component/

In my requirement, I am calling the updaterecord method on the blur event of the text box.

Given is the example:

Html.X().TextField().Name("company").FieldLabel("Company")       
.Listeners(l =>       
{            
l.Blur.Handler = "var form = this.up('form');  form.getForm().updateRecord(form.record);";                                        
}),

But as a side effect tab key does not work, clicking on the tab does not take it to Price Textbox. Also sometimes, mouse click on price text box also does not work, it requires to click twice on the textbox to start editing.

Is there any way to update the store, without having the save button. I want to update the store immediately after the focus is lost from the control.

Thanks,
Rajiv Dutt

[Daniil]

Hi @RajivDutt,

Yes, there might be problems with that, because an updateRecord call causes re-rendering of a GridPanel's row associated to the record.

Though, I cannot reproduce the behavior that you described. It appears to be working smoothly for me.

What Ext.NET version are you using and what browser are you testing with?

[RajivDutt]

Hi @RajivDutt,

Yes, there might be problems with that, because an updateRecord call causes re-rendering of a GridPanel's row associated to the record.

Though, I cannot reproduce the behavior that you described. It appears to be working smoothly for me.

What Ext.NET version are you using and what browser are you testing with?

Ext.Net version 2.2 and Browser is IE9

[Vladimir]

Try to add Delay=100 to Blur event
I am not sure that it can help because as Daniil said the component in row expander is rerendered after record updating

[RajivDutt]

Try to add Delay=100 to Blur event
I am not sure that it can help because as Daniil said the component in row expander is rerendered after record updating

I tried the blur delay, that keeps the focus on current cell for some time and that does not help. :)
because ultimately it starts updating store after the blur is fired after delay.

The moment it goes to update the store, it looses the focus. I have observed it sets the focus back to the record in the grid. :)

One more thing, I tried it on ver 2.4 with IE10, it has the same behavior. Let me know, if you get to know... any other trick to do it.

Many Thanks,
Rajiv Dutt

[Daniil]

I don't think there is a solution if use the updateRecord method.

I can demonstrate another way to update a GridPanel's cells.

var grid = App.GridPanel1,
    column = grid.headerCt.child("gridcolumn[dataIndex=company]"), // change "company" to a Column's dataIndex which you need to update
    record = grid.getStore().getAt(0),
    newValue = "new value",
    view = grid.getView(),
    cell = view.getCell(record, column).child("div");
    
if (Ext.isFunction(column.renderer)) {
    newValue = column.renderer(newValue, record); // pass all the parameters which you are using in Renderer
}
 
cell.update(newValue);

Though, it won't work in all cases. For example, if you are using the "metadata" parameter inside a Column's Renderer, it won't work.

[RajivDutt]

I don't think there is a solution if use the updateRecord method.

I can demonstrate another way to update a GridPanel's cells.

var grid = App.GridPanel1,
    column = grid.headerCt.child("gridcolumn[dataIndex=company]"), // change "company" to a Column's dataIndex which you need to update
    record = grid.getStore().getAt(0),
    newValue = "new value",
    view = grid.getView(),
    cell = view.getCell(record, column).child("div");
    
if (Ext.isFunction(column.renderer)) {
    newValue = column.renderer(newValue, record); // pass all the parameters which you are using in Renderer
}
 
cell.update(newValue);

Though, it won't work in all cases. For example, if you are using the "metadata" parameter inside a Column's Renderer, it won't work.

Thanks, it seems good, but I am not able to fetch the new value from the current cell. In your example you have taken "new value" as string.
I also tried to fetch new value using

var form = this.up('form');  form.record

but no luck. Please suggest...

Thanks,
Rajiv Dutt

[Daniil]

Please try

this.getValue()