Telerik Forums
UI for ASP.NET MVC Forum
3 answers
1.3K+ views
Hi,

I have the kendoui.aspnetmvc.2013.2.918 version, so I want to know if it is possible to populate the Upload control with a previously uploaded file and be able to remove the file if I want.
If it is not supported now, are you planning to add this functionality in a new release ?

Thanks in advance.
Dimiter Madjarov
Telerik team
 answered on 18 Oct 2013
0 answers
79 views
This demo shows the DropDownLists vertically:
http://demos.kendoui.com/web/dropdownlist/cascadingdropdownlist.html
Can i change this to horizontal?
Daniel
Top achievements
Rank 1
 asked on 18 Oct 2013
2 answers
395 views
I have a pure JS grid I was using with an asp.net forms backend (.ashx). It has been working fine for six months. I am trying to convert it to an MVC controller for the backend now, but having no luck:

function MaterialsGrid(ticket_ID, grid_id, is_editable, default_billable) {
    var self = this;
    self.ticket_ID = ticket_ID;
    self.GRID_ID = '#' + grid_id;
    self.HANDLER_URL = "/MaterialEntry";
    self.IS_EDITABLE = is_editable;
    self.DEFAULT_BILLABLE = default_billable;
 
    self.material_source = new kendo.data.DataSource({
        batch: true,
        schema: {
            model: {
                id: "MaterialEntryID",
                fields: {
                    MaterialEntryID: { type: "string" },
                    TicketID: { type: "string" },
 
                    ItemID: { type: "number", defaultValue: 0 },
                    ItemName: { type: "string", defaultValue: GridCommon.emptyText },
 
                    Description: { type: "string" },
 
                    Quantity: { type: "number", defaultValue: 0, validation: { required: true, min: 0 } },
 
                    Rate: { type: "number", defaultValue: 0 },
                    Total: { type: "number", defaultValue: 0 },
                     
                    Billable: { type: "boolean", defaultValue: self.DEFAULT_BILLABLE },
                },
            }
        },
 
        transport: {
            read: {
                url: self.HANDLER_URL + "/Read",
                dataType: "json",
                type: "GET",
                cache: false,
            },
            update: {
                url: self.HANDLER_URL + "/Update",
                dataType: "json",
                type: "PUT",
            },
            destroy: {
                url: self.HANDLER_URL + "/Destroy",
                dataType: "json",
                type: "POST",
            },
            create: {
                url: self.HANDLER_URL + "/Create",
                dataType: "json",
                type: "POST",
            },
 
            parameterMap: function (options, operation) {
                if (operation === "read") {
                    return { ticketID: self.ticket_ID };
                }
 
                if (operation === "read") {
                    return { ticketID: self.ticket_ID };
                } else if (options.models) {
                    return { materials: kendo.stringify(options.models), ticketID: self.ticket_ID };
                }
            }
        },
 
        error: GridCommon.showCallBackError
    });
 
    self.items_src = new kendo.data.DataSource({
        transport: {
            read: {
                url: self.HANDLER_URL + "/GetItems",
                dataType: "json",
                type: "GET"
            }
        },
        error: GridCommon.showCallBackError
    });
 
    self.itemDropDownEditor = function (container, options) {
 
        $('<input required data-text-field="ExtendedItemName" data-value-field="ItemName" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                optionLabel: { ExtendedItemName: GridCommon.emptyText, ItemID: 0 },
                dataSource: self.items_src,
                change: function (e) {
                    options.model.set('ItemID', e.sender.dataItem().ItemID);
                }
            });
    }
 
    self.updateTotal = function (e) {
        var r = e.values.Rate ? e.values.Rate : e.model.Rate;
        var q = e.values.Quantity ? e.values.Quantity : e.model.Quantity;
        e.model.set('Total', q * r);
    }
 
    self.init = function () {
 
        var tools = null;
        var row_commands = null;
        if (self.IS_EDITABLE) {
            tools = [
                { name: "save", text: "Save" },
                { name: "cancel", text: "Cancel" },
                { name: "create", text: "Add" },
                { template: GridCommon.toggleBillableTemplate(self.GRID_ID) }
            ];
            row_commands = [{
                name: "destroy",
                template: '<a href="##" class="k-grid-delete"><img img src="/Content/images/icons/delete.png" /></a>'
            }]
        } else {
            $(self.GRID_ID).addClass('readonly');
        }
        $(self.GRID_ID).kendoGrid({
            toolbar: tools,
 
            save: self.updateTotal,
 
            columns: [
                { field: "ItemName", title: "Item Type", editor: self.itemDropDownEditor },
                { field: "Description" },
                { field: "Quantity", title: "QTY", width: 65, editor: GridCommon.numberEditor },
                { field: "Rate", title: "Price", format: "{0:c}", width: 90, editor: GridCommon.numberEditor },
                { field: "Total", editor: GridCommon.notEditable, format: "{0:c}", width: 95 },
                { field: "Billable", template: '#= GridCommon.getBillableText(Billable) #', width: 100},
                { command: row_commands, width: 40 }
            ],
 
            pageable: false,
            scrollable: true,
            editable: self.IS_EDITABLE,
            navigatable: true,
            sortable: true,
            batch: true,
 
            dataSource: self.material_source,
            saveChanges: GridCommon.saveAll
        });
    }
}

@model Guid
 
<div class="grid-wrapper">
    <div id="materials-data" class="grid-global-save">
        <!-- grid will appear here -->
    </div>
</div>
<script type="text/javascript">
    var mat_grid = new MaterialsGrid('@Model', 'materials-data', true, true);
    $(document).ready(mat_grid.init);
</script>
My material entry controller for the Create function looks like this:
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult Create([DataSourceRequest] DataSourceRequest request, IEnumerable<TempVM> materials, string ticketId)
{
    ModelState.Remove("MaterialEntryId");
    ModelState.Remove("Id");
 
    return Json("");
}
public class TempVM
{
    public string MaterialEntryID { get; set; }
    public string TicketID { get; set; }
    public int ItemID { get; set; }
    public string Description { get; set; }
 
}

I know the logic inside create isn't right. But the problem is that the 'materials' parameter is empty when the Create method is called. You can see that the form data seems to be being sent correctly in chrome's Netowork tab, by looking at the attached file.

Any ideas what I am doing wrong?
Petur Subev
Telerik team
 answered on 17 Oct 2013
3 answers
427 views
Hello,
I'm trying to use an MVC-grid with a custom edit template. I think I got most of it working, but I have a strange problem. The validationmessages ends up in a weird position. The middle message ends up under the dropdown, even though the first one end up on top of another dropdown. Is there a possibility to control the z-level? I don't even set the ValidationMessageFor for the dropdowns, but I guess they are automatic since I have an OptionLabel on them. 

@Html.HiddenFor(model => model.Id)
 
<div class="editor-label">
    @Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Name)
    @Html.ValidationMessageFor(model => model.Name)
</div>
 
<div class="editor-label">
    @Html.LabelFor(model => model.OwnerId)
</div>
<div class="editor-field">
     
  @(Html.Kendo().DropDownList()
          .Name("OwnerId")
          .HtmlAttributes(new { style = "width: 250px" })
           .DataTextField("NamePlusDepartment")
          .DataValueField("Id")
          .OptionLabel("Välj en person")
          .DataValueField("Id")         
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetPersonal", "List");
              });
          })                  
    )
 
     
</div>
<div class="editor-label">
    @Html.LabelFor(model => model.ResponsibleId)
</div>
<div class="editor-field">
     
  @(Html.Kendo().DropDownList()
          .Name("ResponsibleId")
          .HtmlAttributes(new { style = "width: 250px" })
           .DataTextField("NamePlusDepartment")
          .DataValueField("Id")
          .OptionLabel("Välj en person")
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetPersonal", "List");
              });
          })                   
    )
 
     
</div>
Kiril Nikolov
Telerik team
 answered on 17 Oct 2013
2 answers
1.4K+ views
Hello -

I had to change my Model to include two lists so i can bind it to two sets.

Now my model looks like:
public class PaymentsViewModel
{
    public List<CorporateViewModel> Corporations { get; set; }
    public List<PaymentViewModel> Payments { get; set; }
}
My controller looks like
public ActionResult Payments_Read([DataSourceRequest]DataSourceRequest request)
{
    //get corps
    //get payments
 
    PaymentsViewModel returnObj = new PaymentsViewModel();
    returnObj.Corporations = corps;
    returnObj.Payments = payments;
 
    DataSourceResult result = returnObj.ToDataSourceResult(request); <== returns error
 
    return Json(result);
}

Errors:
  • cannot convert from 'PaymentsViewModel' to 'System.Data.DataTable' 
  • 'PaymentsViewModel' does not contain a definition for 'ToDataSourceResult' and the best extension method overload 'Kendo.Mvc.Extensions.QueryableExtensions.ToDataSourceResult(System.Data.DataTable, Kendo.Mvc.UI.DataSourceRequest)' has some invalid arguments 
Any  ideas how to go about it? Should I change my ViewModel? Or have different approach?

Thanks.
Christos
Top achievements
Rank 1
 answered on 16 Oct 2013
1 answer
120 views
Hello, I'm new with MVC & Kendo and follow some demo videos (http://www.youtube.com/watch?v=1CPediqnIt8) and tried "do-it yourself".

The Controller:

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace KendoUIMvcApplication3.Controllers
{
    public class FoldersController : Controller
    {
        private FotosACSEntities db = new FotosACSEntities();

        //
        // GET: /Folders/

        public ActionResult Index()
        {
            var folders = db.Folders.Select(f => new
            {
                ID = f.ID,
                Nome = f.Nome
            });

            return Json(folders, "text/html", System.Text.Encoding.UTF8, JsonRequestBehavior.AllowGet); 
...

The View:

@model IEnumerable<KendoUIMvcApplication3.Folders>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<br />

@Html.Kendo().DropDownList().Name("cbFolders").DataSource(dataSource => dataSource.Read(read => read
            .Action("Index", "Folders"))).DataTextField("Nome").DataValueField("ID");

...

And the Result: (IE and Chrome)

[{"ID":1,"Nome":"\\CD 06_Fotos Pessoais"},{"ID":2,"Nome":"\\Fotos Pessoais\\Album 002\\JPG"},{"ID":3,"Nome":"\\Fotos Pessoais\\Album 003\\JPG"},{"ID":4,"Nome":"\\Fotos Pessoais\\Album 004\\JPG"},{"ID":5,"Nome":"\\Fotos Pessoais\\Album 007\\JPG"},{"ID":6,"Nome":"\\Fotos Pessoais\\Album 008\\JPG"},{"ID":7,"Nome":"\\Fotos Pessoais\\Album 009\\JPG"},{"ID":8,"Nome":"\\Fotos Pessoais\\Album 010\\JPG"},{"ID":9,"Nome":"\\Fotos Pessoais\\Album 011\\JPG"},{"ID":10,"Nome":"\\Fotos Pessoais\\Album 013\\JPG"},{"ID":11,"Nome":"\\Fotos Pessoais\\Album 014\\JPG"},{"ID":12,"Nome":"\\Fotos Pessoais\\Album 017\\JPG"},{"ID":13,"Nome":"\\Fotos PM\\Album 001"},{"ID":14,"Nome":"\\Fotos PM\\Album 002"},...

What's happening?

Regards,

Rui
Daniel
Telerik team
 answered on 16 Oct 2013
1 answer
75 views
This code is needed for binding to a normal Linq
return Json(model.ToDataSourceResult(request));
But because I need to bind to a XRM 2011 so have few limits I want to customize the query
How can I do it?
Rosen
Telerik team
 answered on 16 Oct 2013
1 answer
76 views
Hi,

I am new to kendo, I am using kendo menu component, the data for menu comes on a ajax call. I want to open menu at runtime on some user interaction other than clicking menu, I found open method in API, but what value should I pass as argument. If I need to pass Id of an element how can I get Id of elements that were created at run time with ajax call.

It's very urgent for me, please can any give solution?

Thanks,
Gopi.
 
Ignacio
Top achievements
Rank 1
 answered on 15 Oct 2013
3 answers
3.4K+ views
I recently added Grid Column Menus to my grid, primarily to give the user the ability to hide/show columns.
.ColumnMenu(menu => menu.Columns(true).Sortable(false))

I want some columns hidden by default, and the user to have the ability to display them if needed. So, using the MVC helpers, I set Visible(false) like so:
column.Bound(c => c.Submitter).Title("Submitter").Visible(false);
However, to my surprise, columns hidden in this manner do not show up in the column menu. It's like they don't exist.

I was able to get it working correctly by loading all columns as normal and then hiding certain ones via JavaScript:

$(document).ready(function () {
    var grid = $('#issueGrid').data('kendoGrid');
    grid.hideColumn('Submitter');

But I have 2 issues with this:
A) There is some graphical stutter as the columns are noticably loaded and then hidden.
B) I shouldn't have to do this. Setting a column as .Visible(false) should still have that column appear in the Menus.

Is this a bug? Why does setting a column as .Visible(false) cause it to act like it does not exist, in regards to the Column Menu? I wish I didn't have to write 10+ extra lines of script to do this.

Thanks.
Dave
Top achievements
Rank 1
 answered on 15 Oct 2013
2 answers
862 views
I would like to get the text for a selected menu item from JavaScript/jQuery in a clean way. I would rather not use jQuery matching for specific classes if possible, I'm hoping for something like:

$("#myMenu").getSelectedItemText()

Alternatively, I guess I could populate a variable during a Select event handler or something. 

Any suggestions?  Thanks!
Ian
Top achievements
Rank 1
 answered on 14 Oct 2013
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?