Questions on UI for ASP.NET MVC Forum

1 answer

208 views

How to adjust size of grid within a splitter

I am using the ASP.NET MVC server side wrappers to create a page with a splitter control with 3 horizontal panes. Each pane includes a single <div> with header text, and a Kendo Grid.

How do I get the grid to resize appropriately within each pane?
I have tried the following, but the splitterPane.scrollHeight value does not seem correct when the pane gets smaller. For example, when the page starts all panes report a scrollHeight of 278, but if I move the top splitter up, the scrollheight of the top pane goes to up to 280 instead of being reduced..
I have tried to find another property/method other than scrollHeight and have been unsuccessful..
Any help is greatly appreciated!!!

function LayoutChange() {

UpdateGridSize("#PendingVessels", 0);

UpdateGridSize("#DueToSellVessels", 1);

UpdateGridSize("#DueToShiftVessele", 2);

}

function UpdateGridSize(gridName, indexPane) {

var splitter = $("#Main");

var splitterPane = splitter.find(".k-pane")[indexPane];

var splitterHeight = splitterPane.scrollHeight;

var gridElement = $(gridName),

dataArea = gridElement.find(".k-grid-content"),

//gridHeight = gridElement.innerHeight(),

otherElements = gridElement.children().not(".k-grid-content"),

otherElementsHeight = 0;

otherElements.each(function () {

otherElementsHeight += $(this).outerHeight();

});

gridElement.height(splitterHeight - 25); //-25 for the header item

dataArea.height(gridElement.innerHeight() - otherElementsHeight);

}

Splitter

answered on 27 May 2013

1 answer

95 views

Splitter with drag and drop support

Hi,

Is it possible to prepare a user interface with a few regions that is separeted by splitters that can be replaceable by drag and drop?

Thanks in advance,

Splitter

answered on 29 Apr 2013

1 answer

96 views

Main menu / _Layout-type page

Hi all,

I'm looking for the same basic functionality as (here), but the tree view is a maintenance/function menu, and the right hand pane is an "index"-type page for a partial CRUD function or a user screen or whatever I need to display. This could be a grid page for a list of records which leads to a CRUD edit page, or it could be a user-function page where the user makes a series of selections.

My background is in ASP.NET web forms, so it's a struggle right now to convert my thinking to MVC/Razor. I'm thinking that maybe the MasterPage-equivalent has a header/side-bar navigation/footer, and that the content area only shows a view (full or partial?) based on the item selected in the side tree view (see attached).

I plan to load the tree view content from the database so that I can control user permissions.

Does anyone have any suggestions on how to make this work in MVC/Kendo?

Splitter

answered on 25 Mar 2013

11 answers

149 views

Rare display of grid in splitter

Hi,

I've got an issue about the display of a grid in a splitter.

If I add a grid in my display, everything is broken ... Any idea ? :(

Splitter

answered on 11 Mar 2013

5 answers

241 views

Splitter Height on load

Hi everyone,

I'm doing an ASP.NET MVC project with Kendo UI, and I've got a little problem.

I have a jquery script for re sizing my splitter.

window.onload = function () {

$("#vertical").css("height", $(window).height());

};

But when I load my layout, I've got the good size, but not the good display. (1.png)

If I hide my bottom splitter , and then show it, it's the well display (2.png)

Thanks all for you answers :)

Splitter

answered on 17 Jan 2013

0 answers

87 views

LayoutChange-Event getting height of panel

Hi everyone,

I try to use the LayoutChange-Event to get the height of the previous panel. Here is the method I call with the event:

function onMultiLookupWindowSplitterResize(e)

{

if (e.sender.resizing != undefined && e.sender.resizing.previousPane != undefined)

$('#lookupGridContainer').height(e.sender.resizing.previousPane.height() - 40);

}

It really works fine. The only problem is. When I collapse a panel it doesn't really work. The previousPane is undefined and so I don't get the height.

If i resize the splitter first and THEN collapse one panel the previousPane is correctly defined. So the problem occurs only if I collapse a panel BEFORE resizing.

Hope you understand what I mean. Is this a bug? Is there any solution for this?

Thanks,
Mathias

Splitter

asked on 27 Sep 2012

1 answer

82 views

Input Text inside Splitter NOT Working...

Hi,

I put input text inside splitter makes input text read-only...

Here's my code snippet...
Index VIEW:
@helper RenderContentSplitter()
{
@(Html.Kendo().Splitter()
.Name("contentSplitter")
.Orientation(SplitterOrientation.Vertical)
.Panes(contentPanes =>
{
contentPanes.Add()
.Collapsible(true)
.HtmlAttributes(new { style = "height: 100%; width: 100%;", id = "pane1" })
.Resizable(true)
.Content(
Html.Action("RowDesignPartial").ToHtmlString()
);
})
)
}

RowDesignPartial VIEW:

<input type="text" id="txtRowName" name="txtRowName" class="k-textbox" value="" />

Thanks.......

Splitter

answered on 12 Sep 2012

1 answer

84 views

draggable div in Splitter

Hello!

Following situation:
- Splitter
- A div insinde of a panel of the splitter
- Makeing this div draggable using jQueryUI

Problem: That doesn't work anymore. As soon as I remove the splitter, everything works fine. Is this a bug?

Splitter