I am currently working on a kendo ui tab. It contains tab1,tab2,tab3.
The first tab has the kendo ui grid which worked fine. What I am trying to do is when a user selects a record on tab 1, tab 2 , or tab 3 it will be enabled with data populated from controller.
here is the code:
function onChange() {
var grid = $("#product").data("kendoGrid"); ;
var selected = grid.select();
if (selected.length) {
var data = grid.dataItem(selected);
var trn= data.TRN;
$($('#tabstrip').find('a.k-link')[3]).data('contentUrl', 'TestPlan?TRN=' + hrn);
$($('#tabstrip').find('a.k-link')[2]).data('contentUrl', 'Summary?TRN=' + hrn);
var ts = $('#tabstrip').data("kendoTabStrip");
ts.reload(ts.tabGroup.children("li")[3]);
ts.reload(ts.tabGroup.children("li")[2]);
ts.enable(ts.tabGroup.children("li")[3]);
ts.enable(ts.tabGroup.children("li")[2]);
}
}
Testing:
If I use Chrome to inspect the error that they could not find the link of tab 2 and tab 3
So I suspect that my url content not format properly because it works in the local environment but not in the server
So how I could modify the following link using URL.content?
$($('#tabstrip').find('a.k-link')[3]).data('contentUrl', 'TestPlan?TRN=' + trn);
$($('#tabstrip').find('a.k-link')[2]).data('contentUrl', 'Summary?TRN=' + trn);
try to use this syntax : '/TestPlan?TRN='
i found it:
$($('#tabstrip').find('a.k-link')[1]).data('contentUrl', '#(Url.Content("~/TestPlan?TRN="))' + trn);
Related
i am new in Oracle-Apex. I need Help to show a PDF in Oracle APEX. I have a question: I have uploaded the PDF in to the Database. I save the PDF as a blob in database. After that i showed the name of the PDF in Classic Report.When i click on the name, i want to see the preview of the PDF that i had uploaded.
Now i am searching a way to show the PDF with a Code. Can somebody help?
I need previous and next button.
How can i show this PDF in the Region?here is my Page
Here's an example I quickly whipped up using APEX_APPLICATION_TEMP_FILES. Hopefully it's what you're trying to achieve.
https://apex.oracle.com/pls/apex/f?p=34781
Username: demo
Password: demo
This uses the PDF.js project by Mozilla. Here's a quick recipe of what you may need.
Create a File Browse page item and set the Storage Type to Table APEX_APPLICATION_TEMP_FILES.
Create a page button to submit the page.
Create a Classic Report region and enter the following query:
select
id
, filename
from apex_application_temp_files
where application_id = :APP_ID
Add a virtual column and set the HTML Expression:
<button type="button" class="btn-preview-pdf" data-id="#ID#">Preview</button>
Create a region and enter the following in the Source:
<canvas id="preview-pane"></canvas>
Create a Click dynamic action.
a. Set the selection Type to jQuery Selector.
b. Enter the jQuery Selector .btn-preview-pdf.
Add a Execute JavaScript Code action with the following JS code (check out the examples from the PDF.js website for more details on what the code does):
var fileId = $(this.triggeringElement).data('id');
var docUrl = 'f?p=&APP_ID.:0:&APP_SESSION.:APPLICATION_PROCESS=DOWNLOADPDF:::FILE_ID:' + fileId;
var previewPane = this.affectedElements[0];
// from PDF.js examples
pdfjsLib.getDocument(docUrl).then(function(pdf) {
var pageNumber = 1;
pdf.getPage(pageNumber).then(function(page) {
console.log('Page loaded');
var scale = 1.5;
var viewport = page.getViewport(scale);
// Prepare canvas using PDF page dimensions
var canvas = previewPane;
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.then(function () {
console.log('Page rendered');
});
})
}, function(reason) {
console.error(reason);
});
For the action, also set the Affected Elements:
a. Selection Type: jQuery Selector
b. jQuery Selector: #preview-pane
Follow Joel Kallman's post on creating a link to download a file. You will need an Application Process (DOWNLOADPDF) and an Application Item (FILE_ID) The modified code for the Application Process DOWNLOADPDF looks like this:
begin
for file in (select *
from apex_application_temp_files
where id = :FILE_ID) loop
--
sys.htp.init;
sys.owa_util.mime_header( file.mime_type, FALSE );
sys.htp.p('Content-length: ' || sys.dbms_lob.getlength( file.blob_content));
sys.htp.p('Content-Disposition: attachment; filename="' || file.filename || '"' );
sys.htp.p('Cache-Control: max-age=3600'); -- tell the browser to cache for one hour, adjust as necessary
sys.owa_util.http_header_close;
sys.wpg_docload.download_file( file.blob_content );
apex_application.stop_apex_engine;
end loop;
end;
Almost missed this out. On the Page Attributes, set the JavaScript File URLs to any of the CDNs listed. For example:
//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.550/pdf.min.js
Note that this is a very basic prototype. The preview only allows you to view the first page. You will need to figure out the API and then do the necessary to allow multipage viewing. I'll leave you to figure that out.
That should be it. Let me know if it doesn't work for you.
I have my picker code as follows:
var mimetypes = "application/vnd.ms-excel," +
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet," +
"application/vnd.google-apps.spreadsheet," +
"application/vnd.ms-powerpoint," +
"application/vnd.openxmlformats-officedocument.presentationml.presentation," +
"application/vnd.google-apps.presentation," +
"application/vnd.openxmlformats-officedocument.wordprocessingml.document," +
"application/msword," +
"application/vnd.google-apps.document," +
"application/pdf,"+
"application/vnd.google-apps.folder";
var view = new google.picker.View(google.picker.ViewId.DOCS);
view.setMimeTypes(mimetypes);
var docsView = new google.picker.DocsView()
.setIncludeFolders(true)
.setMimeTypes('application/vnd.google-apps.folder')
.setSelectFolderEnabled(true);
var folderView = new google.picker.View(google.picker.ViewId.FODLERS);
folderView.setMimeTypes("application/vnd.google-apps.folder");
var picker = new google.picker.PickerBuilder()
.enableFeature(google.picker.Feature.MINE_ONLY)
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.setAppId(appId)
.setOAuthToken(oauthToken)
.addView(view)
.addView(docsView)
.addView(folderView)
.addView(new google.picker.DocsUploadView())
.setSelectableMimeTypes(mimetypes)
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
.build();
picker.setVisible(true);
I have added the view to enable "setSelectFolderEnabled" but still after selecting the folder form Picker View, the "Select" button in the bottom remains disabled. I need the folder Id in callback for further processing. But I am unable to figure out how to enable the button even if a folder is selected.
Does Google Picker API only allow to select files saved in Google Drive ??
Just changed my code to this and it works :
var docsView = new google.picker.DocsView().
setIncludeFolders(true).
setSelectFolderEnabled(true);
var picker = new google.picker.PickerBuilder()
.enableFeature(google.picker.Feature.MINE_ONLY)
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.setAppId(appId)
.setOAuthToken(oauthToken)
.setDeveloperKey(developerKey)
.addView(docsView)
.setCallback(pickerCallback)
.build();
picker.setVisible(true);
Try to add the google.picker.ViewId.FOLDERS viewId in the addView. I think you can't select folders due to it not being set in the PickerView.Builder. More information about the View Descriptions can be found on the Showing Different Views of the Picker API documentation.
After that, determine if you have write scopes for you to upload files to Drive.
I have try this
$("#divPostList").data("kendoMobileListView").prepend("...");
but it gives error prepend: prepend is not a function
prepend method has an array as argument. You should use:
$("#divPostList").data("kendoMobileListView").prepend([ "..." ]);
But this is not available in v2013.1.319, Can you use the latest release? If you need to stay on v2013.1.319 you need to do something like:
// Get reference to the listview
var listview = $("#divPostList").data("kendoMobileListView");
// Get reference to the datasource
var ds = listview.dataSource;
// Get original data
var old = ds.data();
// New items + old
var prepended = $.merge([ "Prepended 1", "Prepended 2" ], old);
// Send prepended to listview
ds.data(prepended);
You can see it running here : http://dojo.telerik.com/#OnaBai/ONiY
But of course, upgrading Kendo UI version makes it much easier.
I need to execute a History push state to some Action on Grid click...
I looked the API, and I think the Events Change its the right place to do that...
So, thats the code i´d like to put in there
"window.History.pushState(null, null," + "'" + Url.Action("Edit", "MyController") + "/' + Id);"
I used that on a similar JS Grid and works fine, but I dont know how to do that with Kendo UI MVC Wrapper...
I intend to use that directly on Grid definition, so I dont have to create any JS method... Something like that :
.Events(events => events.Change(x => "window.History.pushState..."))
Is that possible? How get the ID and declare Url.Action there?
Thanks
The docs for the "change" event have an example of how to get the data item for the selected row(s).
The MVC helper expects the string name of a JS function to be passed to events.Change() but I think you can define a function there too.
So something like:
#{
var url = Url.Action("Edit", "MyController");
}
...
.Events(events => events.Change(x => #"function (changeEvent) {
var selectedRows = this.select();
var dataItem;
var numSelectedRows = selectedRows.length;
for (var i = 0; i < numSelectedRows ; i++) {
dataItem = this.dataItem(selectedRows[i]);
selectedDataItems.push(dataItem);
window.History.pushState(null, null, """ + url + #"/"" + dataItem.Id);
}
}"))
I don't have a Kendo MVC project open in front of me to verify the syntax, but that should be pretty close, or at least get you pointed in the right direction.
Hi I am trying to make some changes to our implementation of CKEDITOR 3.6.2
by removing all but 2 options in the link target type dropdown that appears in the link dialog's target tab.
I tried to achieve this using the API but I am getting an error in the minified core ckeditor.js file in the dialog() method on this line X=S.lang.dir; where S is the editor.
The .lang property of the editor instance is undefined when doing CKEDITOR.dialog(editor, 'link'), when viewing debugging the "editor" object I don't see a lang object anywhere, so I'm not sure why this is missing? I didn't work on our original implementation but as far as I know we have only added 2 plugins and not changed the ckeditor core.
Here is my code:
for (var i in CKEDITOR.instances) {
var editor = CKEDITOR.instances[i];
var dialogObj = CKEDITOR.dialog(editor, 'link');
var linkDialogTargetField = dialogObj.getContentElement('target', 'linkTargetType');
// API didn't seem to have a more efficient approach than clearing all and re-adding the one we want
linkDialogTargetField.clear();
linkDialogTargetField.add('notSet', '<not set>');
linkDialogTargetField.add('_blank', 'New Window (_blank)');
}
I have managed to make my change without using the API properly by doing the below:
CKEDITOR.on('dialogDefinition', function (ev) {
// Take the dialog name and its definition from the event
// data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're
// interested on (the "Link" dialog).
if (dialogName == 'link') {
// Get a reference to the "Link target" tab.
var targetTab = dialogDefinition.getContents('target');
var targetField = targetTab.get('linkTargetType');
// removing everything except the 1st (none set) & 3rd (new window) options from the dropdown
targetField['items'].splice(1, 2);
targetField['items'].splice(2, 3); // the array is reduced by splice, so we have to splice from [2] onwards not from [4]
}
});
but I don't like this approach, does anyone have any ideas? or other ways to achieve the same result using the API?
Using second approach and overwritten the dropdown items instead of splicing.