After working on a multi-view page for a couple of months, the shareholders have recently added a requirement that the back button work "as expected". I've found the SPA/layout/router functionality of KendoUI, which appears to be what I need, but I'm rather lost as to how to convert my existing functionality to use it. Also, please note that this is my first time using KendoUI, or working w/ a single page application, so my initial solution is probably not ideal in many respects.

I've hosted an example version of my application here: app.smarteru.com/custom/kendo/index.cfm, as well as attaching the source code as a zip file. I've stripped out a lot of the extraneous UI bits, but I've left the util.js fully intact (including functions that won't actually be called by the example), so you can see the general idea of the page as a whole.

I would appreciate some general guidance/an example of how I can get my tile and list views working within the layout/router framework. You'll notice in the generateCourseView in util,js, I'm handing the hiding/showing of the tile and list display divs on my own (as well as hiding other views, which I've removed from the example for simplicity).

I do have a few specific questions, in addition to the general request for guidance:

• Our standard URLs always include a ?AccountID=1234 parameter, which we'll need to keep. How/will this work w/ the layout/router?
• Can I link to a specific view from another location, while passing another URL parameter? For example, when a course is completed, we want to link back to the course index view (not included in the example), but we need to pass the course completion ID. In our current system, the URL would look something like "course-index.cfm?AccountID=1234&AULMRID=7894". How do I handle this w/ the layout/router functionality?

Just like the javacript toString()

kendo.toString(myDate, 'hh:mm');

it will format my date that I pass in to the local time zone, so it will subtract 7 hours. 

Is the only option to use a parser like momentjs?  

When I change the text in a cell, the text field in the form is also changed.

But then when I change the text field in the form and select a different row the data is not send to the server.

what should I do to make the grid send the Modified text back to the server?

I have created a Kendo UI grid with inline editing, but when I click on the delete command my the create function of the data-source is called, not the delete function. There is probably just a simple problem with this grid but I cannot see it.

Here is my grid code.

 var grid = $("#grid").kendoGrid({
        sortable: true,
        groupable: false,
        scrollable: false,
        dataSource: {
            transport: {
                read: {
                    url: GetActionLink("RefCode", "", "", true),
                    dataType: "Json"
                },
                update: {
                    url: function(refcode) {
                        return GetActionLink("RefCode", "", refcode.Id, true);
                    },
                    type: "PUT"
                },
                destroy: {
                    url: function (refcode) {
                        return GetActionLink("RefCode", "", refcode.Id, true);
                    },
                    type: "DELETE"
                },
                create: {
                    url: function() {
                        GetActionLink("RefCode", "", "", true); //<====== break point is hit here when I click delete button ======================
                    },
                    type: "POST"
                }
            },
            schema: {
                model: {
                    id: "Value",
                    fields: {
                        Id: { type: "number", editable: false, nullable: false },
                        Type: { type: "number", nullable: false, validation: { required: true }},
                        Text: { type: "string", validation: { required: true }},
                        Order: { type: "number", validation: { required: true } }
                    }
                }
            },
            pageSize: 15
        },
        columns: [
            { field: "Type", title: "Type", width: 50, template: "#=GetLookupText(Type,RefCodeTypeData)#", editor: RefCodeTypeEditor, attributes: { style: "text-align: center;" } },
            { field: "Text", title: "Details", width: 50 },
            { field: "Order", title: "Order", width: 20, attributes: { style: "text-align: center;" } },
            { command: [{ name: "edit", text: "edit" }, { name: "destroy", text: "delete" }], title: "&nbsp;", width: 30 }
        ],
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        editable: "inline"
    });
    

If I am in autoSync mode and try to add new row I see that the grid send a HTTP POST with empty fields
So I changed the mode to batch
Now I want the grid to save the new row only after I Presses the “Save changes” button.

For all the other rows in the grid I want the grid to send the data when I select other row
not only by Pressing the “Save changes” button.

Hi,this code not fire complete event:

$(document).ready(function () {
    var ds = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/api/Base/QueryData",
                dataType: "json",
                type: "post",
                contentType: "application/x-www-form-urlencoded",
                data: {
                    PrimaryTable: "Employee",
                    PrimaryKeyField: "EID",
                    FieldNameList: "EID,EmpName,sex",
                    ConditionExpr: "EID=85"
                },
                beforeSend: function (xhr) {
                    //xhr.setRequestHeader('Authorization', window.auth);
                },
                complete: function (jqXHR, textStatus) {
                    console.log(jqXHR);
                }
            }
        }
    });
    $("#divQJList").kendoGrid({
        dataSource: ds
    });
});

the api/Base/QueryData code like this:

[Route("QueryData")]
public GRDataSet QueryData([FromBody]JObject jo)
{
    GRDataSet grData = new GRDataSet();
    grData.Table = new DBTable();
    grData.Table.FieldList = new ObservableCollection<DBField>();

    ........
    DataSet ds = GetData(jo);
    grData.DataXML = XDocument.Parse(ds.GetXml());
    return grData;
}
response return json:

{
    "Table": {
        "TableName": "DS",
        "TableTypeID": 2,
        "TableTypeName": 0,
        "PrimaryKey": null,
        "TableOrder": 1,
        "TableLabel": "Employee Table",
        "FieldList": [
            {"TableName": "EMPLOYEE", "TableTypeId": 2, "ColName": "EID", "ColOrder": 10, "ColType": "INT IDENTITY", "ColWidth": 4, "ColPrecision": 0, "ColNull": 0, "ColDefault": "", "DisplayLabel": "ID" },
            {"TableName": "EMPLOYEE", "TableTypeId": 2, "ColName": "EMPNAME", "ColOrder": 1, "ColType": "VARCHAR", "ColWidth": 20, "ColPrecision": 0, "ColNull": 0, "ColDefault": "", "DisplayLabel": "Name" },
            {"TableName": "EMPLOYEE", "TableTypeId": 2, "ColName": "SEX", "ColOrder": 40, "ColType": "CHAR", "ColWidth": 1, "ColPrecision": 0, "ColNull": 1, "ColDefault": "", "DisplayLabel": "Sex" }
        ]
    },
    "DataXML": { "NewDataSet": { "DS": { "EMPLOYEE_EID": "85", "EMPLOYEE_EMPNAME": "系统管理员", "EMPLOYEE_SEX": "1" } } },
    "Total": 10
}

Hello,

currently i am using events so auto save the gridOptions into local storage: 

The grid state is restored automatically when the document gets ready.

So is this approach correct or is there a smarter way than to wire all that events? Is there a better way to implement an autosave / restore mechanism?

Thanks in advance

Holger

I'm using Kendo with bootstrap and I've noticed strange behaviour when displaying a Bootstrap form inside tab content.

http://dojo.telerik.com/@pablo_b/AbubU/4

In this fiddle the input field inside the tab content is higher than the one outside.

Using the browser dev tools - I can make the field return to its expected size by disabling the 'height: 34px' attribute of the bootstrap 'form-control' class.

This is a strange side effect (bug?).  

 Has anyone noticed this before and can suggest a workaround?

 Thanks

Hello,

I am working on Esri Map to show Kendo Donut charts on map.  The map loads Donut chart as SVG image.

Previously I was using Kendo version 2014.2. 903. It was loading  map correctly on given Latitude/Longitude.

Configuration when Esri map was running successful:

 1.  ArcGIS Library 3.11

 2. Kendo 2014.2.903

Now project has upgraded the Kendo version to 2015.1.408. It stopped working. The Esri map loads. But the Kendo Donut Chart , rendered as SVG image is not displayed on Map. It hides behind map and does not get rendered properly on Latitude/Longitude.

Configuration when Esri map is not running:

 1.  ArcGIS Library 3.11 

  2. Kendo  2015.1.408.

 If I revert the version of kendo.all.min.js to 2014.2.903, then it works but then Kendo Grid Export functionality does not work.

 PFA image where in real Donut is hidden , I made it visible through developer tool. Which version supports Kendo Donut chart to load on Esri Map?  Please help me on this issue.

Hello,

 I am experiencing an issue with the KendoWindow in that I have a child Window that is falling behind the parent, making it not visible on screen unless the parent is moved. I need the child to come to the very front, as it is going to be a modal that requires some user action to remove itself at completion. I have a code block that represents a issue similar to what I am experiencing. The parent KendoWindow has a button which attempts to bring the child Window to the front, but that does not occur. 

What would be required to have the expected behavior occur?

Thanks.