Usage (showing, hiding) of serverside Kendo tab strip in MVC - javascript

I have a kendoGrid() and I am attaching a KendoTabStrip() with multiple tabs beneath it that contain additional data for the grid items.
The whole things is contained in a toggle panel.
My Question:
I want the whole(!) tabstrip only to be displayed if I actually need it:
on selecting any grid element or on pressing a specific button.
Since it is (apparently) not possible to hide the tabstrip initially using a attribute or something, I would have to hide the tabstrip with the .hide() function within a document.ready() function and show() it again on the both events button, change.
I really don't think that that's a good approach...
Is it possible to toggle the collapse state by a function?
I should admit: I am quite a newbie in the areas of JS, Kendo and MVC.
In order to proceed more efficiently I wanted to ask some basic things about my problem. Thanks!

Related

Jquery ui tabs component without separate content divs

I need to use a tab component of some sort and was looking at jquery-ui. It's already in the project I'm working on. But I don't want to have separate content divs as the controls for the content of each tab are all the same. Basically the UI includes a dropdown, a couple of text boxes and some radio buttons. The only thing dynamic are the items in the dropdown, captions for text boxes, etc. So I merely need to update these when I get a tab click event. The number of tabs is unknown until the component is initialized and the tabs are added dynamically.
Is there a way to do use the jquery-ui tabs control in this manner? In other words, without content divs? When I tried it this way, the tabs don't behave as expected (active tab color, etc., don't work as they normally do).

Retain Expanded Gridview on postback

I have a master gridview where each row can be expanded to show a child gridview.
The master grid loads with all children collapsed.
I do the expanding/contracting of the child grids in javascript so its nice an quick when loaded.
The problem I have is that when the page does a post back (e.g. when the user clicks to sort one of the columns) all the child grids get set back to a collapsed state. I want the expanded/collapsed state to be remembered.
The examples I've found so far all seem to do the expanding/collapsing on the server side.
But this seems really clunky and slow.
I'm thinking of trying to pass the expanaded/collapsed state of each row back to the server using a hidden field in each row of the master grid.
This hidden field would be set/cleared by the same JS routine which does the expanding/collapsing.
This seems like a good way to do it to me, but since I can't find any examples online I'm concerned I'm missing something???
Any reason not to do it using a hidden field?
Yes, track state in a hidden field. AJAX control toolkit does this for it's controls. Hidden field is a common approach. I'd highly recommend it, and that is the reason why you are experiencing this, because client mechanisms have no ability to "remember" preferences on postbacks, but hidden fields bridge that gap nicely.

Adding DIV's inside modal dialog HTML5

I tried to google but didnt find exactly I am looking for.
I need a sample example code or a resource link to create a modal dialog box and I want to have two boxes(div's) inside the dialog box.
I have to insert different content inside both the boxes(inside the dialog box) when the user clicks.
I know how to create a dialog box but, I would like to particularly know how to insert divs inside it.
I hope my question is clear. Please help.
If you just want to look at the code have a look at the work section of http://www.pixelvalet.com (ok! its my website but then it would help you right?).
The way i approached the issue is:
first i added the template (all the empty divs i needed which i would be populating later on) in the main html file itself
next i gave it a hidden css style to the parent which contained all the divs.
then i added a logic which would tell the browser the which link was clicked and then it would populate the divs in the template appropriately using ajax
it would then slowly fade in using jQuery
but then this isnt the only way you might do this. There are tons of plugins out there which help you create a modal box. but i opted for this route because i wanted it completely customised.
hope it helps.
I have used bootstrap modal for dialog box it works great you check it here:
http://getbootstrap.com/javascript/#modals
The basic idea is just put your dialog box code at bottom of you page,
<div id="my_dialog">
content
</div>
And you detach it in your jquery or other framework you are using or just pure js.
In jquery you can do this:
var my_dialog = $( "#my_dialog" ).detach();
now when ever you need to show it you just attach it to where you want to show it.
and before you attach it you can insert any content you want.
But I would suggest you to use bootstrap's modal much easier.

Calling a server side function in the java script of on click event of a div ASP.NET

I have web page with four grid views. Each grid is hidden under a div tag. Whenever user clicks on div the data grid corresponding to the div is shown. I have binded data to the grid views at the page load only, since the data size is huge I cannot load the data binding at the page as the time taking to page load is huge. I was thinking a way that grid view gets data loaded only when user clicks on the corresponding div tag .
Kindly advice me how can we do it ?
As stated by the first comment, you need to convert the grids to load via AJAX to achieve this.
You can use the function toggle() from jQuery to display/hide the divs.
With jQuery, you can also add events when you click on a div. This event should fire the appropriate jQuery function.
http://api.jquery.com/toggle-event/

Showing different objects depending on user selection in menu

I have html code where dropdown menu has several values including "Custom". I would like to have different html content below dropdown menu depending on user selection. If user chooses "Custom" value then I need to show one more dropdown menu and two editboxes and if in any other cases I need to show only one editbox.
As I understand I need to use onchange() event and javascript code. Is that right?
Could you please advice?
Thank you.
It seems like you are just getting started with this. Yes, you are probably going to end up using javascript for this. You need to understand that javascript is used to
Modify the DOM (i.e. the html) on the page dynamically
Detect events that happen on different elements of the DOM(e.g. a div or the window).
among other things.
The change event is only one event. Depending on the requirements, you might want to use change, but you might want to show the submenu when the user hovers the pointer over Custom.
Be aware that there are probably libraries you can use to show menus with submenus.
If you want to roll your own, you should try the following:
Show a div that looks like a popup when the user clicks a button or some area of the screen.
Populate the popup with the menu options
Detect when the user mouse-over or clicks the 'Custom' option.
Display the submenu.

Categories

Resources