Hi, we are using MVVM as much as possible in all of our KendoUI Implementations.  We've run into what seems to be a limitation of the Grid control.  The MVVM support for the column values field does not appear to support view model binding.  I am not able to reference arrays or data sources in the view model while creating the view. Here's a link to my jsFiddle that illustrates the issue.

If you remove "values: dsStatus" from the HTLM code for the status column, the grid instantiates just fine.  With it in there, an error is raised that dsStatus could not be found.  Any help with this that does not require me abandoning the MVVM pattern and instantiating the grid via javascript would be greatly appreciated.

Hi, in the documents it says to use batch if doing a number of operations on the spreadsheet. Can you explain what the {layout: true} is?

http://docs.telerik.com/kendo-ui/api/javascript/spreadsheet/sheet#methods-batch

I'm guessing it represents the change event to fire after the batch operation finishes - if this is the case are there any other options? Ie - layout is for layout changes, what about adding validations or changing colours? I cannot seem to find this list. 

Thanks

Marc

I am having trouble exporting my Kendo Grid to PDF because I have two locked columns. Locked columns are a known limitation for Export to PDF and I understand that.

I am trying to unlock the two "frozen" columns before I export to PDF, but unlocking is not working. I have tried jQuery and CSS approaches.

I would prefer to use CSS. Any tips would be appreciated. Thank you.

Here is what I have tried in my grid object:

Hello,
How can I get the selected month from a kendoCalendar??

the kendoCalendar it is in a window partialview:

<table class="table table-responsive">
    <tr>
        @*<td style="vertical-align: initial; padding-right: 100px;">
                <input id="picker" />
            </td>*@
        <td>
            <img src="~/Content/calendar.png" class="img-responsive" />
        </td>
        <td>
            <div id="calendar"></div>
        </td>
    </tr>
    <tr>
        <td>
            <button align="right" id="btnAddMonth" class="k-primary" onclick="SaveMonth();" style="height:2em;width:auto">Salveaza</button>
        </td>
    </tr>
</table>
i have this code behind:
$(function() {
var listaZile=[];
  var today = new Date();
    //data source
  var selectedDates = [today.getDate() ];
  //Calendar with multiselection
  initCalendar($("#calendar").kendoCalendar(), selectedDates.slice());
});

function initCalendar(calendar, selectedDates, onUpdate) {
  var kendoCalendar = calendar.data('kendoCalendar');

  kendoCalendar.bind('navigate', function() {
    setTimeout(function() {
      updateCalendar(calendar, selectedDates);
    }, 0);
  });

  updateCalendar(calendar, selectedDates);

  calendar.on('click', function(event) {
    var cell = $(event.target).closest('td');
    var isClickedOnDayCell = cell.length !== 0 && isDayCell(cell);

    if (isClickedOnDayCell) {
      var date = dateFromCell(cell).getDate();
      var isDateAlreadySelected = selectedDates.some(function(selected) {
        return selected === date;
      });

      if (isDateAlreadySelected) {
        selectedDates.splice(selectedDates.indexOf(date), 1);

      } else {
        selectedDates.push(date);
listaZile.push(date); //this return days selected!!!
      }

      updateCell(cell, selectedDates);

      if (onUpdate !== undefined) {
        onUpdate();
      }
    }
  });
}


function updateCalendar(calendar, selectedDates) {
  calendar.find('td > a').parent().each(function(i, item) {
    var cell = $(item);

    if (isDayCell(cell)) {
      updateCell(cell, selectedDates);
    }
  });
}

function updateCell(cell, selectedDates) {
  var isCellSelected = selectedDates.some(function(selected) {
    return selected === dateFromCell(cell).getTime();
  });

  if (isCellSelected) {
    cell.addClass('selected');

  } else {
    cell.removeClass('selected');
  }
}

function isDayCell(cell) {
  return /^\d{1,2}$/.test(cell.find('a').text());
}

function dateFromCell(cell) {
  return new Date(convertDataValue(cell.find('a').attr('data-value')));
}

//convert from 'YYYY/MM/DD', where MM = 0..11
function convertDataValue(date) {
  var regex = /\/(\d+)\//;
  var month = +date.match(regex)[1] + 1;

  return date.replace(regex, '/' + month + '/');
}

The save function :

<script type="text/javascript">
   
    function SaveMonth() {
          iMonth = document.getElementById('calendar_cell_selected').textContent;
        //var month=iMonth
        alert(iMonth);
        var year = 2017;
        debugger;

        var url = '@Url.Action("Adauga", "Calendar")';

        $.ajax({
            type: "POST",
            url: url,
            dataType: "json",
            data: { listZile: listZile, iMonth: iMonth, iYear: year },
            success: function (data, status) {
                //$("#AdaugaL").html("")
                $("#AdaugaL").html("");
                var wnd = $("#AdaugaL").data("kendoWindow");
                wnd.close();
                $("#GridProgramLucru").data("kendoGrid").dataSource.read();
                $("#GridProgramLucru").data("kendoGrid").refresh();
            },
            error: function (result) {
                debugger;
            },
        })
    }
</script>
P.S I attached a view of my calendar window. the get value from month selection is undefined.
Thank you.

Hello,

How can I get the selected month from a kendoCalendar??

i have this code behind:

$(function() {

var listaZile=[];
  var today = new Date();
    //data source
  var selectedDates = [today.getDate() ];

  //Calendar with multiselection
  initCalendar($("#calendar").kendoCalendar(), selectedDates.slice());
});

function initCalendar(calendar, selectedDates, onUpdate) {
  var kendoCalendar = calendar.data('kendoCalendar');

  kendoCalendar.bind('navigate', function() {
    setTimeout(function() {
      updateCalendar(calendar, selectedDates);
    }, 0);
  });

  updateCalendar(calendar, selectedDates);

  calendar.on('click', function(event) {
    var cell = $(event.target).closest('td');
    var isClickedOnDayCell = cell.length !== 0 && isDayCell(cell);

    if (isClickedOnDayCell) {
      var date = dateFromCell(cell).getDate();
      var isDateAlreadySelected = selectedDates.some(function(selected) {
        return selected === date;
      });

      if (isDateAlreadySelected) {
        selectedDates.splice(selectedDates.indexOf(date), 1);

      } else {
        selectedDates.push(date);

listaZile.push(date); //this return days selected!!!
      }

      updateCell(cell, selectedDates);

      if (onUpdate !== undefined) {
        onUpdate();
      }
    }
  });
}


function updateCalendar(calendar, selectedDates) {
  calendar.find('td > a').parent().each(function(i, item) {
    var cell = $(item);

    if (isDayCell(cell)) {
      updateCell(cell, selectedDates);
    }
  });
}

function updateCell(cell, selectedDates) {
  var isCellSelected = selectedDates.some(function(selected) {
    return selected === dateFromCell(cell).getTime();
  });

  if (isCellSelected) {
    cell.addClass('selected');

  } else {
    cell.removeClass('selected');
  }
}

function isDayCell(cell) {
  return /^\d{1,2}$/.test(cell.find('a').text());
}

function dateFromCell(cell) {
  return new Date(convertDataValue(cell.find('a').attr('data-value')));
}

//convert from 'YYYY/MM/DD', where MM = 0..11
function convertDataValue(date) {
  var regex = /\/(\d+)\//;
  var month = +date.match(regex)[1] + 1;

  return date.replace(regex, '/' + month + '/');
}

P.S I attached a view of my calendar window. the get value from month selection is undefined.

Thank you.

I want to include an active x object on a grid edit popup and it has an associated change event specified in jscript so I need to include the script for that. 

However, this results in an error  stating the ChemistryQuery object can't be found.

I have done something similar to this on a dialog using Kendo UI for JSP and that works fine.

So there must be a difference in the rendering timing of the two approaches.  I've tried using the kendo.template but I couldn't get the syntax right because of the <script? tags.  I've also tried changing the content in a edit handler for the grid but this loses the bindings on the other input fields.

I realise you can't work with this because you don't have my active-x control but could you please suggest a way to insert this jscript at the appropriate time?

Hello,

when using the mobile version of the mentioned views there seems to be some calculation error when trying to select time slots. The calendar is configured with create disabled but selection enabled, so that the user can touch a time slot to select it. When the area to the left of the time slots (groupings, allday-label, etc) has certain widths, some days of the week becomes unselectable. Instead, the day before gets selected.

I have dug into the problem and seen that in these cases, the right edge of the time slot before is one pixel greater than the left edge of the time slot touched. Furthermore, the touch event gets rounded to the leftmost value of the touched time slot. This makes the select criteria to evaluate as true for both slots, and the "first" of them will be selected.

The problem is experienced on an iPad in portrait orientation, but it is possible that other resolutions is affected as well. 

Here is a more descriptive example of what happens, the slots is represented with || and the numbers are the coordinates of the egdes:

|| 100                                 210||209                             300||300                                       410||

When selecting the second time slot, the touch is rounded to 209, which will is considered inside the span of 100 <= 209 < 210, and the first slot is selected.

Some floating point error at play here perhaps?

Sorry for the long post, hope that it was helpful though.

Best regards.

Thought I'd post this for anyone who has a similar issue. And also for kendo staff to see and fix (if it is indeed a bug).

Note: all references to input are in regard to type=checkbox and type=radio, not text input areas

I was adding input boxes to a mobile listview and found that if any tag is added outside of the label tag holding the input, the input doesn't work. It also appears that an input without a label container doesn't seem to function properly either. Whereas a input defined inside a label inside a mobile listview will have extra classes and an ::after appended to it, none of these show up in the case noted in the first sentence of this paragraph. I finally got it to work with a workaround after observing "correctly working" inputs and what kendo injects into the html for those items.

IT policy at my work prevents me from creating a code snippet, so I pasted the code below, which is a modified version of http://demos.telerik.com/kendo-ui/m/index#popover/index:

Note the modified lines in the listviews where I remove labels in a few of them and in others I add random html tags before and after the </label>. It didn't matter if they were empty or had content in them.

I also tried modifying the 'checked="checked"' values via jQuery and also through data-binding with a ternary operator like one of your admins showed in this forum thread: http://www.telerik.com/forums/dynamically-creating-checkbox-listview-doesn-t-allow-selecting. While the value shows to be checked, and a $(elem).prop('checked') will return true/false correctly, the box doesn't show the checkbox when 'checked="checked"' is present in the input element (see the 'clickit' function and 2nd item of listview with checkboxes in the code snippet).

The thing that finally worked was to use jQuery to set the $(elem).prop('checked', true/false) ANDmanually add the classes I note were added automatically to inputs that 'work properly' : km-widget km-icon km-check. Note the very first listview item with checkboxes in the code snippet.

Now the question for staff: Why doesn't kendo automatically add these classes to listview inputs except in cases where it's <label>TEXT<input type="radio/checkbox" /></label> ? Is this a bug? Or if it's intended, why? In more complicated templates, such as the one in my code, it requires workarounds with setting the listview's data-click AND adding those three above classes to all my inputs if they're not exactly in a format that "works" (it also seems all kendo examples of inputs in listviews follow that exact formatting, which leads me to assume this issue is known...just uncommonly crossed upon by users). It's not a big deal once I figured it out, but the time spent wondering what was wrong and stepping through my code and all the possibilities was time consuming.

Or am I just doing things in the most horribly wrong way?

P.S. Out of curiosity, why was there a need to override/prevent the default behavior of the checkbox and radio inputs? Just for aesthetic purposes?

H,

Current the Window widget has Maximize and Minimize events, but not a Restore event.

Can you please consider adding a Restore event?

I have added the functionality in the Window widget source code, but I this is not a good long-term solution.

Thanks

I have a templated list:

<script type="text/x-kendo-tmpl" id="xts-contents-detail-template">
   <div id='contents-list-sortable' data-role="listview sortable" data-template="xts-content-item-template" data-selectable="single"
        data-bind="source: contentDataSource">
   </div>
</script>

<script type="text/x-kendo-tmpl" id="xts-content-item-template">
   <div>
      <hr>
      <h5> <span data-bind='text: name'> </span> </h5>
      <span data-bind='text: description'> </span>
   </div>
</script>

Which later gets populated in Javascript:

            this.pObservableContent = kendo.observable({
                contentDataSource: new kendo.data.DataSource({
                    data: [],
                }),
            });

            let listView = new kendo.View('#xts-contents-detail-template', {
                model: this.pObservableContent,
            });

            // put the list somewhere
            let listHtml = listView.render();
            this.pView.element.find('.contents-list').html(listHtml);

            // make the list sortable
            // this.pView.element.find('#contents-list-sortable').kendoSortable({
            $('#contents-list-sortable').kendoSortable({
            });

Also, some content gets added later on:

           this.pObservableContent.contentDataSource.data(this.pReportDefinition.contents);

The user may then re-order the list.

this.pObservableContent.contentDataSource.data() does not reflect the user selected order. How do I know what the new order is?