I had use a kendo upload but there is no remove button to delete the uploaded file.The code i used is below also the image is attached.
#(Html.Kendo().Upload()
.Name("files")
.Async(a => a
.Save("UploadAllDoc", "EmployeeDocuments")
.Remove("UploadAllDoc", "EmployeeDocuments")
.AutoUpload(true)
)
.Events(events => events.Success("onDocSuccess")
.Upload("onImageUpload")
.Complete("onDocComplete")
)
)
Solution: controller action Method --> UploadAllDoc.
Should return content('');
reference
Related
We're using Kendo UI MVC 2019.2.619 in our MVC5 project.
Our TreeView is rendering like this:
We took a look at the HTML it's generating at our end
But it should look like this
(Source: https://www.telerik.com/forums/k--items)
This is how we generate our TreeView.
#(Html.Kendo().TreeView()
.Name("BroadcastTreeView")
.DataTextField("Text")
.DataSource(dataSource => dataSource
.Model(model => model
.Id("Id")
.HasChildren("HasChildren")
.Children("Items"))
.Read(read => read.Type(HttpVerbs.Post).Action("ReadTree", "Broadcast").Data("treeViewReadData"))
.Events(events => events.RequestEnd("onRequestEnd")))
.Messages(msg => msg
.Loading("Data ophalen...")
.RequestFailed("Kan data niet ophalen")
.Retry("Probeer opnieuw"))
.Events(events => events
.Change("onTreeViewChange")
.Expand("onTreeViewExpand"))
.HtmlAttributes(new { #class = "custom-border" }))
When we drag the .k-in span outside of the .k-icon span in the Chrome debugger. The layout is like it's supposed to be. We do not have any custom JavaScript that's manipulating the TreeView. Is this a known bug with version we're using? Thank you.
Have you upgraded your jQuery to 3.5 recently? It doesn't allow for some self-closing tags, like <span class="k-icon" /> which are present in Kendo's source.
See https://github.com/telerik/kendo-ui-core/issues/5735 .
You need to upgrade Kendo or downgrade jQuery .
We've searched for a couple of hours, but no luck. We made the decision to upgrade to Kendo 2020.5.513. It makes for some layout issues but it has fixed the issue with the treeview.
I am using following code to display data from server in a Kendo Grid.
Working fine.
I want to put two hyperlinks in last cell of each row, but can do with only one.
I want EDIT and DELETE link in same cell.
How can I achieve this?
CODE
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(u => u.USERNAME);
columns.Bound(u => u.PASSWORD);
columns.Bound(u => u.ROLE);
columns.Bound(u => u.STATUS);
columns.Template(c => Html.ActionLink("Edit", "Edit", new { id = c.ID }));
}
)
.Pageable()
)
There are a couple of ways to do this.
First you could use the inbuilt edit/delete options from within the grid config
like so:
columns.Command(command =>
{
command.Edit();
command.Destroy();
});
Then just wire up the edit config and destroy delete commands appropriately.
Alternatively you can template these out using one of two methods:
First inline template:
columns.Bound(c => c.ID).ClientTemplate("<a href='Edit/#=data.ID#'>Edit Link #=data.ID#</a>
<a href='Delete/#=data.ID#'>Delete Link #=data.ID#</a>")
So this is just bound to a column and the template is added as per your requirements using standard html and javascript if required. This is fine for simple things but can get very clunky fast if you have more complex templates which then leads to the second method creating a template and calling that like this:
columns.Bound(c => c.ID).ClientTemplate("#=getButtonTemplate(data,'buttonsTemplate')#")
then create your template like so:
<script id="buttonsTemplate" type="text/x-kendo-template">
<div class='btn-group'>
<a class="btn btn-primary" href='#Url.Action("{edit action}", "controller")/#=ID#'>Edit Link #=ID#</a>
<a class="btn btn-danger" href='#Url.Action("{delete action}", "controller")/#=ID#'>Delete Link #=ID#</a>
<div>
</script>
then the getButtonTemplate function:
function getButtonTemplate(data, templateName) {
var templateObj = $("#" + templateName).html();
var template = kendo.template(templateObj);
return template(data);
}
So let me explain what is going on here with this second method.
Instead of templating the html in the column we extract it out into two components for want of a better word.
We use the getButtonTemplate function to pass 2 params in the data item and the template's id. This function simply loads the passed data object into the template and the kendo magic renders the html and injects the values in as required. Check the kendo demo site for more info on this subject.
The template element can be a mix of html and javascript so if you needed to apply some logic in the template this can be done in here. Again refer to the kendo site for more info on this subject.
I personally prefer the second method of doing this client templating as it is easier to manage and make changes without rogue hash's or brackets breaking code.
If you need any more info let me know and I will update the answer for you.
This may not be possible with blade, but I was wondering how to generate a textbox input from an 'other' option in a select dropdown. Is this possible?
{{ Form::select('showType', array(
'Theater' => 'Theater',
'Club' => 'Club',
'Festival' => 'Festival',
'Arena' => 'Arena',
'Closed Show' => 'Closed Show',
'College Show' => 'College Show'
'Other' => 'some kind of text input appears instead'
)}}
You'll need to use javascript to do that, Blade can't help much. But you can create, in Blade, your form input and set a hidden class to it and, when your user select the 'other' option you just have to remove that class.
You need to use JavaScript to do this because it happens on the client side. PHP and Laravel and Blade all happens on the server. An simple jQuery example:
$('select').on('change', function(){
$('body').append("<input type='text' value='whatever'/>");
});
Using the DetailTemplate grid example for KendoUI as my basepoint
http://demos.kendoui.com/web/grid/detailtemplate.html
I am trying to add a HREF link to the Orders tab that would open up another page.
I have tried using the #= OrderId # notation, but this seems to only access the first AJAX call result set - that is the data returned pulling back the users information.
I want to be able to access the information pulled back for the orders - see code snippet below
I have tried using the ClientTemplate method but to no avail, as it can't access (or it doesn't exist) the #= OrderId # literal.
I am using AJAX to pull the info for both sets of data, so don't seem able to use the Template method.
Any advice on accessing this level of JSON data returned as a secondary call would be greatly appreciated.
<script id="employeesTemplate" type="text/kendo-tmpl">
#(Html.Kendo().TabStrip()
.Name("TabStrip_#=EmployeeID#")
.SelectedIndex(0)
.Items(items =>
{
items.Add().Text("Orders").Content(#<text>
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("Orders_#=EmployeeID#")
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(101);
columns.Bound(o => o.ShipCountry).Width(140);
columns.Bound(o => o.ShipAddress).Width(200);
columns.Bound(o => o.ShipName).Width(200);
Thanks in advance
Andrew
.ClientTemplate("\\#:OrderId \\#");
Notice double back slashes.
I am using ASP.NET MVC Telerik editor in my project , the telerik editor doesn't support PDF upload functionality, well it supports image upload, is there a way I can include PDF upload functionality or have anyone tried to do something like that?
My settings:
#(Html.Telerik().Editor().Name(clientId)
/*.Encode(false) weird. Settings "Encode(false)" doesn't work on category & product details page
Now we have to manually decode values*/
.Value(Model)
.Tools(tools => tools
.Custom(settings => settings.HtmlAttributes(new { #class = "t-html", onclick = "viewRichHtmlEditorSource" + random + "(event)", title="Edit HTML" })))
.FileBrowser(browser => browser.Browse("Browse", "ImageBrowser")
.Thumbnail("Thumbnail", "ImageBrowser")
.Upload("Upload", "ImageBrowser")
.DeleteFile("DeleteFile", "ImageBrowser")
.DeleteDirectory("DeleteDirectory", "ImageBrowser")
.CreateDirectory("CreateDirectory", "ImageBrowser")))
How to add your suggested functionality within it?
Yes it does support pdf, i'm using it for pdf and it works just fine.
What you have to look out for is the SIZE of the file, you have to check and make sure it's not over 5MB big
Here is a sample of what I'm using:
<div class="editor-field">
#Html.TextBoxFor(model => model.NewFileName)
#(Html.Telerik().Upload()
.Name("attachment")
.Multiple(false)
.ClientEvents(events => events.OnSelect("onSelect"))
)
</div>
The onSelect script:
function onSelect(e) {
if (e.files[0].size > 5000000) {
alert('The file size is too large for upload');
e.preventDefault();
return false;
}
// Array with information about the uploaded files
var files = e.files;
var ext = $('#attachment').val().split('.').pop().toLowerCase();
if ($.inArray(ext, ['pdf']) == -1) {
alert('This type of file is restricted from being uploaded due to security reasons');
e.preventDefault();
} else {
$("#NewFileName").val(files[0].name);
}
return false;
}
The Controller action must receive the attachement in the signature like so:
public ActionResult EditFile(HttpPostedFileBase attachment) {
...
}