There are two things I would like to accomplish:

1. I want to be able to use a Kendo Numeric Textbox in my Kendo Grid without binding it to a field.
2. I want to be able to retrieve this value.

My grid looks as follows:

@(Html.Kendo().Grid<ProofData>()
        .Name("ProofDataGrid")
        .AutoBind(true)
        .HtmlAttributes(new { style = "height: 500px; font-size: 12px;" })
        .Columns(columns =>
        {
            columns.Bound(c => c.Number).Groupable(false);
            columns.Bound(c => c.ProofAmount).Groupable(false);
            columns.Bound(c => c.ProofAssignmentID).Groupable(false);
            columns.Bound(c => c.PrimaryAmount).Groupable(true);
            columns.Bound(c => c.PrimaryAssignmentID).Groupable(true);
            columns.Template(@<textarea></textarea>).Title("FinalData");
        }
        )
            .ToolBar(toolbar =>
            {
                toolbar.Save();
            })
                .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Pageable(pageable => pageable
            .Enabled(true)
            .PageSizes(new int[4] { 5, 10, 25, 50 })
            .Refresh(true))
            .Navigatable(n => n.Enabled(true))
        .Sortable()
        .Scrollable()
        .Selectable()
        .DataSource(datasource => datasource
                .Ajax()
                .Batch(true)
                .Update("Editing_Update", "Grid")
                .Model(model => model.Id(c => c.ID))
                .ServerOperation(false))
                        .Events(ev => ev.SaveChanges("debugData"))
    )

When I click a button, I format the Grid as follows:

function formatProofGridData(id) {

        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/Proofing/GetInconsistentData/",
                    dataType: "json",
                    data: { id: id }
                }
            },
            // determines if changes will be send to the server individually or as batch
            batch: true,
                model: {
                    id: "ID",
                    fields: {
                        ID: { validation: { required: true} },
                        Number: { editable: false },
                        ProofAmount: { editable: false },
                        PrimaryAmount: { editable: false },
                        ProofAssignmentID: { editable: false },
                        PrimaryAssignmentID: { editable: false },
                    }
                }
            }
            //...
        });
        $("#ProofDataGrid").kendoGrid({
            dataSource: dataSource,
            toolbar: ["save", "cancel"],
            editable: { update: true },
            scrollable: true,
            sortable: true,
            pageable: true,
            columns: [
                    {
                        field: "Number",
                        title: "Number"
                    },
                      {
                          field: "ProofAmount",
                          title: "ProofAmount"
                      },
                      {
                          field: "PrimaryBidAmount",
                          title: "PrimaryBidAmount"
                      },
                      {
                          field: "ProofAssignmentID",
                          title: "ProofAssignmentID"
                      },
                      {
                          field: "PrimaryAssignmentID",
                          title: "PrimaryAssignmentID"
                      },
                      {
                          title: "FinalData",
                          template: '<input id="numeric" type="number" value="" min="0" max="100" step="1" />'
                      }]

        });
              }

Basically, I'm loading two sets of data side by side to compare the values to determine which has the correct values. The extra non field bound column is for me to input a value. When I click "Save", I am going to use this value to place the corrected value in another table.

I am currently loading the data this way so I can format the data before it hits the grid. So far I have been unsuccessful in converting the textbox into a numeric textbox. And secondly, I also have been unable to figure out how to retrieve the data in the textbox.

I have checked the data in $('#ProofDataGrid').data('kendoGrid').dataSource.data(); but have not seen the data I input into the textbox fields.

Any help for either issue would be appreciated.

Cascading works great when a person does the item selection.  The key is that the _focus method of the List widget ( I guess an ancestor of ComboBox and DropDownList ) has this kernel:

that._select(li);
that._triggerCascade();

For the case of a programmatic selection via invocation of

.select(index)
.value(data-value)
.search(data-text)

In DropDownList

.select() will perform a ._select followed by a _triggerCascade
.value() will perform a .select(index) which will eventually do a _triggerCascade
.search() will perform a ._select only and not have a _triggerCascade

In v2012.3.1304 dropdownlist.js at line 272 there should probably needs to be a


Now suppose that you have three remote datasourced drop down lists to be populated and initialized based on text.
The search method could then be used in the databound callback to ensure DDL has its data before making the selection of the desired item.

p.s. Autogenerated cascading DDLs could be an alternate viewer for Hierarchical Data Source

Will there be a Fullscreen-Support so that the address-bar of mobile browsers will disapear?

Consider this fiddle that uses chained deferreds to 
1. obtain an initial text that should be selected (ajax)
2. populates a drop down list (kendoDropDownList)
3. select initial text in the DDL

My problem is in step 3.
Is there a method or technique for selecting an item in the DDL based on its dataTextField ?

I saw earlier posts that indicate .value() should be used, but I only have the data text (from step 1).

The fiddle now works as I expect it to.  The .search() method was used to select an item by data text.

Thanks,
Richard

Hi 
I have problem with using kendo combobox on grid template editor.

Combobox definition:
                       @(Html.Kendo().ComboBoxFor(m => m.DepartmentCode)  
        .DataTextField("Code")
                .DataValueField("Code")
    .Filter(FilterType.Contains)
    .DataSource(action => action.Read(read => read.Action("GetDepartmentsForComboBox", "StockLocation")).ServerFiltering(true))
    .MinLength(1)

When I open editor ( by Create button on grid ) filtering works fine.
I pickup one value. Close editor. 
Then I open editor second time and it is showing me only last selected value on the combobox list.
I found out that there is a request to server but filter is set up to last selected value instead of entered new text 

Is it a bug ? Do I need to clear somehow a last selected value on editor combobox ?

Adding a marker listner for MouseDown allows me to show info windows (Click doesn't work reliably), however I can't get the close icon button to work in the info window... I guess this is to do with the KendoUI but I'm not sure how to get around it?

From what I can tell via the source there isn't a way to do this. append() calls dataSource.add() which also appears to only accept one model at a time. I'm trying to avoid multiple repaints. The only viable solution I see is to use a combination of treeView.setDataSource and treeView.select to re-render the entire tree once. This is opposed to calling .append() n number of times.

Am I missing another solution?

Hello,

why my kendo can not upload image and video.the source like this:

$(function () {
                function openVideoUploader(requestId, callback) {
                    var origHtml = $("#uploadWin").html();
                    var updateResult = false;

                    $("#footage").kendoUpload({
                        multiple:false,
                        async:{
                            saveUrl:"/api/" + kupBucket + "/uploadvideofootage",
                            autoUpload:false
                        },
                        error:function (e) {
                            //popupAlert(e.XMLHttpRequest.response);
                            alert(e.XMLHttpRequest.responseText);
                        },
                        success:function (e) {
//                            $("#uploadForm").find(".k-progress").css("visibility", "hidden");
                            $("#uploadForm").find(".k-filename").css("height", "20px");
                        },
                        upload:function (e) {
                            e.data = { requestId: requestId };
                        },
                    });

                    var kendoWindow = $("#uploadWin").kendoWindow({
                    actions: ["Close"],
                    form: true,
                    modal:true,
                    visible: false,
                   resizable: false,
                        width:350,
                    }).data("kendoWindow").center().open();
                    
                    
                    $("#uploadWin").parent().find(".k-window-action").css("visibility", "hidden");

                    function onClosed() {
                        callback(updateResult);
                        $("#uploadWin").html(origHtml);
                        updateResult = false;
                    }

                    $("#cancelUpWin").click(function (e) {
                        updateResult = false;
                        $("#uploadWin").data("kendoWindow").close();
                    });

                }

                var uploadFootage = function (e) {
                    e.preventDefault();
                    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

                    openVideoUploader(dataItem.id, function (choice) {
                    });

                }

                var grid = $("#reqGrid").kendoGrid({
                    dataSource:{
                        transport:{
                            read:function (options) {
                                getUploadRequests("", "Open", onSuccessGetUploadRequests, null);
                                function onSuccessGetUploadRequests(responseData) {
                                    if (responseData.result == "ok" && responseData["upload-requests"] != null)
                                        options.success(responseData["upload-requests"]);
                                    else {
                                        throwServerError(responseData.reason);
                                        options.success([]);
                                    }
                                }
                            }
                        },
                        pageSize:15
                    },
                    pageable:{
                        input:true,
                        numeric:false,
                        pageSizes:false
                    },
                    sortable:true,
                    filterable:false,
                    selectable:true,
                    resizable:true,
                    columns:[
                        { field:"submittedOn", title:"&{'submited-on'}" },
                        { field:"device", title:"&{'device-name'}", template:'#= device.name #' },
                        { field:"timeFrom", title:"&{'from'}", template:'#= kendo.toString(kendo.parseDate(timeFrom, "ddMMyyyyHHmmss"), "dd/MM/yyyy hh:mm:ss")#' },
                        { field:"timeTo", title:"&{'to'}", template:'#= kendo.toString(kendo.parseDate(timeTo, "ddMMyyyyHHmmss"), "dd/MM/yyyy hh:mm:ss")#' },
                        { field:"channelId", title:"&{'channel'}" },
                        { field:"status", title:"&{'status'}" },
                        { command:[
                            { text:"&{'upload-video'}", click:uploadFootage}
                        ], title:"", width:"200px"  }
                    ]
                }).data("kendoGrid");
            }
    );

I am trying to link a JQuery AJAX command to a MVC controller and having problems getting the files to the controller from the AJAX command.  What am I doing wrong?

HTML
<form id="createTireGroupFromExcelForm" class="form-horizontal">
            ...boilerplate...
                        <input name="files[]" id="files" type="file" data-role="upload" multiple="multiple" autocomplete="off">
           ...boilerplate... 
</form>

Javascript
$("#submitTireGroupExcel_btn").click(function () {
            $.validator.unobtrusive.parse($('#createTireGroupFromExcelForm'));
            if ($('#createTireGroupFromExcelForm').valid()) {
                var form = $('#createTireGroupFromExcelForm');
                $.ajax({
                    type: 'post',
                    enctype:"multipart/form-data",
                    url: "@Url.Action("CreateTireGroupFromExcel", "Events")",
                    data: form.serialize(),
                    success: function (result) {
                        if (!result.success) {
                            alert(result.error);
                        } else {
                            $('#createTireGroup').modal('hide');
                            $.pjax({
                                url: "@Url.Action("TireBuilder", "Events")" + "?tireSetGroupID=" + result.tireSetGroupID,
                                container: '#update_panel'
                            });
                        }
                    }
                });
            }
        });

MVC Controller
public ActionResult CreateTireGroupFromExcel(Guid eventID, Guid teamID, string name, IEnumerable<HttpPostedFileBase> files)
{
     throw new NotImplementedException();
}

The editor for the RoleIds property shows the correct selections when the row enters the "edit" mode.  However, if I change the selected value in this control and press the update button, no call to my update url is made, as if nothing changed.

What am I missing?

Here's the code (see attached image for behavior):

<div id="myGrid"></div>
<script type="text/javascript">
    $(function () {
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: { url: "/Test/TestRead"},
                update: {
                    url: "/Test/TestUpdate",
                    type: "POST"
                }
            },
            schema: {
                model: {
                    id: "Id"
                }
            }
        });

        $('#myGrid').kendoGrid({
            columns:
                [
                    {command:
                        [{
                                name:"edit",
                                buttonType:"ImageAndText",
                                text:"Edit"
                        }]
                    },
                    {   
                        field: "Name"
                    },
                    {
                        title:"Roles",
                        template:"#: RoleCSV #",
                        field: "RoleIds",
                        editor: "<select id='RoleIds' name='RoleIds' data-val='true' data-bind='value: RoleIds' multiple style='width:100%'><option value='1'>Admin</option><option value='2'>Guest</option></select>"
                    }
                ],

            dataSource: dataSource,
            model:{
                
            },
            editable: { mode: "inline", update: true}
        });
    });

</script>

Returned data from the read url looks like this:

[{"Id":1,"Name":"Mathieu","RoleCSV":"Admin","RoleIds":[1]},{"Id":2,"Name":"Martin","RoleCSV":"Admin, Guest","RoleIds":[1,2]},{"Id":3,"Name":"Patrick","RoleCSV":"Guest","RoleIds":[2]}]