PDA

View Full Version : [CLOSED] gridpanel - Apply css to inserted row / record



PriceRightHTML5team
Aug 20, 2013, 8:01 AM
Hi
I have a grid panel which supports row/record insertion at a rowindex.
Following is the script for same


var r = Ext.create('Model', storeData);
var storeSt = Ext.getStore('Store');
storeSt.insert(rowindex + 1, r); // insert a new record into the store
App.Grid.editingPlugin.startEditByPosition({ row: rowindex, column: 0 });

I need to apply css to few cells/columns of newly inserted row/record.
How to accomplish this.

Daniil
Aug 20, 2013, 9:10 AM
Hi @PriceRightHTML5team,

Please take a look at this example.
http://examples2.ext.net/#/GridPanel/Miscellaneous/Marking_Records/

PriceRightHTML5team
Aug 20, 2013, 10:41 AM
Hi mine is a MVC razor view application.
Thus, i did the following;

Html.X().GridPanel()
...
...
.View(X.GridView().Listeners(events => events.Refresh.Handler = "getRowClass();"))

and javascript function


var getRowClass = function (record) {
if (record.phantom) {
return "new-row";
}
}

but record is always undefined

kindly to the needful

Daniil
Aug 20, 2013, 2:40 PM
Please clarify why do you use a GridView's Refresh listener instead of GetRowClass?

PriceRightHTML5team
Aug 21, 2013, 6:46 AM
Kindly provide solution for a MVC razor version.

Daniil
Aug 21, 2013, 10:56 AM
Just:

X.GridView().GetRowClass(grc => grc.Fn = "getRowClass")

I ported that example to Razor and added to the MVC Examples Explorer.

View

@model Ext.Net.MVC.Examples.Areas.GridPanel_Miscellaneous .Models.Marking_RecordsModel

@{
ViewBag.Title = "Marking Records - Ext.NET MVC Examples";
Layout = "~/Views/Shared/_BaseLayout.cshtml";
var X = Html.X();
}

@section headtag
{
<style>
.dirty-row .x-grid-cell, .dirty-row .x-grid-rowwrap-div {
background-color: #FFFDD8 !important;
}

.new-row .x-grid-cell, .new-row .x-grid-rowwrap-div {
background: #c8ffc8 !important;
}
</style>

<script>
var getRowClass = function (record) {
if (record.phantom) {
return "new-row";
}

if (record.dirty) {
return "dirty-row";
}
};

var insertRecord = function () {
var grid = App.GridPanel1;

grid.store.insert(0, {});
grid.getView().focusRow(0);
grid.editingPlugin.startEdit(grid.store.getAt(0), grid.columns[0]);
};
</script>
}

@section example
{
<h1>Marking Records</h1>

<p>Demonstrates how to mark rows with custom colors. Edit any cell or insert new record.</p>

@(X.GridPanel()
.ID("GridPanel1")
.Title("Test Grid")
.Width(600)
.Height(350)
.Store(X.Store()
.Model(X.Model()
.IDProperty("TestCell")
.Fields("TestCell")
)
.DataSource(Model.TestData)
)
.ColumnModel(
X.Column()
.Text("TestCell")
.DataIndex("TestCell")
.Flex(1)
.Editor(X.TextField())
)
.View(X.GridView()
.StripeRows(true)
.GetRowClass(grc => grc.Fn = "getRowClass")
)
.Plugins(
X.CellEditing().ClicksToEdit(1)
)
.Buttons(
X.Button()
.Text("Insert record")
.Icon(Icon.Add)
.Handler("insertRecord")
)

)
}

PriceRightHTML5team
Aug 21, 2013, 11:12 AM
Thanks Daniil, it is working now.