I have added the KendoUI Image Browser to my application but when it opens up, I get the browser (upload, select, delete, sort, search...etc) but do not get the "Insert or Cancel" buttons... Nor do I get the "Web address" and "tooltip" bit at the bottom.
I'd like to have the whole image browser (I don't want to use the editor).
Any help would be appreciated.
Instead of this:
I get this:
Here is my code:
<div id="imgBrowser"></div>
$(document).ready(function () {
$("#imgBrowser").kendoImageBrowser({
//imageBrowser: {
messages: {
dropFilesHere: "Drop files here"
},
transport: {
read: "/ImageBrowser/Read",
destroy: {
url: "/ImageBrowser/Destroy",
type: "POST"
},
create: {
url: "/ImageBrowser/Create",
type: "POST"
},
thumbnailUrl: "/ImageBrowser/Thumbnail",
uploadUrl: "/ImageBrowser/Upload",
imageUrl: "/ImageBrowser/Image?path={0}"
},
change: function () {
//this.value(); //Selected image URL
console.log(this.value());
}
// }
});
});
It appears the ImageBrowser can technically be used outside of the Editor, but it is not officially supported. Here is a thread on the Telerik forum concerning this issue:
http://www.telerik.com/forums/why-not-make-image-browser-in-editor-as-separate-controle
Here are the most notable quotes:
You can initialize an image browser widget from a regular element. The configuration is the same as when using the image browser inside an Editor.
http://docs.kendoui.com/api/web/editor#imagebrowser-object
<div id="imgBrowser"></div>
$("#imgBrowser").kendoImageBrowser({
transport: {
read: "/service/ImageBrowser/Read",
destroy: {
url: "/service/ImageBrowser/Destroy",
type: "POST"
},
create: {
url: "/service/ImageBrowser/Create",
type: "POST"
},
thumbnailUrl: "/service/ImageBrowser/Thumbnail",
uploadUrl: "/service/ImageBrowser/Upload",
imageUrl: "/service/ImageBrowser/Image?path={0}"
}
});
The ImageBrowser exposes three events
change - when a file is clicked
apply - when a file is double-clicked
error - when a request fails
The change and apply events do not expose the clicked file, but you can find it out by checking which .k-tile element has a k-state-selected class.
The ImageBrowser does not expose an event related to folder navigation. You can get or set the current location with the widget's path() method.
The change and apply events do not expose the clicked file, but you can find it out by checking which .k-tile element has a k-state-selected class.
It's possible to get current selected item with something like this without checking for k-state-selected class:
change: function(ะต) {
var selectedImage = e.sender._selectedItem();
console.log('selectedImage', selectedImage);
}
I haven't checked it for apply event.
Related
I want to use DataTables Editor but I want full control over the post back rather than letting Editor-Server handle it. Is there a way to do this? I am able to specifiy the url in Ajax on the client side and it does post back to the Controller, the only problem is I cannot figure how to get the data out of the call.
This is the Ajax portion:
$(document).ready(function () {
editor = new $.fn.dataTable.Editor({
ajax: ({
url: "/../AnyController/Update",
dataType: "json",
contentType: "application/json",
type: 'POST'
}),
formOptions: {
inline: {
onBlur: true,
submit: 'all'
}
},
table: "#timetracker",
fields: [
{
label: "Date1:",
name: "Date1"
},
{
label: "Comment 1:",
name: "Comment1",
type: "textarea"
}
]
});
And this is the Contoller method:
[HttpPost]
public JsonResult Update(EditorReturnData wtd)
{
return Json(wtd);
}
I have tried using a variety of other method signatures but the value of wtd is always null. I have no problem loading the table just by passing Json data, but how to takeover the update process from datatables editor is eluding me.
I have one update. I could not figure out how the Get, Post and Put could all use the same Controller Method and the method takes no parameters, even for the Post and Put. Finally I figured out that Editor is passing the data in the Header and it could be accessed with Request.Body. From there it must be the Datatables dll that is doing the actual updates.
enter code hereI have found the best way to do this is to post back from ajax to a different Controller for Post and Put and you can get access to the return data from the HttpRequest body in the following manner.
public ActionResult Rest(HttpRequest request)
{
var stream = request.Body;
string url = new StreamReader(stream).ReadToEnd();
string newUrl;
while ((newUrl = Uri.UnescapeDataString(url)) != url)
url = newUrl;
I added this code to the RestController from the Datatables Dot Net Core Demo Rest example which can be downloaded from https://editor.datatables.net/
The Ajax looks like this
editor = new $.fn.dataTable.Editor( {
ajax: {
create: {
type: 'POST',
url: '/api/rest/create'
},
edit: {
type: 'PUT',
url: '/api/rest/edit'
},
remove: {
type: 'DELETE',
url: '/api/rest/remove'
}
},
$("#imgBrowser").kendoEditor({
tools: [
"insertImage"
],
imageBrowser: {
messages: {
dropFilesHere: "Drop files here"
},
transport: {
read: "/ImageBrowser/Read",
destroy: {
url: "/ImageBrowser/Destroy",
type: "POST"
},
create: {
url: "/ImageBrowser/Create",
type: "POST"
},
thumbnailUrl: "/ImageBrowser/Thumbnail",
uploadUrl: "/ImageBrowser/Upload",
imageUrl: "~/ImageGallery//Image?path={0}"
},
change: function () {
//this.value(); //Selected image URL
},
select: function () {
}
}, execute: function (e) {
},
change: function () {
},
select: function () {
}
});
I am new to kendo Controls. i want to save images in my project folder. I am Using this code but it is not calling Controller Actions but when i am uploading image it is giving. images re also not saving in folder it is showing always loading icon. when i upload any image it is showing this below error.
Error! Requested Url returned 405 - method not allowed
Please help me how can i resolve this error. and how can i save uploaded images into my project folder.
You should change your application web.config, This link help you through the way
http://www.asp.net/web-api/overview/testing-and-debugging/troubleshooting-http-405-errors-after-publishing-web-api-applications
I have created an application server side that will create a pdf of a report when requested. Then the link of that report can then be sent back to the client.
My question is how do I hook this up to a button click event in my asp.net mvc website. So the scenario is:
User fills in a few boxes.
Clicks the generate report button.
A little loading feedback indicator is shown.
A request is sent to the server, the server then generates the PDF report and sends back a url link to the pdf that is being hosted on the server.
The pdf will then be shown in the users browser (maybe in a new window).
Is this possible and is there any examples around that show how to do it?
Thanks in advance
I've done something similar.
When the user clicks the button it send an ajax request to the server passing some data:
$.ajax({
type: 'POST',
dataType: 'json',
url: '<%=Url.Action("GenerateReport", "MyController")%>',
data: { Param1: $('#Param1').val() , Param2: $('#Param2').val() },
beforeSend: function(xhr) {
$.blockUI({ message: '<h1> printing ...</h1>', css: { border: 'none', padding: '15px', backgroundColor: '#000', '-webkit-border-radius': '10px', '-moz-border-radius': '10px', opacity: .5, color: '#fff'} });
},
success: function(result) {
if (result.Success) {
FetchPdfDocument('<%=Url.Action("GetPdfReport", "MyController", New With {.id = "/"})%>' + result.Guid);
}
else {
alert("Problems!");
}
},
complete: function() {
$.unblockUI();
},
error: function(req, status, error) {
alert(error);
}
});
The controller writes the document on the disk and sends back a guid which is the name of the PDF document.
This is the other bit of javascript which opens the file creating an IFRAME:
function FetchPdfDocument(UrlToPdf)
{
$('#ifPdfReport').remove();
$(document.body).append('<IFRAME id="ifPdfReport" style="display:none;">');
$('iframe#ifPdfReport').attr('src', UrlToPdf);
// $('#ifPdfReport').load(function () { });
}
I've used jQuery BlockUI as loading feedback indicator.
Hope it helps.
I am showing lots of form using jquery dialog and I wish to add in client side validation on it. I read through some examples, saying that mvc 3 already somehow support jquery client side validation, but I tried by including the necessary script, and my form like this:
#using (Html.BeginForm("CreateFood", "Home", FormMethod.Post, new { id = "formData" }))
{
#Html.ValidationSummary(false, "Please fix these errors.")
When i try to submit my form without fill in the required field, I still dint get any message. Can anyone give me more idea / explanation / examples on this??
Really needs help here... Thanks...
UPDATE (add in the script for my dialog)
$createdialog.dialog("option", "buttons", {
"Cancel": function () {
//alert('Cancel');
$createdialog.dialog('close');
},
"Submit": function () {
var frm = $('#formData');
$.ajax({
url: '/Food/CreateFood',
type: 'POST',
data: frm.serialize(),
success: $createdialog.dialog('close')
});
}
});
Once dropped, open dialog:
// Once drop, open dialog to create food
options.drop = function (event, ui) {
// Get the ContainerImgName which food dropped at
var cimg = $(this).attr('id');
// Pass in ContainerImgName to retrieve respective ContainerID
// Once success, set the container hidden field value in the FoodForm
$.ajax({
url: '/food/getcontainerid',
type: 'GET',
data: { cImg: cimg },
success: function (result) { $('#containerID').val(result); }
});
clear();
$.validator.unobtrusive.parse($createdialog);
$createdialog.dialog('open');
};
I've faced the same problem, solved with:
$(name).dialog({
autoOpen: true,
width: options.witdth,
heigth: options.height,
resizable: true,
draggable: true,
title: options.title,
modal: true,
open: function (event, ui) {
// Enable validation for unobtrusive stuffs
$(this).load(options.url, function () {
var $jQval = $.validator;
$jQval.unobtrusive.parse($(this));
});
}
});
of course you can add the validation on the close event of the dialog, depends on what you're doing, in my case the popup was just for displaying errors so I've performed validation on load of the content. (this pop up is displaying am Action result)
For every dynamically generated form you need to manually run the validator once you inject this content into the DOM as shown in this blog post using the $.validator.unobtrusive.parse function.
I have the following script which works kind of...
$(document).ready(function(){
// add or remove from favorites
$("input:checkbox").change(function() {
if($(this).is(":checked")) {
$.ajax({
url: 'favorite.aspx',
type: 'POST',
data: { ID:$(this).attr("id"), State:"1" }
});
} else {
$.ajax({
url: 'favorite.aspx',
type: 'POST',
data: { ID:$(this).attr("id"), State:"0" }
});
}
});
// search on keyup
$(".txtSearchBox").keyup(function()
{
$.ajax({
url: 'search.aspx',
type: 'POST',
data: { strPhrase:$(".txtHeaderSearch").val() },
success: function(results)
{
$("#divSearchResults").empty();
$("#divSearchResults").append(results);
}
});
});
});
When the page loads for the first time after clearing browser cache, favorites function works fine and so does the search function. However, after loading the page after a page refresh, if I perform a search first, then try to tag a favorite, the favorite will not get inserted into the database, I have to click the reload browser button, then add a favorite.
Why is this happening?
You need to use live() as you are trying to act on stuff in the dom which you are inserting using ajax.
http://api.jquery.com/live/
Live is an answer, but I've had problems with change event with live and Internet Explorer, at least with select fields. I've solved the problem by using the livequery plugin.
jQuery delegate should also work if you don't want to install plugins.