Kendo grid inside splitter next page - asp.net-mvc

Here's my layout. I'm using a Kendo splitter control. The left pane contains a menu and the right is the main content. Some of the content pages contain kendo grids that can contain several pages of data. My problem is that when the user clicks on the next page of the grid, it performs a post back and the whole page refreshes taking the user back to the home page. The left menu loads the right panel using javascript. Does anyone know how to get around this?
In another words, I need the grid to load the next page and target the right side of the splitter control. How do I "Ajaxify" the next page of the grid control?

It sounds like your Grid is configured for Server Binding - if so you need to change it to Ajax binding and there is not other way to put it inside a Splitter which content is loaded with Ajax.

Related

ag-grid in a Material Tab

I have an app that has two ag-grids in two tabs using Angular Material tabs. When the user switches between tabs the items in one of the columns get rendered outside of the grid (but inside the tab body). The difference in the column is that it uses a custom cell renderer. It only effects the grid in the first tab because that is the grid that uses the cell renderer. So you have to switch to the second tab then back to the first tab to see it.
Stackblitz example here
It's hard to see because the column elements get rendered at the bottom of the tab window, you can barely see them poking out at the bottom of the grid. Also, if you page to the next page of the grid they are rendered properly, even on the first page when you page back.
I've tried executing gridApi.refreshCells() after the tab has switched but it doesn't do anything.
The fix turned out to be simple and I hope this is the best method for doing so. I simply execute the grid API's redrawRows method.

Displaying different forms in kendo window on click of different buttons

I have 3 buttons and, on click of every button, totally different content has to be loaded in kendo window. I am doing this in MVC. How to do this?
Your best solution is to create 3 different windows and, in Javascript, when you click on a button, you open the window and close others.
Or, you can also create only one window and load it's content dynamically when a button is clicked. But you have to deal with Kendo Window API.
If you want to reload the content of a window, see this link.

Retaining values of controls in MVC 3 after moving to new page

I am new to MVC 3. I have a page (for eg: "Master Page") where I have some dropdown boxes to select values and click on "Go" button (type = "Button"). Based on the selection, I am filing a grid. One of the columns in the grid will have hyperlink. Upon clicking the hyperlink, opens another page (for eg: "details Page") to display other details. Now if the user click on browser back button, the values in the controls of "Master Page" is empty. How to retain the values in the dropdown boxes and grid on "Master Page".
You're relying on behavior of the browser. Some browsers can keep this data, others don't. So it's up to programmer decide where the data must be stored. In common cases you can use the following approaches:
If you make a wizard, just make some div's hidden (you will keep wizard's steps in there), and make your own next/back buttons inside of your wizard. When the user tries to go back and next, he won't go to another page, but will switch between steps via JavaScript inside of one page (all data will be kept).
You can do the same, but keeping your data on the server. In this case, by clicking on the button, your data will be kept in the database. And will be reloaded again when the user goes back.
You can manually save data to cookies. It's okay if you have small amounts of data to be kept.

Calling rowToggle on Page Load using Prime Faces?

I am using primefaces 3.5, the latest release for our development work! In our homepage, we display the rows of data. When we click a row onRowSelect (SelectEvent) event we navigate to the next page with the Navigation Handler. On this landing page, I have a dataTable with expandable rows which has data in it. When I click the rowToggle icon the data is displayed in row expansion section (as it should normally).
What I need is to show the data automatically when page is loaded, with the rowToggler displaying down.
How can I achieve this?
This can be achieved using a bit of JavaScript (jQuery). All you have to do, is as your page loads call the click action of the RowExpander.
Something like this would work :
jQuery('.ui-row-toggler').click()
You can place this in your body onLoad attribute.
Source
http://forum.primefaces.org/viewtopic.php?f=3&t=8537

how to position partial view in asp.net mvc through java script?

i am using partial view for my project but my problem is that my links are on right side of masterpage and when i clicked on particular link the view should displayed on left side on contentplace holder of master page. but right now its showing exactly below so my whole disgne is distrubed.
how to position partial view in asp.net mvc through java script?
so please if anyone know the solution tell me.
thanks
Do you basically mean your HTML is not set to allow the Content on the left, and the Menu on the right?
Maybe you would benefit from a CSS Layout Template? Put the Content placeholder in large column, and the menu PartialView in the side bar.
It might be a problem with your page CSS. Look at your styles for "Float" 's. If you want your content to be to the left of your page, surround your contentPlaceHolder with a div tag and add a "float:left" style to it.
If that doesn't work it might be your view is wider than your master page design is set up for. So it will pop below every other page element to fit on your page!
This is not realy asp.net mvc specific but html. You will have a better chance to solve your problem if you tag your question as html and css.
You can just save the source (I mean the rendered source from within the browser) of the page that doesnt display properly with the extension html in the root of your web. Then start playing with the html.
Request the page by calling http://yourserver/yourpagetodebug.html.

Resources