Hi

I have custom columns defined for Grid table:

columns: [
{
field: "ID",
width: 50,
filterable: false,
attributes: {"data-test":'#=ID#'},
media: "(min-width: 900px)"
},
{
field: "IDstatus",
width: 50,
filterable: false,
attributes: {"data-status": '#=Status#'},
media: "(min-width: 600px and max-width: 900px)"
},

…

What I would like to do is to change 'Status" in attributes by taking out parts of code/text from it, but when I try to get this to work in this way:
attributes: {"data-status": '# var z = Status; var re = /<span.*?<\/span>/gm; z = String(z).replace(re, ""); # #=z#'},
… it throws "Invalid template" error.

I was trying to escape quotations, add quotations or remove them, even using non-regex replace but with no success.

Is it possible to just get "review" from this cell to fill in "data-status" attribute?

Status cell is rendered on PHP page as:
<td><span class="k-icon k-i-track-changes-enable"></span> review</td>

-- 

Thank you in advance for your reply,

Karol Kaminski

Hello,

As a preface, I am quite new to the Telerik controls and developing web apps in general, so apologies in advance if there is an obvious or existing answer to this :)

I need to make a page for reserving meeting rooms, so a grid style view with room names down the left side, hours for columns and then things like showing existing bookings (which might overlap the hour columns), being able to click/drag on the view to select a room for a desired time interval etc.

The application I need to extend with this is mainly angular.js on the client side. I am hoping to accomplish this using angular style databinding in the view. 

I have been looking through the available Telerik components, and I would basically really like some guidance as to what component might be easiest to get to work in this fashion, to me it seems both the Schedular and the Grid might potentially make good starting points. 

If anyone knows of tutotials or examples that are similar to my usecase, that would be really nice as well. 

I'm using Kendo's JQuery PDFViewer control to display PDF files inline in a web page. The control is launched into a modal popup via a piece of JavaScript, thusly:

The three params are used to identify the file to be shown and file is returned as a stream as the files are stored in data and not as files on a drive. I have verified the references to the Kendo library, pdf.js and pdf.worker.js are all correct as required.

The PDF file loads and displays just fine in the control. The download button also successfully saves the file to the local drive. However, when I click the print button, and the print preview shows up, it has the correct number of pages, but they are all blank. Trying the actual print, just prints blank pages. Browser doesn't matter. I've tried Chrome, Edge, and Firefox. Same thing. I've also verified that it's not an ad blocker (neither Edge nor Firefox installs have any plugins on them).

so I recently created a grid called Regionmappinggrid, which has a datasource of RegionalMappingDataSource. What I'm trying to do is call the create function in the datasource from the toolbar element name create, but having no luck so far could some please help me out ? All of the code is below

      var RegionalMappingDataSource = new kendo.data.DataSource({
            transport: {
                read: function(options) {
                    $.ajax({
                        url: siteRoot + '/Admin/RegionMapping/GetRegionMappings',
                        type: 'GET',
                        success: function(result) {

                            console.log(result);
                            options.success(result);
                        },
                        error: function(result) {
                            options.error(result);
                        }
                    });
                },
                create: function() {
                    console.log("hrllo00");


                },

                update: function () {
                    console.log("hello!");
                },

                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return { models: kendo.stringify(options.models) };
                    }
                },
                //schema: {
                //    model: {
                //        CountryName: { field: "CountryCode", type: "string" },
                //        CountryID:{"CountryId", type: "string" }
                //    RegionId: "RegionID",
                //    RegionOtherName: "Name",
                //    UpdatedDate: "UpdatedDate"
                //}

                //}
                schema: {
                    model: {
                        id: "RegionMappingId"
                        //fields: {
                        //    CountryId: { type: "number", editable: false},
                        //    CountryCode: { type: "string", editable: true },
                        //    RegionName: { type: "string", editable: true },
                        //    RegionId: { type: "number", editable: true},
                        //    Name: { type: "string", editable: true},
                        //    UpdatedDate: { type: "date" }

                        //}

                    }
                }
            }


        });

 $("#Regionmappinggrid").kendoGrid({
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            editable: "inline",
            toolbar: [{ name: "create", text: "Update Other Region Name" }],
            columns: [
                {
                    title: "Country Name",
                    field: "CountryCode",
                    editor: function(container, options) {
                        var input = $('<input required id="mapping" name="' + options.field + '"/>');
                        input.appendTo(container);
                        input.kendoDropDownList({
                            autoBind: true,
                            optionLabel: 'Please Select Country....',
                            dataTextField: "Value",
                            dataValueField: "Key",
                            dataSource: getCountryName,
                            value: options.model.Key,
                            text: options.model.Value
                        }).appendTo(container);
                    }

                },
                {
                    title: "Region Name",
                    field: "RegionName",
                    editor: function(container, options) {
                        var input = $('<input required id="mapping1" name="' + options.field + '"/>');
                        input.appendTo(container);
                        input.kendoDropDownList({
                            autoBind: false,
                            optionLabel: 'Please Select Region....',
                            dataTextField: "Value",
                            dataValueField: "Key",
                            dataSource: getRegionName,
                            value: options.model.Key,
                            text: options.model.Value
                        }).appendTo(container);
                    }

                },
                {
                    title: "Region ID",
                    field: "RegionId",
                    hidden: false
                },
                {
                    title: "Other Name",
                    field: "Name"
                },
                {
                    title: "Updated On",
                    field: "UpdatedDate",
                    format: "{0: yyyy-MM-dd HH:mm:ss}",
                    editable: function() { return false; }
                },
                {
                    command: ["edit", "destroy"]
                }
            ],
            dataSource: RegionalMappingDataSource

Hi,

I am using Kendo Grid and I have created a checkbox that is read-only as default. The checkbox will only enable after user has edited the row.

I am developing this function in onChange by using "$('.chkbx').prop('disabled', false);" to remove the disabled attribute of checkbox but it will enable all the checkbox in the grid instead of edited row.

I have retrieved grid, recno and data item of current row in onChange. May I know is that possible to remove the disabled attribute of checkbox by using these information I retrieved? Or even better if could based on condition of dirty flag, so that if user has removed the value they changed, the checkbox can revert back to disabled. 

Thanks in advance.

Here is my code:

The switch's toggle() method doesn't fire the MVVM change event, nor does it update the viewModel property.

Setting the viewModel property obviously updates the viewModel property, but it too doesn't fire the change event.

Only clicking on the switch seems to fire it.

Both of the methods do change the visual state appropriately, and also end up changing the aria-checked value. Here is a dojo.

Is there a way to programmatically change the switch that also fires the change event?

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