Gridpanel auto Height inside TabPanel - extjs

I am trying to get a gridpanel inside a tabpanel to display with proper height. The tab in question is maincontentpanel3. Right now, the width does 100%, but the height seems to go until the panel is filled, way past the bottom of the page.
Scroll bars do not appear, even if autoscroll is set to auto. If I give GridPanel1 a height, everything works properly except for (obviously) the height.
Here is the stripped down code:
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:Panel runat="server" ID="maincontentpanelwrapper" >
<Items>
<ext:TabPanel ID="maincontentpanel" runat="server" Layout="FitLayout">
<Items>
<ext:Panel runat="server" ID="maincontentpanel1" >
</ext:Panel>
<ext:Panel runat="server" ID="maincontentpanel2" >
</ext:Panel>
<ext:Panel runat="server" ID="maincontentpanel3" >
<Items>
<ext:GridPanel ID="GridPanel1" AutoScroll="true" runat="server" >
<Store>
[REMOVED]
</Store>
<ColumnModel>
<Columns>
[REMOVED]
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
Here is an image of what is happening in the bottom right corner (no scroll bars, clearly overflowing)
Thank you for your help!

The only way I could figure out how to do it would be to use javascript. This is the solution I came up with:
initialload2();
function initialload2() {
if (Ext.getCmp("GridPanel1")) {
if (window.innerHeight != undefined) {
var height = window.innerHeight;
}
else {
//for ie
var B = document.body,
D = document.documentElement;
var height = Math.min(D.clientHeight, B.clientHeight);
}
Ext.getCmp("GridPanel1").setHeight(height - 62);
} else {
setTimeout(initialload2, 100);
}
}
var resizeTimer;
window.onresize = function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(initialload2, 100);
};

It can be fix using markup.no need to use javascript.
i have tested on ext.net 2.0 and i think it can work on older version too
just add layout property in gridpanel and border if you like.
example given below
<ext:GridPanel ID="GridPanel1" AutoScroll="true" runat="server" Layout="FitLayout" Border="true" >
thats it .hope you like it

Related

SlickSlider Javascript Hover Effect for Link and Parent Div

Hello, I have built this carousel and we want to add a hover effect
onto the button. Each button is simply a div with a class of
"slick-slide" or "slick-active". "Slick-Active" is the class for any
button (div) you see in the viewport. Each div contains simply a link
(a tag). If you are familiar with Slick Slider you probably know what
I am talking about. The goal here is just to have a blue background
with white text for the link but this is becoming more complex than it
needs to be. I immediately went to just css hover at first but that is
causing ALL buttons to have a blue background, or it will white out
all links. So now I'm thinking this needs to be done with JS since we
want to change the colors on only one div and link at a time instead
of all. I can't add IDs to these as that would make it easy business
obviously. Here is the JS code I have right now, which isn't working
presently. The red is not the intended color just something to test with
but I'm not getting any action from this at all (no bg change at all)
function HoverButtonColorShift() {
let visButtons = document.getElementsByClassName('slick-active');
for (let i = 0; i < visButtons.length; i++) {
let btn = visButtons[i];
btn.addEventListener("mouseenter", function () {
btn.style.background = "red";
});
}
}
HoverButtonColorShift();
Here is the setup in html:
<div class="carousel-link-section-homepage-secton-main-header">
<h3 class="clshs-desktop-header"><asp:Literal ID="CarouselMainHeaderDesktop" runat="server" /></h3>
</div>
<div class="clshs-slider">
<asp:Panel ID="SliderLink1Panel" Visible="false" CssClass="slick-slide" runat="server">
<asp:HyperLink ID="SliderLink1" CssClass="link-carousel-link" runat="server" />
</asp:Panel>
<asp:Panel ID="SliderLink2Panel" Visible="false" CssClass="slick-slide" runat="server">
<asp:HyperLink ID="SliderLink2" CssClass="link-carousel-link" runat="server" />
</asp:Panel>
<asp:Panel ID="SliderLink3Panel" Visible="false" CssClass="slick-slide" runat="server">
<asp:HyperLink ID="SliderLink3" CssClass="link-carousel-link" runat="server" />
</asp:Panel>
<asp:Panel ID="SliderLink4Panel" Visible="false" CssClass="slick-slide" runat="server">
<asp:HyperLink ID="SliderLink4" CssClass="link-carousel-link" runat="server" />
</asp:Panel>
<asp:Panel ID="SliderLink5Panel" Visable="false" CssClass="slick-slide" runat="server">
<asp:HyperLink ID="SliderLink5" CssClass="link-carousel-link" runat="server" />
</asp:Panel>
<asp:Panel ID="SliderLink6Panel" Visible="false" CssClass="slick-slide" runat="server">
<asp:HyperLink ID="SliderLink6" CssClass="link-carousel-link" runat="server" />
</asp:Panel>
<asp:Panel ID="SliderLink7Panel" Visible="false" CssClass="slick-slide" runat="server">
<asp:HyperLink ID="SliderLink7" CssClass="link-carousel-link" runat="server" />
</asp:Panel>
</div>
</div>
Any ideas how to pull off this relatively easy issue?
A forEach loop is what was needed.
Here is the solution. I will apply it to the text shortly after posting this:
function HoverButtonColorShift() {
let visButtons = document.querySelectorAll('.caroSlide');
visButtons.forEach(slide => {
slide.addEventListener('mouseover', function handleHover(event) {
console.log('slide hover', event);
slide.style.backgroundColor = "#283B87";
});
slide.addEventListener('mouseleave', function handleHoverk(event) {
console.log('slide leave', event);
slide.style.backgroundColor = "white";
});
});
}

Ext net set default panel in tabpanel

I have this code:
<ext:TabPanel ID="*" runat="server">
<Items>
<ext:Panel ID="panel1" runat="server" Title="*" Closable="false">
<Loader ID="*" runat="server" Url="*.aspx" Mode="Frame">
<LoadMask ShowMask="True" />
</Loader>
</ext:Panel>
<ext:Panel ID="panel2" runat="server" Title="*" Closable="false">
<Loader ID="*" runat="server" Url="*.aspx" Mode="Frame">
<LoadMask ShowMask="True" />
</Loader>
</ext:Panel>
<ext:Panel ID="panel3" runat="server" Title="*" Closable="false" Hidden="true">
<Loader ID="Loader" runat="server" Url="*.aspx" Mode="Frame">
<LoadMask ShowMask="True" />
</Loader>
</ext:Panel>
</Items>
</ext:TabPanel>
I need to set the first panel as default panel ( the panel that is shown when the page is loaded )
Just do it like this:
<ext:TabPanel ID="*" ActiveIndex="0" runat="server">

Why I cannot use a checkbox and radiobutton column using filterhead?

I have the next problem, when I use only two columns (one for the names and other for the checkbox or one for the names and other for the radiobutton) everything is fine, but when I use three columns(one for the names, other for the checkbox and the last for the radiobutton) I´ve got the next error in console when I try to write in the filter field.
filterheader.js:46 Uncaught TypeError: field.getValue is not a function
at g.<anonymous> (filterheader.js:46)
at Object.each (ext-all.js:19)
at g.runFiltering (filterheader.js:46)
at g.onFieldChange (filterheader.js:45)
at ext-all.js:19
I dont know what to do, I dont have much practice in ext.net. Before
an apology for my English. I would really appreciate some help.
<ext:GridPanel ID="grdNames" runat="server" Title="Names" HideCollapseTool="false" UI="Primary" HideHeaders="false" Layout="FitLayout" ColumnLines="false" BodyStyle="GridFiltros" Border="false" Region="Center" Frame="false" ForceFit="true" AutoScroll="false" Resizable="false">
<Store>
<ext:Store ID="strOrigen" runat="server">
<Model>
<ext:Model ID="Model25" runat="server">
<Fields>
<ext:ModelField Name="CheckNames" Type="Boolean" DefaultValue="false" />
<ext:ModelField Name="Names" />
</Fields>
</ext:Model>
</Store>
<View>
<ext:GridView ID="GridView6" runat="server" TrackOver="true" StripeRows="true" />
</View>
<ColumnModel ID="ColumnModel15" runat="server">
<Columns>
<ext:ComponentColumn ID="radColumn" runat="server" Width="30" DataIndex="CheckNames" Align="Left">
<Component>
<ext:Radio ID="rdGo" runat="server" Name="vGO">
</ext:Radio>
</Component>
</ext:ComponentColumn>
<ext:CheckColumn ID="CheckColumn" runat="server" DataIndex="CheckNames" Sortable="false" HideTitleEl="true" Width="35"
Resizable="false" StopSelection="false" Editable="true" Filterable="false" Align="Left"
Groupable="false" MenuDisabled="true">
<Items>
<ext:Checkbox runat="server" ID="chkRptGeoO" Checked="false">
<Listeners>
<Change Fn="chkChangeRptGeoO"></Change>
</Listeners>
</ext:Checkbox>
</Items>
</ext:CheckColumn>
<ext:Column ID="NamesColumn" runat="server" HideTitleEl="true" DataIndex="Names" MenuDisabled="true" Width="200" TabMenuHidden="true" />
</Columns>
</ColumnModel>
<Plugins>
<ext:FilterHeader ID="grdNames" runat="server" OnCreateFilterableField="OnCreateFilterableField">
</ext:FilterHeader>
</Plugins>
</ext:GridPanel>
I tried to reproduce your code but couldn't reproduce the issue. Maybe you need to upgrade your Ext.NET version?
Check if this works on your side, I tried reproducing your scenario with the code snippet you provided, but maybe I skipped something?
<%# Page Language="C#" %>
<!DOCTYPE html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
strOrigen.Data = new List<object>()
{
new { CheckNames = false, Names = "Name 1" },
new { CheckNames = false, Names = "Name 2" },
new { CheckNames = true, Names = "Name 3" },
new { CheckNames = false, Names = "Name 4" }
};
strOrigen.DataBind();
}
}
</script>
<html>
<head runat="server">
<title></title>
</head>
<body>
<form runat="server" id="fm1">
<div>
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="grdNames" runat="server" Title="Names">
<Store>
<ext:Store ID="strOrigen" runat="server">
<Model>
<ext:Model ID="Model25" runat="server">
<Fields>
<ext:ModelField Name="CheckNames" Type="Boolean" DefaultValue="false" />
<ext:ModelField Name="Names" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<View>
<ext:GridView ID="GridView6" runat="server" TrackOver="true" StripeRows="true" />
</View>
<ColumnModel ID="ColumnModel15" runat="server">
<Columns>
<ext:ComponentColumn ID="radColumn" Text="radCol" runat="server" Width="30" DataIndex="CheckNames">
<Component>
<ext:Radio ID="rdGo" runat="server" Name="vGO">
</ext:Radio>
</Component>
</ext:ComponentColumn>
<ext:CheckColumn ID="CheckColumn" runat="server" Text="chkCol" Editable="false" Filterable="false" DataIndex="CheckNames" Width="35" MenuDisabled="true">
<Items>
<ext:Checkbox runat="server" ID="chkRptGeoO" Checked="false">
</ext:Checkbox>
</Items>
</ext:CheckColumn>
<ext:Column ID="NamesColumn" runat="server" Text="names" DataIndex="Names" Width="200" />
</Columns>
</ColumnModel>
<Plugins>
<ext:FilterHeader ID="FilterHeader1" runat="server">
</ext:FilterHeader>
</Plugins>
</ext:GridPanel>
</div>
</form>
</body>
</html>
Using Ext.NET 4.2.1 here.

Custom component not loading in ig-grid column template

I'm trying to use custom made component in ig-grid column template. Component is rendered correctly in Html, but it never reaches component's constructor. How is it possible to use custom component in column template?
<script id="colTmpl" type="text/template">
<custom-component data="${datatouse}"></custom-component>
</script>
<div>
<ig-grid id="grid1" data-source="vm.datasource" width="100%" primary-key="Id" auto-generate-columns="false" autocommit="true">
<columns>
<column key="Id" header-text="Id" width="50px" data-type="number" hidden="hidden"></column>
<column key="datatouse" width="100%" header-text="my custom component" datatype="object" template="{{getHtml('#colTmpl')}}"></column>
</columns>
</ig-grid>
</div>
You can override the Ignite UI templating ($.ig.tmpl) and apply your custom component to the cells.
$.ig.tmpl = function (tmpl, data) {
angCells.push($compile(tmpl)($scope));
return "";
}
Here's a fiddle.

How do I perform a refresh of the content of an Ext.NET GridPanel?

I have ext.net GridPanel on the page. GridPanel contains a button. How to force GridPanel refresh after button click?
UPDATE:
protected void btnDelete_Click(object sender, DirectEventArgs e)
{
var rsm = egrDrivers.SelectionModel.Primary as RowSelectionModel;
var selectedRowsCollection = rsm.SelectedRows;
foreach (var key in selectedRowsCollection.Select(row => row.RecordID))
Facade.Vehicle.DeleteVehicle(Guid.Parse(key));
//how to force GridPanel refresh?
}
Let's say you have the data store GridStore1 assigned for your ext:GridPanel GridPanel1:
<ext:GridPanel ID="GridPanel1" runat="server" Title="My Grid">
<Store>
<ext:Store ID="GridStore1" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="RecordID" />
// ...
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Header="Record ID" DataIndex="RecordID" Width="100" />
// ...
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
</ext:RowSelectionModel>
</SelectionModel>
</ext:GridPanel>
You could refresh the data of your GridPanel after any process by writing the following server-side code:
GridStore1.DataSource = Facade.Vehicle.List(); // your data object List or DataTable
GridStore1.DataBind();
If refreshing means reloading data you can use grid.store.load():
new Ext.grid.Panel({
// ...
store: yourStore,
// ...
bbar: [{
xtype: 'button',
text: 'refresh',
handler: function(btn){
var grid = btn.findParentByType('grid');
grid.store.load();
}
}],
// ...
});

Resources