I am new to Kendo UI. I would like to be able to display a popup with the results from my controller.
My example is very simple. I have this data on my page.
Some text [Create]
When I click on [Create], a call in made to my controller. The controller will create a PDF file. Next, I would like to be able to display the pdf in a KendoUI Window.
I am getting hung up on how to pass info back to page so the KendoUi Window is aware of the PDF file name to display.
Thanks in advance for your tips.
Steve
MVC 4
KendoUI 2012.2.270
There are two basic approaches:
You create the window when page is loaded and have a function for changing the content and make it visible.
You create the window each time.
Assuming that you for 1. Then you have an HTML that is something like this
<div id="popup_window">
</div>
Create PDF
Then you define the window and the click bind for triggering the open as:
$("#popup_window").kendoWindow({
title :"PDF document",
visible :false
});
$("#show").click(function () {
$("#popup_window").html("<object id='pdf' data='doc.pdf' type='application/pdf'/>");
$("#popup_window").data("kendoWindow").open();
});
Where I create a kendoWindow but set it's visibility to not visible.
Then I bind a function to the click on the Create PDF message that sets the content to an HTML object where data attribute is the pdf document and then open by invoking kendoWindow open method.
Related
I have an separate Add button (neither on toolbar, nor on grid) and I want to open a popup window (having some fields) after clicking this button in order to create a new record. I have a look at the Kendo Demo pages, but all the samples use grid's or toolbar's Create button. Instead of them, a need a sample with a separate button. Any sample please?
Update: I want to create a listview as shown below instead of grid:
If you call dataGrid.addRow() method and edit mode is set to "popup", Popup window will be displayed.
Look at this dojo
I'm having a jqgrid and on the loadComplete of the grid i am calling a function that creates a new div with some custom classes and appends that div to one of the columns where i am displaying the custom image button created in the div.
Now, on the click of the image button i am displaying a modal dialog form. On my modal dialog form i am getting some value by making a ajax call for the selected record .Also there are two buttons ( save and cancel) on the dialog. When .dialog("close") method is called after save or on close, i am getting a error "SCRIPT28: Out of stack space " and Strangely the save also works fine.
Can anybody assist on that.
Thanks in advance.
I have a ASP.net MVC application. On one page I have a button and when user clicks on it I need to display some information on a pop up window. How can I do that in ASP.NET MVC? What do I use and where do I write the code for pop window? In the controller? Some java script?
Thank you!!
You can display messages with javascript. The content of the message can be set in the markup or by your Controller as a Model property. You have a few display options:
Use the alert() function, which will display a native browser dialog
Display a styled modal dialog (E.g. jQuery UI dialog)
Display a styled div (E.g. jQuery UI Message - shameless plug, this one of my open source projects)
The alert function isn't very pretty, but it's the simplest. I typically go with a modal dialog or a styled div, depending on the UI requirements.
If the information you want to display in a pop up is dynamic (i.e you need some c# logic to run) then I'd suggest putting that logic in a controller and have the corresponding view be the pop up itself. You can stick some JavaScript at the top of the view to launch the popup on load.
The page with the button trigger can call that controller and pass any data needed. To make it smooth maybe make the trigger use Ajax.
I have made a blog application where I have this form for writing the blog. It has a title field, an instance of of tinymce editor for the blog body, a text field for adding tags and the submit button.
What I want to do is to by default show the whole form to the user when the page loads. The user can fill in the title. Now when the user comes on the text-editor, there will be a button on clicking which only the text editor will open in the modal window and the user can type in that.
Once the user clicks on the cross, then the text is copied to the underlying text editor. I am not that good at javascript and I have looked a few blogs, but that didn't help. Any directions will be really appreciated. I am adding a snapshot of how the blog page looks like.
You need to start off by initializing your TinyMCE editor with something like this (add in any options you want):
$(function() {
tinyMCE.init({
mode: "none",
theme: "simple",
});
//whatever code
});
You can set up any mode you like but I'm going to go with dynamic creation (mode: none) because it gives you more control. Initialize your modal in "whatever code" then create your editor inside the modal with the code below:
tinyMCE.execCommand('mceAddControl', false, 'id_of_textarea');
To get/set the content of your editor you would do this:
tinyMCE.activeEditor.getContent();
tinyMCE.activeEditor.setContent('data in here');
You'll need to close your tinyMCE editor before you close your modal or it will fail to load next time the modal opens. To close it you need to execute the following code:
tinyMCE.execCommand('mceRemoveControl', false, 'id_of_textarea');
I am using jQuery UI tabs to have a tab where I can search for records and then other tabs where I can view individual record details. I am trying to have search results link clicks open the relevant tab and load the specific ajax content for that search result.
I am able to switch tabs using an href with something like the jQuery UI tabs example code:
var $tabs = $('#example').tabs(); // first tab selected
$('#my-text-link').click(function() { // bind click event to link
$tabs.tabs('select', 2); // switch to third tab
return false;
});
I see ajax content is normally loaded via setting the href on the tab itself:
<li><a id="customerTabLink" href="#tabs-2"><span>Customer</span></a></li>
I've tried adding this to the my-text-link onclick function to dynamically set the href for the tab but that doesn't load the content in my tab.
$('#customerTabLink').attr("href", "/view/dspClient.cfm?id_customers=15");
Is there another way I can be loading ajax content in the tab without setting this href? Or am I setting the href incorrectly? Is this something I should be using the load even for? http://docs.jquery.com/Events/load
Thanks!
-Matt
To change the URL that tab is using for AJAX calls you should use this:
$('#example').tabs('url', 1, '/view/dspClient.cfm?id_customers=15');
First argument tells that you want to change tab URL. Second argument is the index of the page you want to change the url (zero-based so 1 is the second tab), and third argument is the new URL.