PDA

View Full Version : [CLOSED] Hide gridpanel row through client side script



PriceRightHTML5team
Jul 17, 2013, 8:49 AM
Hi
How to hide a gridpanel's row through client side script.
Wish to do it on a control's event.

Daniil
Jul 17, 2013, 3:38 PM
Hi @PriceRightHTML5team,

I see the three ways to do it. I am not sure which is more appropriate in your scenario.

Way 1 - View's GetRowClass

<%@ Page Language="C#" %>

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

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1", "test2", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" }
};
}
}
</script>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
var getRowClass = function (record, index, rowParams, store) {
if (record.data.hidden) {
return "x-hide-display";
}
};

var hide = function () {
App.GridPanel1.getStore().getAt(1).set("hidden", true);
};

var show = function () {
App.GridPanel1.getStore().getAt(1).set("hidden", false);
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Button runat="server" Text="Hide row #2" Handler="hide" />

<ext:Button runat="server" Text="Show row #2" Handler="show" />

<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
<ext:ModelField Name="hidden" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1" />
<ext:Column runat="server" Text="Test2" DataIndex="test2" />
<ext:Column runat="server" Text="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server">
<GetRowClass Fn="getRowClass" />
</ext:GridView>
</View>
</ext:GridPanel>
</form>
</body>
</html>

Way 2 - filter Store

<%@ Page Language="C#" %>

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

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1", "test2", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" }
};
}
}
</script>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
var hide = function () {
App.GridPanel1.getStore().filterBy(function (record, id) {
return this.indexOf(record) !== 1;
});
};

var show = function () {
App.GridPanel1.getStore().clearFilter();
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Button runat="server" Text="Hide row #2" Handler="hide" />

<ext:Button runat="server" Text="Show row #2" Handler="show" />

<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1" />
<ext:Column runat="server" Text="Test2" DataIndex="test2" />
<ext:Column runat="server" Text="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>

Way 3 - rebind the Store with the data excluding the record which you don't want to see. Or just remove it.

PriceRightHTML5team
Jul 18, 2013, 7:19 AM
Hi Daniil,
Our scenario is as follows

cshtml has a editable gridpanel. In this user can;
1) Edit some cell values (used CellEditing Plugin)
2) Add new rows (used store.insert() and App.grid.editingPlugin.startEditByPosition()] )
3) Delete rows (here we update the store setting those respective records' IsDeleted column value to true )
All the above operation occur at client side.

Screen has a submit button which through direct event sends updated store to controller

de.Click.ExtraParams.Add(new Parameter
{
Name = "data",
Value = "#{Storenm}.getChangedData()",
Mode = ParameterMode.Raw,
Encode = true
});

And then at server side we have function which at one go updates all records to database.

public ActionResult HandleChanges(StoreDataHandler handler)
{
...
...
}

Requirement:
When user clicks a record for delete that respective row should get hiden through client side script.

As the Hide is to happen as per user operation, we cannot go with Way 1 - View's GetRowClass

On Trying Way 2 - filter Store the record got hided but the StoreDataHandler doesnot get updated record.

We haven't gone with Way 3 - rebind the Store with the data excluding the record which you don't want to see. Or just remove it.
as it's not actually a delete instead it is update and hide

Thus, kindly guide us for a way wherein we, one control's event from the client side hide gridpanel row(s).

Daniil
Jul 18, 2013, 7:43 AM
Please clarify why do not you want to delete records in fact instead of marking them with "isDeleted"?

PriceRightHTML5team
Jul 18, 2013, 8:11 AM
Because, records marked for delete by user (deleted) are required for processing in
public ActionResult HandleChanges(StoreDataHandler handler){...}.

Daniil
Jul 18, 2013, 11:29 AM
But the really removed records will be also available in a StoreDataHandler.
http://mvc.ext.net/#/GridPanel_Update/Batch/

PriceRightHTML5team
Jul 18, 2013, 1:09 PM
Ya Daniil, removed records are available in Deleted records collection.
Thanks

Daniil
Jul 18, 2013, 1:15 PM
So, is the issue resolved or am I misunderstanding something?

PriceRightHTML5team
Jul 18, 2013, 1:21 PM
Issue is resolved :)