PDA

View Full Version : [CLOSED] [Razor] Add row to GridPanel on client side using javascript



boris
May 11, 2012, 10:35 AM
Hi, I need to add row to GridView on client side. In old aspx I used


var r = new storeSt.recordType(defaultData, ++recId);

to create new record. (storeSt is reference on gridpanels store.) But in Razor that part of code returns error "Object doesn't support this action". Is syntax changed ?

Here is example that don't works:


@(Html.X().GridPanel().ID("GridPanelTestRows1")
.View(view => view.Add(Html.X().GridView().TrackOver(false)))
.VerticalScroller(scroller => scroller.Add(Html.X().GridPagingScroller()))
.ColumnModel(columnModel => {
columnModel.Columns.Add(Html.X().Column().ID("fullname").DataIndex("fullname").Text("Full name"));
columnModel.Columns.Add(Html.X().Column().ID("first").DataIndex("first").Text("First name"));
})
.Store(store =>
{
store.Add(Html.X().Store().ID("StoreTestRows1")
.Model(model =>
{
model.Add(Html.X().Model().ID("ModelTestRows1")
.Fields(fields =>
{
fields.Add(Html.X().ModelField().Name("fullname").Type(ModelFieldType.String));
fields.Add(Html.X().ModelField().Name("first").Type(ModelFieldType.String));
}));
})
.Reader(reader =>
{
reader.Add(Html.X().JsonReader());
})
);
})
.TopBar(topBar =>
{
topBar.Add(Html.X().Toolbar().ID("ToolBarTestRows1")
.Items(items =>
{
items.Add(Html.X().Button().ID("ButtonTestRows1").Text("Add row test")
.Listeners(listeners =>
{
listeners.Click.Handler = "ButtonTestRows1_Click();";
})
);
})
);
})
)


Here js code:


function ButtonTestRows1_Click() {
var defaultData = {
fullname: 'Full Name',
first: 'First Name'
};

var storeSt = Ext.getStore('StoreTestRows1');
var recId = 100; // provide unique id for the record
var r = new storeSt.recordType(defaultData, ++recId); // create new record
storeSt.insert(0, r); // insert a new record into the store (also see add)

storeSt.commitChanges();
Ext.getCmp('GridPanelStavke').getView().refresh();
}

boris
May 11, 2012, 12:57 PM
Ok I found solution. Only need to put this in js code:


var defaultData = {
fullname: 'Full Name',
first: 'First Name'
};

var storeSt2 = Ext.getStore('StoreTestRows1');
storeSt2.insert(0, defaultData);