In the following example I want to show the Id of the category when the corresponding "columns.values" is not found. Is there a way to do it easily?

in the "burger" line it is blank, and I want that in that case at least its category is displayed

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category", values: [
      { text: "Beverages", value: 1 },
      { text: "Food", value: 2 }
    ] }
  ],
  dataSource: [
    { productName: "Tea", category: 1 },
    { productName: "Ham", category: 2 },
    { productName: "Burger", category: 3 },
    
  ],editable: true,
});
</script>

Hi, 

As my title says, when I clear selected values in the input, additional values selected.

See Dojo: https://dojo.telerik.com/UgOVISOL

Duplicate:
1) Open the widget and select an element under the Customer Location group
2) Close the widget
3) Click the X button on the tag to remove the selected Customer Location.

See how it adds an additional value to the selected list. This is somehow linked to the filtering in the change callback because when I remove the change callback, it works fine. N.B. this only happens when clearing the value using the X, if the value is deselected, all is fine

The desired behaviour is that when a customer location is selected, the customer accounts in the datasource are filtered by the selected customer location. This part is working though.

Thanks, 
Grant

Hi all.

In this example: https://demos.telerik.com/kendo-ui/grid/multicolumnheaders.
How can I lock / unlock columns from the column menu?

Thank you in advande.
Regards,
Carlos Conde

I have the the following code:

module App.UI {
    export class News extends App.UI.UIComponent {
        constructor(selector: JQuery | string) {
            super(selector);
        }

        protected init() {
            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: () => {
                        App.WCF.GET('/umbraco/aawNewsSurfaceController/NewsSurface/GetNewsItems?lang=de&id=1396').then((response) => {
                            console.log(response, "response");
                        })
                    }
                },
                pageSize: 21
            });

            console.log(dataSource);

            $("#pager").kendoPager({
                dataSource: dataSource
            });

            $(".news-list-view").kendoListView({
                dataSource: dataSource,
                template: kendo.template($("#ListViewTemplate").html())
            });
        }
    }
}

The Response from my Service is the following JSON String:

[ { "Headline": "Lorem Ipsum", "Content": "<p>Lorem ipsum ...</p>", "PublishDate": "2020-08-07T00:00:00", "Image": { "Description": "", "Photographer": [], "UmbracoFile": { "src": "/media/bedfs1h5/bild02.jpg", "focalPoint": { "left": 0.5, "top": 0.5 }, "crops": [ { "alias": "Reference Slider", "width": 800, "height": 545, "coordinates": null }, { "alias": "Slider", "width": 1070, "height": 600, "coordinates": null }] }, "Key": "fcdafa9b-3dff-407d-88b2-a4b85a9b2ac5", "Id": 1330, "Name": "Porsche Schwarz", "UrlSegment": null, "Level": 4, "Path": "-1,1111,1062,1146,1330", "Cultures": { "": { "Culture": "", "Date": "2020-07-13T15:47:22.943Z" } } } }, { "Headline": "Test 2", "Content": "<p>Test</p>", "PublishDate": "2020-08-15T00:00:00", "Image": { "Description": "", "Photographer": [ "Karl Kani" ], "UmbracoFile": { "src": "/media/pmpbnlqi/porsche.jpg", "focalPoint": { "left": 0.71333333333333337, "top": 0.34261241970021411 }, "crops": [ { "alias": "Reference Slider", "width": 800, "height": 545, "coordinates": { "x1": 0.0, "y1": 0.032119914346895075, "x2": 0.0, "y2": 0.092612419700214138 } }, { "alias": "Slider", "width": 1070, "height": 600, "coordinates": null } ] }, "Key": "3e95e2e9-c808-48d2-a71e-efca00d8ba55", "Id": 1147, "Name": "Porsche-Zentrum, Stuttgart-Zuffenhausen", "UrlSegment": null, "Level": 4, "Path": "-1,1111,1062,1146,1147", "Cultures": { "": { "Culture": "", "Date": "2020-03-04T09:28:31.753Z" } } } } ]

The JSON String can be parsed into a valid JSON Object so it should be fine right? So whats the Problem here? I also tried using the following schema:

 var dataSource = new kendo.data.DataSource({
                transport: {
                    read: () => {
                        App.WCF.GET('/umbraco/aawNewsSurfaceController/NewsSurface/GetNewsItems?lang=de&id=1396').then((response) => {
                            console.log(response, "response");
                        })
                    }
                },
                schema: {
                    type: "json",
                    model: {
                        fields: {
                            Headline: { field: "Headline", type: "string" },
                            Content: { field: "Content", type: "string" },
                            PublishDate: { field: "PublishDate", type: "DateTime" },
                            Image: { field: "Image", type: "Object" }
                        }
                    }
                },
                pageSize: 21
            });

And still my ListView Datasource wont get populated.

Any Help would be appreciated.

Thank you.

Hi,

I have the export to excel button on my grid. I want all the cells to be expanded so that i can see the entire content of each cell in excel.

I have attached screenshots below for the same.

Here is the link to the demo:-

https://dojo.telerik.com/OMetasiq

Hi all
I am trying to format the date data to this format: "yyyy-MM-dd HH: mm: ss".
The function I am using is:

excelExport: function(e) {
    var sheet = e.workbook.sheets[0];
    var grid = e.sender;
    var fields = grid.dataSource.options.fields;
    var fieldsModels = grid.dataSource.options.schema.model.fields;
    var columns = grid.columns;
    var dateCells = [];
    
    var len = fields.length - 1; //subtract one because a column is added with a command button
    for (var i = 0; i < len; i++) {
        var currentField = fields[i].field;
        var currentModel = fieldsModels[currentField];
        
        if (currentModel.type === "date") 
            for (var j = 0; j < columns.length; j++) {
                if (currentField === columns[j].field) {
                    dateCells.push(j);
                    break;
                };
            };
        };
    };
    for (var rowIndex = 1; rowIndex < sheet.rows.length; rowIndex++) {
        var row = sheet.rows[rowIndex];
        for (var q = 0; q < dateCells.length; q++) {
            var cellIndex = dateCells[q];
            if(row.cells[cellIndex]){
                row.cells[cellIndex].format = "yyyy-MM-dd HH:mm:ss";}
        };
    };
}

When I export without grouping, the date field in the excell has the expected format, but when I export grouped by another string type field the date field shows a format "yyyy-MM-dd".
How could I solve this?

In a previous post on here, I wrote about implementing drag and drop and sorting on 2 listviews.  I've been able to resolve that issue.

The issue I'm having now is, I need to update the listview after the items have been reordered.  I have sub items under the items that are getting dragged over.  When I reorder the items, it messes up the appearance.  See the attached images.

Here are my template for the items:

<script id="selected-item-template" type="text/x-kendo-template">
    <div class="item">
        <div style="float: right;"><i class="fas fa-fw fa-trash" onclick="removeSelected('${Id}')"></i></div>${Name}
    </div>
    #= renderMySlideTemplates(data) #
</script>

<script id="sub-item-my-template" type="text/x-kendo-template">
    # $.each(data.PDFSlides, function(index, item){
    #
    <div class="sub-item">
        <input type="checkbox" name="cbxSlideSelection" value="${item.Id} " /> ${item.Title} 
    </div> #
    });
    #
</script>

Does anyone have any suggestions?

Hi,

I'm using popup editing mode for my grid model and there is one checkbox which is required. I'm encountering an issue that the checkbox doesn't seem to be validated on blur. After I checked the box, the validation message is not getting removed. Other text fields and drop down fields are working fine. How would I resolve this issue?

Hi,

My code : 

I am trying to achieve a layout in which all of the columns and data are stacked in one line. The data for the columns is dynamic, and each column will not have the same sets of data. Attached is a picture of the layout I am trying to achieve. Please have a look.

I've looked into the groupable functionality to achieve this, but I am still not very sure so any guidance would be greatly appreciated. Thank you so much.