Telerik Forums
Kendo UI for jQuery Forum
1 answer
146 views

I have a kendoGrid (for JQuery) with 5 columns. Lets say those columns are called columns A, B, C, D and E. I only want columns A and B to be inline editable. If the user clicks on Columns C, D, E I want nothing to happen. 

What event can I use to prevent the user from editing columns C, D and E while still allowing columns A and B to be inline editable?

I have tried using the beforEdit event but there seems to be no way to identify which cell is being edited. I have tried using the edit event but it is too late at this point. The field is all ready showing in EDIT mode to the user when this event is being called.

Any other ideas?

Anton Mironov
Telerik team
 answered on 07 Dec 2020
3 answers
712 views

How can we add 2 more fields in Schedular UI?

I would like to add one field called location with textbox

and another field called group which is dropdown?

Do we have any example on this?

 

 

Nencho
Telerik team
 answered on 07 Dec 2020
9 answers
1.1K+ views

I populate my grid with objects of a specific class, but when i get them via Grid.dataItems(), they are no longer that specific class but plain objects. is there a way to not have Kendo Grid lose their Initial Class type? Or better yet, have the Grid just use the original objects i give? I want to be able to call the specific class's methods from the individual dataItems, but i can't because of this.

 

Thanks

Keith

Georgi
Telerik team
 answered on 04 Dec 2020
3 answers
833 views
I have an ask to allow the user to set work hours and to set work hours for specified days of the week.  is this possible?
Nikolay
Telerik team
 answered on 04 Dec 2020
36 answers
1.8K+ views
I have created the following Dojo (modified from the Demo of Grid > Selection)
http://dojo.telerik.com/@esinek/IHaM

When I load the Run the page and click a row, the entire grid "jumps" (probably a scrollTo somewhere) so the top of the first row in the grid is at the top of the browser.  This is very distracting and confusing.  Is there something in my configuration that is causing this or is it a bug - and if it's a bug, is there a workaround?

If I change the "selection" option to "row" or remove the selection option, the jumping doesn't happen.

Note that the "jump" only happens on the first selection.  Subsequent selections don't cause the grid to "jump".

Thanks,
--Ed
Preslav
Telerik team
 answered on 04 Dec 2020
1 answer
76 views

The tasks are placed in wrong date in the chart panel.

 

for example: the "T2" task has start date (20/10/2020) and end date (23/10/2020) but in the chart is placed in (6/11) - (9/11).

 

this is the configuration I used for rendering the component: 

kendo.jQuery(chartElement).kendoGantt({
    views: [{type: 'week', selected: true, slotSize: 30}],
    rowHeight: 10,
    toolbar: ['pdf'],
    listWidth: "0%",
    editable: false,
    selectable: true,
    tooltip: {
        visible: true,
        template: `#= task.tooltip #`
    },
    range: {
        start: new Date(this.model.startDate),
        end: new Date(this.model.endDate)
    },
    showWorkDays: false,
    workDayStart: this.model.startDate,
    workDayEnd: this.model.endDate,
    taskTemplate: `<div style="background-color: #= backgroundColor #; padding: 4px 8px; border-radius: 2px"> #= title # </div>`,
});

 

// this is how I added data into the chart

const dataSource = new kendo.data.GanttDataSource({
    data: this.listOfScheduleTasksForGanttChart.map(task => {
        const startDate = new Date(task[this.ganttChartTasksGridStartDate]);
        const endDate = new Date(task[this.ganttChartTasksGridEndDate]);
        return {
            id: task.scheduleTaskId,
            orderId: task.sortId,
            parentId: task.parentId,
            title: task.taskName,
            start: startDate,
            end: endDate,
            backgroundColor: task.backColor,
            expanded: true,
            tooltip: task.toolTip
        }
    })
});

 

Aleksandar
Telerik team
 answered on 04 Dec 2020
9 answers
906 views

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

Tsvetomir
Telerik team
 answered on 03 Dec 2020
2 answers
372 views

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. 

Carsten
Top achievements
Rank 1
 answered on 03 Dec 2020
1 answer
1.0K+ views

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:

 

var launchPDFModal = function (param1, param2, param3) {
        var pdfViewer = $("#pdfViewer").data("kendoPDFViewer");
        if (!pdfViewer) {
            pdfViewer = $("#pdfViewer").kendoPDFViewer({
                pdfjsProcessing: {
                    file: ""                 },
                width: "100%",
                height: "85vh",
                toolbar: {
                    items: [
                        "pager", "zoom", "search", "download", "print"                     ]
                },
                messages: {
                    defaultFileName: param1
                }
            }).data("kendoPDFViewer");
        }
 
        var pdfHandlerUrl = "/api/pdfViewer/" + param1 + "/" + param2 + "/" + param3;
        pdfViewer.fromFile(pdfHandlerUrl);
 
        $("#pdfViewerModal").show();
    }

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).

Ivan Danchev
Telerik team
 answered on 03 Dec 2020
1 answer
133 views

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

Tsvetomir
Telerik team
 answered on 03 Dec 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?