PDA

View Full Version : [CLOSED] load grid inside RowExpander Plugin



matrixwebtech
Aug 22, 2014, 7:07 AM
hi
I have grid with row expander plugins and inside this plugin I take another grid inside component.I need, on click on rowexpander the inner grid load with data.

With reference of http://forums.ext.net/showthread.php?26515-CLOSED-can-not-refresh-data-in-a-gridpanel-inside-rowexpander

I tried bellow

View

@model System.Collections.IEnumerable
@Html.X().ResourceManager()

@(
Html.X().GridPanel()
.Title("Expander Rows with server side data")
.Icon(Icon.Table)
.Width(600)
.Height(300)
.Store(Html.X().Store()
.DataSource(Model)
.Model(Html.X().Model()
.Fields(
Html.X().ModelField().Name("company")

)
)
)
.ColumnModel(
Html.X().Column().DataIndex("company").Text("Company").Flex(1)

)

.Plugins(
Html.X().RowExpander()
.ID("RowExpander1")
.SingleExpand(true)
.Listeners(l => { l.Expand.Handler = "this.getComponent(record).down('gridpanel').getSto re().reload({ params: { company: record.data.company }});"; })
.Component
(
Html.X().GridPanel()
.Store(
Html.X().Store()
.ID("Store1")
.AutoLoad(false)
.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("GetData"))
.Reader(Html.X().JsonReader().Root("data"))
)

.Model
(
Html.X().Model()
.Fields
(
Html.X().ModelField().Name("company").Type(ModelFieldType.String),
Html.X().ModelField().Name("index").Type(ModelFieldType.String),
Html.X().ModelField().Name("time").Type(ModelFieldType.String)


)

)
)
.ColumnModel(

Html.X().Column().DataIndex("company").Text("Common Name 1").Flex(1),
Html.X().Column().DataIndex("index").Text("Common Name 2").Flex(1),
Html.X().Column().DataIndex("time").Text("Common Name 3").Flex(1)




)

)

)
.SelectionModel(
Html.X().CheckboxSelectionModel()
.Mode(SelectionMode.Multi)
.InjectCheckbox("1")

)
)


Contoller and Sampledata


public ActionResult Index()
{
return View(Companies.GetCompanies());
}

public StoreResult GetData(string company, int index)
{


var Questions = new List<jr>
{
new jr {company = "s1", index = "Q1,Q2",time=DateTime.Now.ToLongTimeString()},
new jr {company = "s2", index = "Q1,Q2,Q3",time=DateTime.Now.ToLongTimeString()},
new jr {company = "s3", index = "Q1,Q2,Q4",time=DateTime.Now.ToLongTimeString()},
new jr {company = "s4", index = "Q1,Q2,Q5",time=DateTime.Now.ToLongTimeString()},
};

Store store = X.GetCmp<Store>("store1");
store.LoadData(Questions);
return this.Store(store);


}


}

public class Companies
{
public static IEnumerable GetCompanies()
{
DateTime now = DateTime.Now;

return new object[]
{
new object[] { "3m Co" },
new object[] { "IBM"},

};
}
}

public class jr
{
public string company { get; set; }
public string index { get; set; }
public string time { get; set; }
}


but in fire bug I found and error



TypeError: App.RowExpander1.getComponent(...) is null
...(item,record,body,row,rowIndex){App.RowExpander 1.getComponent(record).down('grid...

please let me know what change in code make this working.

Daniil
Aug 22, 2014, 11:08 AM
Hi @matrixwebtech,

Please don't use .getComponent() with the .SingleExpand(true) setting.

In your case I would try this code:

l.Expand.Handler = "this.component.getStore().reload({ params: { company: record.data.company }});";

matrixwebtech
Aug 22, 2014, 11:26 AM
Thanks for reply daniil,

I change

.Listeners(l => { l.Expand.Handler = "this.component.getStore().reload({ params: { company: record.data.company }});"; })

and bellow is GetData() Method



public StoreResult GetData(string company, string index)
{


var Questions = new List<jr>
{
new jr {company = "s1", index = "Q1,Q2",time=DateTime.Now.ToLongTimeString()},
new jr {company = "s2", index = "Q1,Q2,Q3",time=DateTime.Now.ToLongTimeString()},
new jr {company = "s3", index = "Q1,Q2,Q4",time=DateTime.Now.ToLongTimeString()},
new jr {company = "s4", index = "Q1,Q2,Q5",time=DateTime.Now.ToLongTimeString()},
};

Store store = X.GetCmp<Store>("store1");
store.LoadData(Questions);
return this.Store(store);


}

But an error occurred.

Server Error in '/' Application.
The ResourceManager Control is missing from this Page.

Please add the following ResourceManager tag inside the <body> or <form runat="server"> of this Page.

and what if i use


.SingleExpand(false)

Daniil
Aug 22, 2014, 12:13 PM
At which moment does the error occur?

Also I am not sure what you mean here:

Store store = X.GetCmp<Store>("store1");
store.LoadData(Questions);

return this.Store(store);



I think this entire piece of code should be replaced with


return this.Store(Questions);

matrixwebtech
Aug 22, 2014, 1:58 PM
Thaks daniil,
Its working.can you please let me know how to write .Listeners for


.SingleExpand(false)

in this post ,so that I can post all solution here for others ,with both situation


.SingleExpand(false)
and

.SingleExpand(true)

Daniil
Aug 25, 2014, 7:43 AM
With .SingleExpand("false"), probably, the .getComponent() function is a way to go.

matrixwebtech
Aug 25, 2014, 8:17 AM
I set


.SingleExpand(false)

and


.Listeners(l => { l.Expand.Handler = "this.getComponent(record).down('gridpanel').getSto re().reload({ params: { company: record.data.company }});"; })

but unfortunately not working.

Error in firebug is


TypeError: this.getComponent(...).down(...) is null


...(item,record,body,row,rowIndex){this.getCompone nt(record).down('gridpanel').getS...

Daniil
Aug 25, 2014, 8:32 AM
I don't see that your inner GridPanel contains a GridPanel.

matrixwebtech
Aug 25, 2014, 8:43 AM
Please check ,I code bellow


@model System.Collections.IEnumerable
@Html.X().ResourceManager()

@(
Html.X().GridPanel()
.Title("Expander Rows with server side data")
.Store(Html.X().Store()
.DataSource(Model)
.Model(Html.X().Model()
.Fields(
Html.X().ModelField().Name("company")

)
)
)
.ColumnModel(
Html.X().Column().DataIndex("company").Text("Company").Flex(1)

)

.Plugins(
Html.X().RowExpander()
.ID("RowExpander1")

.SingleExpand(false)
.Listeners(l => { l.Expand.Handler = "this.getComponent(record).down('gridpanel').getSto re().reload({ params: { company: record.data.company }});"; })
.Component
(
Html.X().GridPanel()
.Store(
Html.X().Store()
.ID("Store1")
.AutoLoad(false)
.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("GetData"))
.Reader(Html.X().JsonReader().Root("data"))
)

.Model
(
Html.X().Model()
.Fields
(
Html.X().ModelField().Name("company").Type(ModelFieldType.String)

)

)
)
.ColumnModel(

Html.X().Column().DataIndex("company").Text("Common Name 1").Flex(1).MenuDisabled(true)

)

)

)
.SelectionModel(
Html.X().CheckboxSelectionModel()
.Mode(SelectionMode.Multi)
.InjectCheckbox("1")

)
)



namespace e.Controllers
{
public class RowExpanderController : Controller
{
//
// GET: /RowExpander/

public ActionResult Index()
{
return View(Companies.GetCompanies());
}

public StoreResult GetData(string company, string index)
{


var Questions = new List<jr>
{
new jr {company = "s1"},
new jr {company = "s2"},
new jr {company = "s3"},
new jr {company = "s4"},
};


return this.Store(Questions);


}


}

public class Companies
{
public static IEnumerable GetCompanies()
{
DateTime now = DateTime.Now;

return new object[]
{
new object[] { "3m Co" },
new object[] { "IBM"},

};
}
}

public class jr
{
public string company { get; set; }
public string index { get; set; }
public string time { get; set; }
}
}

Daniil
Aug 25, 2014, 9:06 AM
I don't see that your inner GridPanel contains a GridPanel.

I mean why do you do .down('gridpanel')? The RowExpander's Component is a GridPanel itself.

matrixwebtech
Aug 25, 2014, 9:22 AM
I found this http://forums.ext.net/showthread.php?26515-CLOSED-can-not-refresh-data-in-a-gridpanel-inside-rowexpander&p=117632&viewfull=1#post117632.

and assumed may be this is worked in my case that's why I use this.please tell me what is the right way to do this.

Edit:I just change the listener and solve the problem.


.Listeners(l => { l.Expand.Handler = "this.getComponent(record).getStore().reload({ params: { company: record.data.company }});"; })

I will post full solution asap

matrixwebtech
Aug 25, 2014, 11:41 AM
I just Notice,above code solve this problem but,there are a problem I am facing a problem.1st time after page load I click on Roexpander (+ sign),there are problem with display of rows.I post here sample code and screen shot both.

Browser : Firefox 31.0,Chrome 36

SAMPLE CODE


@model System.Collections.IEnumerable
@Html.X().ResourceManager()

@(
Html.X().GridPanel()
.Title("Expander Rows with server side data")
.Store(Html.X().Store()
.DataSource(Model)
.Model(Html.X().Model()
.Fields(
Html.X().ModelField().Name("company")

)
)
)
.ColumnModel(
Html.X().Column().DataIndex("company").Text("Company").Flex(1)

)

.Plugins(
Html.X().RowExpander()
.ID("RowExpander1")

.SingleExpand(false)

.Listeners(l => { l.Expand.Handler = "this.getComponent(record).getStore().reload({ params: { company: record.data.company }});"; })
.Component
(
Html.X().GridPanel()
.ID("gridpanel1")
.Header(false)
.Store(
Html.X().Store()
.ID("Store1")
.AutoLoad(false)
.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("GetData"))
.Reader(Html.X().JsonReader().Root("data"))
)

.Model
(
Html.X().Model()
.Fields
(
Html.X().ModelField().Name("company").Type(ModelFieldType.String)

)

)
)
.ColumnModel(

Html.X().Column()
.DataIndex("company")
.Text("Common Name 1")


)

)

)
.SelectionModel(
Html.X().CheckboxSelectionModel()
.Mode(SelectionMode.Multi)
.InjectCheckbox("1")

)
)




public class RowExpanderController : Controller
{
//
// GET: /RowExpander/

public ActionResult Index()
{
return View(Companies.GetCompanies());
}

public StoreResult GetData(string company, string index)
{


var Questions = new List<jr>
{
new jr {company = "s1"},
new jr {company = "s2"},
new jr {company = "s3"},
new jr {company = "s4"},
};


return this.Store(Questions);


}


}

public class Companies
{
public static IEnumerable GetCompanies()
{
DateTime now = DateTime.Now;

return new object[]
{
new object[] { "3m Co" },
new object[] { "IBM"},

};
}
}

public class jr
{
public string company { get; set; }
public string index { get; set; }
public string time { get; set; }
}

1478114791

Daniil
Aug 26, 2014, 5:13 AM
Please try a small delay.

.Listeners(l =>
{
l.Expand.Handler = "this.getComponent(record).getStore().reload({ params: { company: record.data.company }});";
l.Expand.Delay = 100;
})

Does it help?

matrixwebtech
Aug 26, 2014, 5:35 AM
Hi daniil,

I tried your suggested code ,but dose not work.


.Listeners(l => {
l.Expand.Handler = "this.getComponent(record).getStore().reload({ params: { company: record.data.company }});";
l.Expand.Delay = 500;
})

Daniil
Aug 26, 2014, 6:50 AM
It needs to update the GridPanel's layout manually after loading of its inner GridPanel.

Please use:

.Listeners(l =>
{
l.Expand.Handler = @"var rowExpander = this;

rowExpander.getComponent(record).getStore().reload ({
params: {
company: record.data.company
},
callback: function() {

Ext.defer(rowExpander.cmp.doLayout, 1, rowExpander.cmp);
}
});";
})

matrixwebtech
Aug 26, 2014, 7:21 AM
Hi daniil iths works fine now ,I post final solution here for both condition


SingleExpand(true)

and


SingleExpand(false)

VIEW


@model System.Collections.IEnumerable
@Html.X().ResourceManager()

@(
Html.X().GridPanel()
.Title("Expander Rows with server side data")
.Store(Html.X().Store()
.DataSource(Model)
.Model(Html.X().Model()
.Fields(
Html.X().ModelField().Name("company")

)
)
)
.ColumnModel(
Html.X().Column().DataIndex("company").Text("Company").Flex(1)

)

.Plugins(
Html.X().RowExpander()
.ID("RowExpander1")

//.SingleExpand(false)
// .SingleExpand(true)

//Listeners for If .SingleExpand(true). Uncomment this Listeners If .SingleExpand(true)
// .Listeners(l =>
// {
// l.Expand.Handler = @"var rowExpander = this;
//
// rowExpander.component.getStore().reload({
// params: {
// company: record.data.company
// },
// callback: function() {
//
// Ext.defer(rowExpander.cmp.doLayout, 1, rowExpander.cmp);
// }
// });";
// })

//Listeners for If .SingleExpand(false). Uncomment this Listeners If .SingleExpand(true) .SingleExpand(false)

// .Listeners(l => { l.Expand.Handler = "this.getComponent(record).getStore().reload({ params: { company: record.data.company }});"; })
// .Listeners(l =>
// {
// l.Expand.Handler = @"var rowExpander = this;
//
// rowExpander.getComponent(record).getStore().reload ({
// params: {
// company: record.data.company
// },
// callback: function() {
//
// Ext.defer(rowExpander.cmp.doLayout, 1, rowExpander.cmp);
// }
// });";
// })
.Component
(
Html.X().GridPanel()
.ID("gridpanel1")
.Header(false)
.Store(
Html.X().Store()
.ID("Store1")
.AutoLoad(false)
.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("GetData"))
.Reader(Html.X().JsonReader().Root("data"))
)

.Model
(
Html.X().Model()
.Fields
(
Html.X().ModelField().Name("company").Type(ModelFieldType.String)

)

)
)
.ColumnModel(

Html.X().Column()
.DataIndex("company")
.Text("Common Name 1")


)

)

)
.SelectionModel(
Html.X().CheckboxSelectionModel()
.Mode(SelectionMode.Multi)
.InjectCheckbox("1")

)
)



CONTROLLER AND SAMPLE DATA


public class RowExpanderController : Controller
{
//
// GET: /RowExpander/

public ActionResult Index()
{
return View(Companies.GetCompanies());
}

public StoreResult GetData(string company, string index)
{


var Questions = new List<jr>
{
new jr {company = company+"-"+index+"1"},
new jr {company = company+"-"+index+"2"},
new jr {company = company+"-"+index+"3"},
new jr {company = company+"-"+index+"4"},
};


return this.Store(Questions);


}


}

public class Companies
{
public static IEnumerable GetCompanies()
{
DateTime now = DateTime.Now;

return new object[]
{
new object[] { "3m Co" },
new object[] { "IBM"},

};
}
}

public class jr
{
public string company { get; set; }
public string index { get; set; }
public string time { get; set; }
}

matrixwebtech
Dec 05, 2014, 7:26 AM
I trying this with ComponentColumn for the Inner grid,but facing some difficulties with design please run the code and see screen shot.

Sample View


@model System.Collections.IEnumerable
@Html.X().ResourceManager()

@(
Html.X().GridPanel()
.Title("Expander Rows with server side data")
.Store(Html.X().Store()
.DataSource(Model)
.Model(Html.X().Model()
.Fields(
Html.X().ModelField().Name("company")

)
)
)
.ColumnModel(
Html.X().Column().DataIndex("company").Text("Company").Flex(1)

)

.Plugins(
Html.X().RowExpander()
.ID("RowExpander1")

.SingleExpand(false)


//Listeners for If .SingleExpand(false). Uncomment this Listeners If .SingleExpand(true) .SingleExpand(false)

.Listeners(l => { l.Expand.Handler = "this.getComponent(record).getStore().reload({ params: { company: record.data.company }});"; })
.Listeners(l =>
{
l.Expand.Handler = @"var rowExpander = this;

rowExpander.getComponent(record).getStore().reload ({
params: {
company: record.data.company
},
callback: function() {

Ext.defer(rowExpander.cmp.doLayout, 1, rowExpander.cmp);
}
});";
})
.Component
(
Html.X().GridPanel()
.ID("gridpanel1")
.Header(false)

.Store(
Html.X().Store()
.ID("Store1")
.AutoLoad(false)
.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("GetData"))
.Reader(Html.X().JsonReader().Root("data"))
)

.Model
(
Html.X().Model()
.Fields
(
Html.X().ModelField().Name("company").Type(ModelFieldType.String)

)

)
)
.ColumnModel(

Html.X().ComponentColumn()
.DataIndex("company")
.Text("Common Name 1")
.Editor(true)
.Component
(
Html.X().TextField()
)

)
.Buttons(
Html.X().Button().Text("Click").ID("Click")

)

)

)
.SelectionModel(
Html.X().CheckboxSelectionModel()
.Mode(SelectionMode.Multi)
.InjectCheckbox("1")

)
)

Sample Controller

public class RowExpanderController : Controller
{
//
// GET: /RowExpander/

public ActionResult Index()
{
return View(Companies.GetCompanies());
}

public StoreResult GetData(string company, string index)
{


var Questions = new List<jr>
{
new jr {company = company+"-"+index+"1"},
new jr {company = company+"-"+index+"2"},
new jr {company = company+"-"+index+"3"},
new jr {company = company+"-"+index+"4"},
};


return this.Store(Questions);


}


}

public class Companies
{
public static IEnumerable GetCompanies()
{
DateTime now = DateTime.Now;

return new object[]
{
new object[] { "3m Co" },
new object[] { "IBM"},

};
}
}

public class jr
{
public string company { get; set; }
public string index { get; set; }
public string time { get; set; }
}
See in screen shot.
1. Inner grids button not visible.
2.2nd row of Main grid is disappear.
16941


Update
Sorry for over look example (http://mvc.ext.net/#/GridPanel_RowExpander/Component/).in this example I see .Height(180) set as fixed for the formpanel inside component.is it possible without set a fixed height?


I set a direct event for "Click" Button and also add

de.Click.ExtraParams.Add(new
{

values = new JRawValue("this.up('grid').getRowsvalues()")
});
but a javascript error
TypeError: this.up(...).getRowsvalues is not a functionplease let me know how I get the inner grid's value in direct event. and also main grid's store value.

matrixwebtech
Dec 09, 2014, 2:23 AM
hi,i am unable to do this,plz help.

Daniil
Dec 10, 2014, 9:31 AM
Sorry for over look example (http://mvc.ext.net/#/GridPanel_RowExpander/Component/).in this example I see .Height(180) set as fixed for the formpanel inside component.is it possible without set a fixed height?

Maybe, this can help.
http://forums.ext.net/showthread.php?26731


TypeError: this.up(...).getRowsvalues is not a function

At least, it has to be .getRowsValues()