I am trying to bind a form to a dropdown list using Kendo's MVVM.  For example I have a dropdownlist that is hydrated with objects from the server. In the form, I have multiple input fields that should be bound to the current selected item of the dropdown.

 I.E. If I have selected Breakfast in the dropdown list, then my form should reflect the changes. If I select Lunch from the dropdown list then the form should select those values. 

My Code is Below:

 <form id="frmDailyEntry">

     <div>
            <label for="ServingPeriods">Serving Periods :</label>
            <select id="servingPeriods" data-text-field="ServingPeriod"
                    data-value-field="AdmServingPeriodId"
                    data-value-primitive="true"
                    data-autobind="true"
                    data-role="dropdownlist"
                    data-bind="source: DailyEntries, value: SelectedItem"></select>
        </div>

<!-- FULL PAY -->
                <div>
                    <label for="fullPay">Full Pay :</label>
                    <input type="text" name="fullPay" id="fullPay" data-bind="value: SelectedItem.FullPayDebit" />
                    <input type="text" name="fullPayTotal" id="fullPayTotal" disabled>
                </div>

                <!-- PREPAID -->
                <div>
                    <label for="prepaidfullPay">Prepaid Full Pay :</label>
                    <input type="text" name="prepaidfullPay" id="prepaidfullPay" data-bind="value: PrepaidFullPay" />
                </div>​

</form>

Hello,

 is it possible to trigger the spinners for up and down manually somehow instead of setting the value and stuff like that?

I am trying to include the Excel and PDf toolbar buttons in my custom template (see below) as suggested by this thread http://www.telerik.com/forums/custom-toolbar-with-excel. However when i add the markup the whole grid does not load (take out the markup and the grid loads with the search box). This is in javascript not mvc wrapper. Any recommendations will be appreciated

template

<script type="text/x-kendo-template" id="searchtemplate">    
      <div class="toolbar">  

         <div>

           <a class="k-button k-button-icontext k-grid-excel" href="#"><span class="k-icon k-i-excel"></span>Export to Excel</a>

           <a class="k-button k-button-icontext k-grid-pdf" href="#"><span class="k-icon k-i-pdf"></span>Export to PDF</a>

        </div>
        <div class="padding-all" style="float:right;padding-right:10px;">
            <label id="search">Search:&nbsp;&nbsp;</label>
            <input type="search" id="searchTerm" style="width: 230px;" />
        </div>
    </div>

</script>

Grid

 $("#grid").kendoGrid({
        toolbar: kendo.template($("#searchtemplate").html()),
        excel: {
            fileName: "​bzbdfb",
            filterable: true,
            allPages: true
        },
        pdf: {
            allPages: true,
            fileName: " fvbfdb"
        },
        dataSource: {
            type: "json",
            transport: {
                //get grid data transport
                read: {
                    url: "mvc ​controller",
                    datatype: "json",
                    type: "post",
                    data: data
                }
            },
            //data schema
            schema: {
                data: function (response) {
                    return response;
                }
            }, requestStart: function () {
                if (initialLoad)
                    kendo.ui.progress($("#grid"), true);
            },
            requestEnd: function () {
                if (initialLoad)
                    kendo.ui.progress($("#grid"), false);
                initialLoad = false;

            },
            pageSize: 10
        },
        sortable: true,
        selectable: "multiple cell",
        allowCopy: true,
        pageable: {
            pageSizes: [10, 25, 50, 100],
            buttonCount: 10
        },
        noRecords: true,
        columns: GenerateColumns(getAttendedUsers),
        pdfExport: function (e) {
            $("tr:nth-last-child(1)").hide();
            e.promise
            .progress(function (e) {
                console.log(kendo.format("{0:P} complete", e.progress));
            })
            .done(function () {
                $("tr:nth-last-child(1)").show();
            });
        }
    });

When the user filters the data​Source, I would like to modify that filter before it gets sent to the server. Where and how can I do this? I am guessing the data event handler function is an appropriate place, but I tried that and it didn't work for me - I modified the filter and set it using filter(), but then it just resubmits the query and the data event handler is triggered again.

How can I do this?

Thanks,

--Ed

Hi, I am plugging in KendoUI with AngularJS to a application we have. I have been able to get the GRID to work as in display data and be configured with various options like sort / group / select. 

However, the k-columns option does not appear to work at all.  The entire dataSource is being displayed in the GRID instead of just the columsn I want to see. 

This is what my element looks like on the page.  

        <kendo-grid options=kendo-grid
                    k-data-source="gridData"
                    k-columns="gridColumns"
                    k-selectable="true"
                    k-groupable="false"
                    k-sortable="true"
                    k-height="600"
                    k-on-change="selected = data">
        </kendo-grid>​

In the js file it looks like this.

    $scope.gridData = [
                    { artist: "Pink Floyd", track: "The dark side of the Moon", album: "1978" },
                    { artist: "The Beatles", track: "I've just seen a face", album: "moonwalk" },
                    { artist: "Queen", track: "Innuendo", album: "dasher" }
   ];

   $scope.gridColumns = [
                  { field: "artist", title: "Artist" }
   ];


 But the output is always always all of the data instead of just one column. See attachement. 

The console is reporting the following error. 

 >columns attribute resolved to undefined. Maybe you meant to use a string literal like: 'gridColumns'?

I have played around with this in the following demo, and it works fine here.

http://dojo.telerik.com/UqoBu

Our app is in VS2013. 

 ​

Im a bit stumped on where to go from here. 

thanks

Mark

When exporting a Datagrid to Excel, Kendo requires JSZip. However kendo assumes JSZip is a global which is not true when loaded in an AMD environment as JSZip does not export a global. Therefore I propose to at least use a call to require in case JSZip has already been loaded (kendo.ooxml.js, line 593):  

I am trying TreeList with AngularJS by following the "editing" demo. The built-in command buttons are good, but I need to modify them a little on my program.

For example, I need to add a "confirm" dialog when user clicks the "destroy" button. How do I do it?

As a test, I hard code data into controller, such as

$scope.treelistOptions = {
dataSource: {
data: [
{ id: 1, Name: "Daryl Sweeney", Position: "CEO", Phone: "(555) 924-9726", parentId: null },

...]}};

How do I insert a node into ​the above local data when I click the "createChild" button?

Dear Teleruik-Team,

Our Kendo Schedular is working very fine for booking cars and meeting rooms, but we have one big problem.It is possible to book the same car or room on the same moment and that cannot be possible. No overlaps may ​occur !
How can we check if a certain resource is already booked at a given day/time ? The biggest problem are the repeating events ! Because the contain a start date and a formula.

So what we need :

1) someone adds a reservation by clicking on a day

2) Schedular checks if resource is already reserved (also reperating events/reservations)

3) if ok, reservation is booked , else an errormessage is being displayed

How can wo do this ?

Regards,

Gert

I have an MVVM application using Kendo Grid, and I want to display hierarchy (nested grid). I am trying to replicate this example but I am not able to display the hierarchy data. How can I get the hierarchy records to display?

cshtml code:

typescript code:

I don't see an error messages. How can I display the hierarchy records? See image file attached.