Its not repatitive question, I have already searched here,Please help me.

This is My code:   
                  $("#expand").on("click", function(){
                    var treeview = $("#treeview").data("kendoTreeView");
                              treeview.expand(".k-item");
                    })

 

i have created Dynamic Kendo Grid and trying to Edit and update the values but its showing some issues. can you someone please help me on this
Functionality: based topic_Qtype needs to load controls dynamically
a) DropdownList – show the dropdown list
b) Not Applicable – show the label (NA- text)
c) Numerator_Denominator – two text boxes
Issues:
#1: under Q3, when I click on Edit, its showing error message in console.log Uncaught SyntaxError: Unexpected number
#2: under Q3 and Q6, in Editable mode, trying to click on Cancel button – its suppose to be go normal mode but its not functionaning (Cancel button not working in this case and no error messages in console)
#3 under Q3, after Editing the values then trying to click on Update button but its not triggering Update method in Kendo grid
#4 under Q5, after editing, trying to Update but its not triggering Update method in Kendo grid and also not even showing any error messages in console log

please help on this

attached here

-Grid screenshots

-Grid code

-database script 

Grid Code
<div id="dynamickendoGrid"></div><script type="text/javascript">function GetColumnWidth(colName) { var colWidth = "100px"; switch (colName) { case "element_id": case "program_id": case "ID": colWidth = "10px"; break; case "question": colWidth = "80px"; break; case "topic1": case "topic2": colWidth = "60px"; break; default: colWidth = "30px"; } return colWidth } function GetColumnTitle(colName) { var colTitle = colName; switch (colTitle) { case "qId": colTitle = "Q_ID"; break; case "question": colTitle = "Question"; break; case "topic1": colTitle = "Topic-1"; break; case "topic2": colTitle = "Topic-2"; break; default: colTitle = colName; } return colTitle; } function categoryDropDownEditor(container, options) { var ddlValues = ''; var ddlValuesFinal = ''; var firstarray = []; firstarray = options.model[options.field + '_Mapping'].split('|'); jQuery.each(firstarray, function (i, val) { //console.log(i)//console.log(val)var valArray = []; valArray = val.split(','); ddlValues += "{" + "\"text\"" + ":\"" + valArray[0].trim() + "\", \"value\"" + ": \"" + valArray[1].trim() + "\"}, " }); //console.log(ddlValues) ddlValuesFinal = "[" + ddlValues.trim().slice(0, -1) + "]"var optionsfield = options.field; $('<input data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '"/>') .appendTo(container) .kendoDropDownList({ autoBind: false, dataTextField: "text", dataValueField: "value", dataType: "json", dataSource: { data: JSON.parse(ddlValuesFinal) }, select: function (e) { } }); } function NotEditableFields(container, options) { $('<span>' + options.model[options.field] + '</span>').appendTo(container); } function categoryNotApplicableEditor(container, options) { debugger; $('<span >' + options.model[options.field] + '</span>').appendTo(container); // $('<span name="' + options.field + '">N/A</span>').appendTo(container);// $('<input type="text" value="' + options.model[options.field] + '"></input>').appendTo(container);// $('<input type="text" name="' + options.field + '" data-bind="value:'+options.field.trim()+'" class="k-textbox"></input>').appendTo(container); } function categoryDerivedEditor(container, options) { debugger; var firstsplit = []; firstsplit = options.model[options.field + '_Mapping'].split('|') var secondfirstsplit = []; secondfirstsplit = firstsplit[0].split(',') var secondsecondsplit = []; secondsecondsplit = firstsplit[1].split(',') $('<div name="' + options.field + '">' + '<span>' + secondfirstsplit[0] + '</span > ' + '<input type="text" name="' + secondsecondsplit[0].replace(/ /g, '') + Math.floor((Math.random() * 10) + 1) + Math.floor((Math.random() * 10) + 1) + '" class="k-textbox" value="' + secondsecondsplit[0].trim() + '"></input>' + // '<input name="' + secondsecondsplit[0].replace(/ /g, '') + '" class="derivedTextBoxWidth"' + ' value="' + secondsecondsplit[0] + '" > <br /> ' +'<span>' + secondfirstsplit[1] + '</span > ' + '<input type="text" name="' + secondsecondsplit[1].replace(/ /g, '') + Math.floor((Math.random() * 10) + 1) + Math.floor((Math.random() * 10) + 1) + '" class="k-textbox" value="' + secondsecondsplit[0].trim() + '"></input>' + // '<input name="' + secondsecondsplit[1].replace(/ /g, '') + '" class="derivedTextBoxWidth"' + ' value="' + secondsecondsplit[1] + '"></input>' + +'</div > ').appendTo(container); } function chooseEditor(container, options) { //var editvalue = options.field == "ID" ? options.field : options.model['topic1_QType'];//.trim();var editvalue = options.field == "ID" ? options.field : options.model[options.field + '_QType']; console.log('editvalue: ' + editvalue); if (editvalue != '') { if (editvalue == "DropdownList") { categoryDropDownEditor(container, options); } else if (editvalue == "Numerator_Denominator") { categoryDerivedEditor(container, options); } else if (editvalue == "Not Applicable") { categoryNotApplicableEditor(container, options); } else if (editvalue == "text") { // categoryDropDownEditor(container, options); } } } function OnEdit(e) { } function doIt() { alert('if entered'); } $(document).ready(function () { function LoadGrid() { //alert('did it 2');var data = null; var varProgramId = ""; //varProgramId = 2;if (varProgramId === "") varProgramId = 1 data = { year: 2020, quarter: 2, programId: Number(varProgramId) }; $.ajax({ url: 'http://localhost:9001/QuarterlyScores/KendoUIGridAPI', type: "POST", contentType: "application/json; charset=utf-8", data: JSON.stringify(data), success: function (result) { // action to do after form submit $("#dynamickendoGrid").html(''); console.log("successfull call from LoadGrid() for : " + JSON.stringify(data)); generateGrid(JSON.parse(result)); console.log("successfull call - generateGrid"); }, error: function () { alert("Error while inserting data"); } }); } $("#btnViewData").click(function () { LoadGrid(); }); LoadGrid(); function generateGrid(response) { var model = generateModel(response); var columns = generateColumns(response); var i = 1; var grid = $("#dynamickendoGrid").kendoGrid({ dataSource: { transport: { read: function (options) { debugger; options.success(response.data); }, update: function (options) { debugger; //e.sender.dataSource.read();var scoreidarray = {} //display the key and value pair// alert(k + ' is ' + v);// type: "POST"var myObjectUpdate = []; $.each(options.data, function (k, v) { //console.log(k + ' is ' + v);if (k.toLowerCase().indexOf("_score_id") > 0) { var obj = { 'qId': options.data['qid'][0], 'year': '2020', 'quarter': '2', 'topicanswer': options.data[k.split('topic')[0]] }; myObjectUpdate.push(obj) } }); console.log(JSON.stringify(myObjectUpdate)); debugger; var searchResults; $.ajax({ url: "http://localhost:9001/QuarterlyScores/PersistQuarterlyScore", type: "POST", contentType: 'application/json', data: JSON.stringify(myObjectUpdate) , success: function (result) { debugger; //searchResults = result;// generateGrid(JSON.parse(result)); $("#dynamickendoGrid").html(''); //console.log("successfull call from LoadGrid() for : " + JSON.stringify(result)); generateGrid(JSON.parse(result)); console.log("successfull call - generateGrid - Update"); }, error: function () { debugger; } }) debugger; // options.success(); } }, pageSize: 10, schema: { model: model } }, columns: columns, pageable: true, editable: "inline", edit: OnEdit, sortable: true, filterable: true, columnMenu: true, toolbar: kendo.template($("#template").html()), }); } function generateColumnsAll(response) { var columnNames = response["columns"]; return columnNames.map(function (name) { return { field: name }; }) } function generateModel(response) { var sampleDataItem = response["data"][0]; var model = {}; model.id = "ID"; var fields = {}; for (var property in sampleDataItem) { //if (property.indexOf("ID") !== -1) {// model["id"] = property;//}var propType = typeof sampleDataItem[property]; if (propType === "number") { fields[property] = { type: "number", validation: { required: true } }; if (model.id === property) { fields[property].editable = false; fields[property].validation.required = false; } } else if (propType === "boolean") { fields[property] = { type: "boolean" }; } else if (propType === "string") { fields[property] = { validation: { required: true } }; } else { fields[property] = { validation: { required: true } }; } } model.fields = fields; return model; } function generateColumns(response) { var columnNames = response["columns"]; var columsList = generateColumnslist(response["columns"]); //console.log(columsList); columsList.push({ command: ["edit", "destroy"], title: "&nbsp;", width: "100px" }); return columsList; } function generateColumnslist(response) { var columnNames = response; return columnNames.map(function (name) { if (name == "qId" || name == "question" || name == "ID") { return { field: name, title: GetColumnTitle(name), width: GetColumnWidth(name), editor: NotEditableFields }; } else if (name.toLowerCase().indexOf("_qtype") > 0 || name.toLowerCase().indexOf("_mapping") > 0) {//topic1_Mappingreturn { field: name, title: GetColumnTitle(name), width: GetColumnWidth(name), hidden: true }; } else if (name.toLowerCase().indexOf("_id") > 0) { return { field: name, title: GetColumnTitle(name), width: GetColumnWidth(name), hidden: true }; } else { return { field: name, title: GetColumnTitle(name), width: GetColumnWidth(name), editor: chooseEditor }; } }) } }); </script>

Database script

create PROC dbo.kendoGridIssue ASIF OBJECT_ID('tempdb..#tempCommonData') IS NOT NULLBEGIN DROP TABLE #tempCommonData ENDcreate table #tempCommonData ( id int identity(1,1), qId varchar(50) null, question varchar(50) null, topic1 varchar(50) null, topic1_QType varchar(30) null, topic1_Mapping varchar(200) null, topic2 varchar(50) null, topic2_QType varchar(30) null, topic2_Mapping varchar(200) null, ) INSERT INTO #tempCommonData(qId,question,topic1,topic1_QType,topic1_Mapping,topic2,topic2_QType,topic2_Mapping)select 'Q1' qId,'question content - #1' question, '1.00' topic1, 'DropdownList'topic1_QType, 'If OptionA 1.00, 1 | If OptionB 2.00, 2 | If OptionC 3.00, 3 ' topic1_Mapping ,'2.00' topic2 ,'DropdownList' topic2_QType, 'If OptionA 1.00, 1 | If OptionB 2.00, 2 | If OptionC 3.00, 3 ' topic2_Mapping union allselect 'Q3' qId,'question content - #2' question, '2.00' topic1, 'DropdownList'topic1_QType, 'If OptionA 1.00, 1 | If OptionB 2.00, 2 | If OptionC 3.00, 3 ' topic1_Mapping ,'3.00' topic2 ,'DropdownList' topic2_QType, 'If OptionA 1.00, 1 | If OptionB 2.00, 2 | If OptionC 3.00, 3 ' topic2_Mapping union allselect 'Q3' qId,'question content - #3' question, '1' topic1, 'Numerator_Denominator'topic1_QType, 'Numerator,Denominator | 1,2 ' topic1_Mapping ,'1' topic2 ,'Numerator_Denominator' topic2_QType, 'Numerator,Denominator | 4,3 ' topic2_Mapping union allselect 'Q4' qId,'question content - #4' question, 'NA' topic1, 'Not Applicable'topic1_QType, null topic1_Mapping ,'NA' topic2, 'Not Applicable'topic2_QType, null topic1_Mapping union allselect 'Q5' qId,'question content - #5' question,'1.00' topic1, 'DropdownList'topic1_QType, 'If OptionA 1.00, 1 | If OptionB 2.00, 2 | If OptionC 3.00, 3'topic1_Mapping,'NA'topic2,'Not Applicable'topic2_QType, null topic1_Mapping union allselect 'Q6' qId,'question content - #6' question, 'NA' topic1, 'Not Applicable'topic1_QType, null topic1_Mapping ,'2' topic2 ,'Numerator_Denominator' topic2_QType, 'Numerator,Denominator | 10, 5 ' topic2_Mapping SELECT * FROM #tempCommonData

Is there a way to use validation on spreadsheet cells that includes a regex?  I have two validators I need to set up.  The first is just to make sure it is an integer, and the second needs a string with a max length on it.  For the integer, I started with dataType of "number", but it required a comparer.  If I included a comparerType of "greaterThan", I needed a from.  

Also, is there a place where we can find the allowed fields for comparerType along with examples?

Thanks!

Doing it this way:

var uploadFile = $("#documents-files").data("kendoUpload");

var file2 = uploadFile.getFiles();

formData.append('files2',file2[0]);

$.ajax({ url: 'foo.php', type: 'POST', data: formData, async: false, cache: false, contentType: false, enctype: 'multipart/form-data', processData: false, success: function (response) { console.log(response); } });

And in PHP server var_dump($_POST) :

array(1) {["files2"]=>string(15) "[object Object]"}

And $_FILES is empty.

If I send file in standard way, WITHOUT KendoUpload widget 

 var files = document.getElementById('documents-files');
 var file = files.files[0];

it works, superglobal $_FILES is filled with file data.

Hello,

  We are having a problem uploading multiple files on a server running HTTP/2.  Single files upload fine.  I used the "batch" property and that seems to work ok since it's one request.  We disabled HTTP/2 and went back to HTTP/1.1.  Everything seemed to work fine.
I downloaded the newest trial version it is still has the problem. Is there any way around this issue without using the "batch" property?

Thanks in advance!

I am working on Kendo MVVM Grid with row-template. i have applied merged cells (rowspan) inside the row-template.Everything is working fine but when i applied filters on column then that time Grid is not showing any result.

i have tried Filtering without merged cells, its working fine

I'm trying to filter the grid by using the datepicker but I'm using an external filter outside of the grid and its not working. Here is some of my code below open to any suggestions to make this work. Thanks!

<div id="filters">                                             

<input id="text3" type="text" class="k-textbox" placeholder="Filter by Date">                                         

</div>

<div><div id="grid"></div></div>

JS:

$("#text3").kendoDatePicker({             

change: function () {                 

var value = this.value();                 

if (value) {                     

grid.dataSource.filter({                         

field: "Opened_at",                         

operator: operator,                         

value: value                     

});                 

} else {                     

grid.dataSource.filter({});                 }             }         });

I have a slider where one can increase the zoom in/out with the help of the slider. whenever the user increases the zoom as of now now I am changing the width of this table("k-scheduler-table") dynamically in the scheduler view. In total there are 4 tables with such class but I am changing only the two tables width dynamically. When I do this I am refreshing my timeline through code and it works without any problem. but the data which is there inside the timeline with a specific time. for instance consider a task from 6am to 6:30am. Now after increasing the zoom task remains at some other timeline rather than at 6am-6:30am. and if I use scheduler.refresh() then my width which I have setted dynamically for the table classes is no longer and zoom effect is gone. I need an idea what can i do.

1-)Help me by refreshing the task to the current time-zone(only task-time-zone not the entire scheduler so that the zoom remains same)
2-)Or else refresh the scheduler and somehow I should pass the two table classes width dynamically

You can find the problem in the attached image