Hello all

I have the following partial view that I use to display various uploads on a websites.

As you can see, for each upload on the page, I wish to display a "Required" bit of text dependent upon whether a particular upload has a file etc. I do not wish to enforce any strong validation which I could do on the post of the form, I just want to bring to the users attention that they need to upload something here.

How would I go about showing and hiding this depending on whether the upload has any thing present?

Alternatively, are their any css selectors I can use to facilitate this task e.g. k-dropzone k-empty >>> an empty upload;  k-dropzone k-hasdata >>> upload has received a file.

Again alternatively, is there a way to change the button text from "Select Files" when nothing is present, to "File already selected" when something has been uploaded?

Please note, I have multiple instances of the upload on the page which is where I have encountered a few problems!!!

Hi!

We're currently evaluating KendoUI and trying to build a little example app which consists of a PDF-Report. Is it possible to extract a rendered chart and insert it into a multipage PDF-Report? My PDF renders fines but the chart is missing in the PDF-Output (see attached files)

App structure (It's basically a print preview with PDF-Export):

- One browser window with 1 Chart 

- The User hits the report button (see report screenshot)

- A -new- window is opened and the Chart from the first window is inserted (via JQuery) into the DOM of the 2. window (which holds the report).

- A PDF is generated (see pdf screenshot).

Thanks in advanced.

Best regards,

Jens

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