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.

Hi,

I have a scheduler which by default loads with month view showing (as per requirements) with the current date showing by default.  However, if a date is passed in via the querystring, I want it to load as day view instead and navigate to that date.  I have figured out how to change the selected date, but I can't get it so change the initial view based on this variable - how can I achieve this?  I've added my code below.

Thanks, Mark

=== DEFINITION OF SCHEDULER ===

@{
    //Get the initial scheduler date from the URL
    DateTime schedulerInitDate = DateTime.Today; 
    if (Request.QueryString["date"] != null && Request.QueryString["date"].Length == 8)
    {
        string strQueryStringDate = Request.QueryString["date"];
        string dayPart = strQueryStringDate.Substring(0, 2);
        string monthPart = strQueryStringDate.Substring(2, 2);
        string yearPart = strQueryStringDate.Substring(4, 4);
        schedulerInitDate = new DateTime(int.Parse(yearPart), int.Parse(monthPart), int.Parse(dayPart), 0, 0, 0);
    }
 }​

@( Html.Kendo().Scheduler<DiaryItemViewModel>()
    .Name("diary")
    .Editable(false)
    .Date(schedulerInitDate)   // sets the initial date for when it loads as today - in month view this takes you to current month, week view to current week etc.
    .StartTime(new DateTime(2015, 6, 1, 7, 00, 00))  // sets the start time in day view - 1/6/2015 is arbitrary here, could be any date!
    .EndTime(new DateTime(2015, 6, 1, 19, 00, 00))   // sets the end time in day view - 1/6/2015 is arbitrary here, could be any date!
    .EventTemplate("<div title='#= title #'>" +
                        "<div class='k-event-template' style='width:100%; margin-bottom:6px;'><span style='font-weight: bold;'>#= title #</span></div>" +
                        "#if(Confirmed) {#<div class='k-event-template' style='width:100%; margin-bottom:6px;'><img src='/Content/images/icons/calendar.png' /> Appointment Confirmed</div>#" +
                        "} else {#<div class='k-event-template' style='width:100%; margin-bottom:6px;'><img src='/Content/images/icons/calendar-grey.png' /> Appointment Unconfirmed</div>#}#" +
                        "<div class='k-event-template' style='width:100%; margin-bottom:6px;'>#= Reference #</div>" +
                        "<div class='k-event-template' style='width:100%; margin-bottom:6px;'><span style='font-weight: bold;'>Visit By:</span> #= VisitBy #</div>" +                 
                    "</div>")
    .Views(views =>
    {
        views.MonthView();
        views.WeekView();
        views.DayView();
    })
    .Timezone("Etc/UTC")
    .DataSource(d => d
        .ServerOperation(true)
        .Read(read => read.Action("GetAppointments", "Diary").Data("getAdditionalData"))
    )
    .Resources(resource =>
    {
        resource.Add(m => m.Title)
        .Title("Type")
        .DataTextField("Title")
        .BindTo(new[] { 
                        new { text = "General", value = "General", color = "#ffffff" } ,
                        new { text = "Legionella", value = "Legionella", color = "#000000" } ,
                        new { text = "Survey", value = "Survey", color = "#cccccc" } 
                    });
    })
    .Events(e => e
        .DataBound("onSchedulerOpen")
    )
)

==== JAVASCRIPT I AM TRYING TO USE TO SWITCH VIEW ON PAGE LOAD - BUT JUST RENDERS EMPTY PAGE ====

    // setup the page
    $(document).ready(function () {

        // set to day view in the diary if a certain date has been passed in via querystring
        if (....) {
            var scheduler = $("#diary").data("kendoScheduler");
            scheduler.view("day");
        }
    })​

Hi , is it better to configure the kendo component using k-options in the angular controller or within the html.

is there any advantage./disadvantage to either?

thank you.