In my application, I have a Kendo grid, which is used to obtain the user's data (certification details). The user are provided with a Kendo grid, which have a "Add" button. Clicking on "Add" button, the user will be prompted with pop up to obtain their details.
On clicking "Submit" button, required validation are not firing with grid having no records. User are able to submit the application without entering the required data with grid. How can I force the kendo validation on button click on grid. 

I want to force user to add data to grid before submit. Please help.

I've tried adding the dataBound event to a kendo diagram using k-options and also tried adding the event via the k-on-data-bound attribute but neither of these seem to work. Here is an example of where I would expect the dataBound event to fire but the console message is never printed.

http://dojo.telerik.com/IkoTO/2

This is just a modified example from the original API Docs demo.  All I did was add a spacer div so the page has scroll.

To reproduce: Simply click inside a multiselect, then scroll down to bottom of dropdown results.  

You'll see the dropdown closes and then the page starts scrolling.

This would be VERY annoying for any end-user.

Telerik needs to fix this by stopPropagation of the scroll event maybe?

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.