PDA

View Full Version : [CLOSED] maintain selection in gridpanel



sharmav1
Dec 16, 2015, 1:38 PM
Hi,

Can anyone give me an example on how to maintain a row selection when redirecting from one page to another and then coming back.

Example:
User selects a row in a grid panel on Page 1 and then clicks a button to go to another page say Page 2, now user does something here on page 2 and clicks a button on it and redirects back to Page 1 with the data collected from Page 2 and now in the end user get to see Page 1 with the initially selected row from the grid panel.

Note: all my controls are without
runat = "server" tag

Please help
Thanks

Daniil
Dec 16, 2015, 8:02 PM
Hi @sharmav1,

A GridPanel in the example below maintains selection across the pages.

The key point of this functionality is a ModelField's IDProperty. I.e. each record must have a unique id.

Example

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

<%@ Import Namespace="System.Collections.Generic" %>

<script runat="server">
public List<object> MyData = new List<object>
{
new { test = "test1" },
new { test = "test2" },
new { test = "test3" },
new { test = "test4" },
new { test = "test5" },
new { test = "test6" },
new { test = "test7" },
new { test = "test8" },
new { test = "test9" }
};

protected void Store_ReadData(object sender, StoreReadDataEventArgs e)
{
List<object> data = this.MyData;
var limit = e.Limit;

if ((e.Start + e.Limit) > data.Count)
{
limit = data.Count - e.Start;
}

List<object> rangeData = (e.Start < 0 || limit < 0) ? data : data.GetRange(e.Start, limit);
e.Total = data.Count;
(sender as Store).DataSource = rangeData;
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server" OnReadData="Store_ReadData" PageSize="3">
<Model>
<ext:Model runat="server" IDProperty="test">
<Fields>
<ext:ModelField Name="test" />
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:PageProxy>
<Reader>
<ext:JsonReader />
</Reader>
</ext:PageProxy>
</Proxy>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test" DataIndex="test" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Multi" />
</SelectionModel>
<BottomBar>
<ext:PagingToolbar runat="server" />
</BottomBar>
</ext:GridPanel>
</form>
</body>
</html>

sharmav1
Dec 17, 2015, 8:10 AM
Hi @Daniil,

Thanks for your help with the example. But, I said earlier that I am not using
runat="server" tag in my gridpanel or on any other control.

Also, I am working on mvc 4 with razor syntax, so if possible please give any example in that.

Thanks

Daniil
Dec 17, 2015, 2:05 PM
This functionality doesn't require runat="server".

Unfortunately, I don't have a Razor example at hand. If you provide your test case, I could review.

sharmav1
Dec 17, 2015, 2:19 PM
then can you just tell me what I need to do in place of following code in mvc 4 as we don't have store readdata is not present in mvc 4


protected void Store_ReadData(object sender, StoreReadDataEventArgs e)
{
List<object> data = this.MyData;
var limit = e.Limit;

if ((e.Start + e.Limit) > data.Count)
{
limit = data.Count - e.Start;
}

List<object> rangeData = (e.Start < 0 || limit < 0) ? data : data.GetRange(e.Start, limit);
e.Total = data.Count;
(sender as Store).DataSource = rangeData;
}

Daniil
Dec 17, 2015, 2:33 PM
With MVC please use an AjaxProxy if you need to load data from a controller action. As here:
http://mvc2.ext.net/#/GridPanel_Paging_and_Sorting/Remote

sharmav1
Dec 18, 2015, 11:08 AM
thanks for the example, I will try the example if it works out for me. also I would highly appreciate if anyone could please look into my below code and see what's wrong in it. I am trying to maintain selection of a row across pages.

The problem with the below code is that it works fine in IE but it doesn't work in Chrome.(it is not a complete I have provided only that piece of code which I think is creating problem)

View:

@{
var X = Html.X();
}

@(
X.GridPanel()
.Flex(1)
.ForceFit(true).Listeners(l => { l.SelectionChange.Handler = "SelectedRowData(selected[0])"; })
.EmptyText("No Employee Assigned.")
.ID("grdEmployee")
.Cls("grdSearchPanel")
.Store(
X.Store().ID("stEmployee").PageSize(10).Model(
X.Model().Fields(
new ModelField("EmployeeId", ModelFieldType.String),
new ModelField("Name", ModelFieldType.String),
new ModelField("Type", ModelFieldType.String)


)
).DataSource(Model)
)
.ColumnModel(

X.Column().Text("Name").DataIndex("Name").Flex(1)
,
X.Column().Text("Type").DataIndex("Type").Flex(1)

)
)

)

Controller Code:

public ActionResult Employees(string id)
{
try
{

var testRow = TempData["SelectedRow"];

if (testRow != null)
{
X.Js.Call("SetPageValues", testRow, employees);
}

using (var uow = _uow.Create())
{
var data = (from e in empRep
join d in department on e.DepartmentId equals id
select e).ToList();

return View(data.ToList());
}

}
catch (Exception)
{
throw;
}
}


javascript code:


function SetPageValues(testRow, employees) {

// code for setting some page data here....


App.grdEmployee.getView().select(rowindex);


}


function SelectedRowData(selectedRow) {



if (typeof selectedRow.data != 'undefined') {
var data = selectedRow.data;
EmployeeID = data.EmployeeID;

if (data.DepartmentID != "") {


if (!IsRedirectRequest) {
Ext.net.DirectMethod.request({
url: "/Employee/GetEmployees",
cleanRequest: true,
params: { DocumentId: data.EmployeeID },
success: function (result) {

if (result.length != 0) {
App.strManager.loadData(result[0].ManagerDetails);
}

}
});
}

IsRedirectRequest= false;

}

}
else {
//var data = selectedRow.data;

}

}

Thanks

Daniil
Dec 19, 2015, 10:35 AM
I don't see any IDProperty on the Store's Model. Please set.

sharmav1
Dec 21, 2015, 9:42 AM
Hi @Daniil

Setting IDProperty doesn't solve my problem.

Please help

Daniil
Dec 21, 2015, 9:53 AM
I am afraid we cannot help without a full test case to reproduce the problem. Please provide.

sharmav1
Dec 21, 2015, 11:58 AM
it's a whole lot of code.. how you want me to post?

But even your example is not working for me

Thanks

Daniil
Dec 21, 2015, 12:07 PM
it's a whole lot of code.. how you want me to post?

I believe 50-100 lines of code should be enough to reproduce the problem. Please simplify the code as much as you can, removing all the code which is not required to run the sample and reproduce the problem.

The example should not be bigger than my WebForms example that I posted previously.

sharmav1
Dec 21, 2015, 12:51 PM
All I want is to maintain selection in the training grid data(grdTraining) when I move from that page(by clicking on a button) to some another page and then come back again.

Code which I have not posted below: I have a button in "OtherTestView" which takes me to some other page(Page 2) and then from that page 2 I redirecttoAction back to my first page

MasterEmployee.cshtml



@{
Layout = "~/Views/Shared/_Layout.cshtml";

var X = Html.X();
}

@section sectionCenter
{

<script src="~/Scripts/Document/TrainingView.js"></script>

@(X.FormPanel().ID("pnlMainDocument").Layout(LayoutType.Border).DefaultButton("btnSearchSubmit").Flex(1)
.Items(

X.Panel().ID("pnlTraining").ItemsFromPartial("TrainingView", Model),
X.Panel().ID("pnlEmployee").ItemsFromPartial("EmployeeView", Model).Hidden(true),
X.Panel().ID("pnlEmployee").ItemsFromPartial("OtherTestView", Model).Hidden(true)
)
)
}


EmployeeView:


@{
var X = Html.X();
}
@(
X.GridPanel().Flex(1).ForceFit(true).Cls("grdSearchPanel").Listeners(l => { l.SelectionChange.Handler = "SelectedDocumentRowData(selected[0])"; })

.Store(X.Store().ID("strEmployees").PageSize(10)
.Model(X.Model().IDProperty("mdEmployees").Fields(
new ModelField("EmployeeId", ModelFieldType.Object),
new ModelField("EmployeeNumber", ModelFieldType.String),
new ModelField("Title", ModelFieldType.String),
new ModelField("Scope", ModelFieldType.String)


)
)

)
.ColumnModel
(

X.Column().Text("Employee No").DataIndex("EmployeeNumber").Flex(1).MaxWidth(150)

,
X.Column().Text("Title").DataIndex("Title").Flex(1)

,
X.Column().Text("Scope").DataIndex("Scope").Flex(1)

,

)
)

TrainingView:


@{
var X = Html.X();
}

@(
X.GridPanel()
.Flex(1)
.ForceFit(true).Listeners(l => { l.SelectionChange.Handler = "SelectedRowData(selected[0])"; })
.ID("grdTraining")
.Cls("grdSearchPanel")
.Store(
X.Store().ID("stTraining").PageSize(10).Model(
X.Model().IDProperty("mdTrainigs").Fields(
new ModelField("TrainingId", ModelFieldType.String),
new ModelField("Name", ModelFieldType.String),
new ModelField("Type", ModelFieldType.String)


)
).DataSource(Model)
)
.ColumnModel(

X.Column().Text("Name").DataIndex("Name").Flex(1)
,
X.Column().Text("Type").DataIndex("Type").Flex(1)

)
)

)

Trainingview.js code:


function SetPageValues(testRow, employees) {


App.grdTraining.getView().select(rowindex);


}


function SelectedRowData(selectedRow) {



if (typeof selectedRow.data != 'undefined') {
var data = selectedRow.data;
TrainingID = data.TrainingID;

if (data.DepartmentID != "") {


if (!IsRedirectRequest) {
// Loading data into some other grid
}

IsRedirectRequest= false;

}

}
else {
//var data = selectedRow.data;

}

}

controller code:


public class EmployeeController : Controller
{

public EmployeeController()
{

}
// GET: Document
public ActionResult Index()
{
return View();
}


public ActionResult Employee(string id)
{
try
{
GetTrainingsForEmployees();

if (id == "1")
{



var result = //data from db
return View(result);
}
else
{




var data = //data from db

return View(data.ToList());
}



}
catch (Exception)
{
throw;
}
}

private void GetTrainingsForEmployees()
{
var trainings = new List<Trainings>();
var testRow = TempData["SelectedRow"];
if (TempData[Constants.Key.Trainings] != null)
{
trainings = TempData[Constants.Key.Trainings] as List<Trainings>;
}
HttpRuntime.Cache[Constants.Cache.EmployeeTrainings] = trainings;
if (testRow != null)
{
X.Js.Call("SetPageValues", testRow, trainings);
}

}



public ActionResult GetTrainings()
{
try
{

return this.Direct(data.ToList());

}
catch (Exception)
{

throw;
}

}


#region Search Grid Panel



}

Daniil
Dec 21, 2015, 1:11 PM
Please clarify what is mdEmployees?

.IDProperty("mdEmployees")

Please try with

.IDProperty("EmployeeId")

sharmav1
Dec 21, 2015, 1:52 PM
Awesome it worked @Daniil

but why the change in name of IDProperty worked?

Daniil
Dec 21, 2015, 3:05 PM
The functionality of maintaining the selected rows requires unique IDs on each record.

A Model's IDProperty setting is a field in the bound data that is supposed to become a record's id.

It was .IDProperty("mdEmployees"), but there is no "mdEmployees" field in the data. So, setting a proper IDProperty did the job.