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.

I would like to increase the width of the Field selection DropDownList. When the list drops down, it is expanded enough to show all of the long field names (that is good!), but I would like to also increase the width of the control so that when a long field is selected it will show the whole name. How can I do that?

Thanks!

I have an application that has 2 ListViews.  I have one ListView that lists products and I'm able to drag the products over to the other ListView.  I'm able to drag over the items.  The issue that I'm running into is when I try to resort the items on the second ListView.  The application breaks.  I'm not sure how to fix this.

I've copied over some of my code to see if someone can spot the issue

$("#products-list").kendoListView({
selectable: "single",
dataSource: productsList,
template: kendo.template($('#item-template').html())
});

$("#products-list").kendoDraggable({
filter: ".item",
hint: function (element) {
return element.clone();
},
kendoDropTarget: "#selected-products-list",
});

$("#selected-products-list").kendoListView({
dataSource: selectedProducts,
template: kendo.template($('#selected-item-template').html())
});

$("#selected-products-list").kendoDropTarget({
drop: function (e) { // Apply the changes to the data after an item is dropped.
var draggableElement = e.draggable.currentTarget,
dataItem = productsList.getByUid(draggableElement.data("uid")); // Find the corresponding dataItem by uid.

selectedProducts.add(dataItem); 
}
});

$("#selected-products-list").kendoSortable({
filter: ".item",
cursor: "move",
placeholder: function (element) {
return element.clone().css("opacity", 0.1);
},
hint: function (element) {
return element.clone().removeClass("k-state-selected");
},
change: function (e) {
var oldIndex = e.oldIndex,
newIndex = e.newIndex,
data = selectedProducts.data(),
dataItem = selectedProducts.getByUid(e.item.data("uid"));
selectedProducts.remove(dataItem);
selectedProducts.insert(newIndex, dataItem);
}
});

I have seen multiple articles about clearing a date picker but they don't work.  Multiple posts say this should do it:

jQuery("#datepicker").data("kendoDatePicker").value(null);

This clears the display, but it does not show the placeholder text that's there before a value is selected.  I would expect that to happen automatically when the value is set to null, but since it doesn't, how do I make that happen?