I've got an inline editable grid setup with two AutoComplete fields. When something is selected in one of the AutoCompletes, I'm using some of the additional data in the dataItem to set the value of the other AutoComplete.

This is all seems to be working visually -- the appropriate value appears in the second AutoComplete when the first is selected, but on saving the row, the value of the second AutoComplete is blank.

It's not a problem with the create/update functions, as the value of the second autoComplete is saved if I actually select a value.

Can anyone explain why this is happening?

Thanks

  I am create a json file and want to this json data will display in kendoUi grid.
 I had   written the code what ever in your demo but it is blank page is came.

Hi guys,

I am trying to get the Popup Edit menu to work and I have implemented it as seen in the code below. However, whenever I do not update the row but cancel or close the window, the selected row is removed from the grid. I did add an id field to the model so that should not be the issue. The openOrdersList is an Array that receives its data from the server a few seconds after the grid is initialized. Please assist!

Thanks,
Jose



                var gridOpenOrders = $("#gridOpenOrders").kendoGrid({
                    scrollable: false,
                    sortable: {
                        mode: "single",
                        allowUnsort: false
                    },
                    pageable: true,
                    filterable: true,
                    selectable: "row",
                    editable: {
                        mode: "popup",
                        template: $("#tmplPopupEditor").html()
                    },
                    height: 200,
                    columns: [
                        { field: "TimeStamp", title: "TimeStamp", width: 200, editable: false, attributes: { class: "grid-leftalign"} },
                        { field: "Symbol", title: "Symbol", width: 100, attributes: { class: "grid-centeralign"} },
                        { field: "Side", title: "Side", width: 75, attributes: { class: "grid-centeralign"} },
                        { field: "Price", title: "Price", width: 100, template: '#= priceFormatter(Price, Symbol) #', attributes: { class: "grid-centeralign"} },
                        { field: "Qty", title: "Qty", width: 100, template: '#= quantityFormatter(Qty) #', attributes: { class: "grid-centeralign"} },
                        { field: "CumQty", title: "CumQty", width: 100, template: '#= quantityFormatter(CumQty) #', attributes: { class: "grid-centeralign"} },
                        { field: "StopPrice", title: "Stop Price", width: 100, template: '#= priceFormatter(StopPrice, Symbol) #', attributes: { class: "grid-centeralign"} },
                        { field: "StopTriggerSide", title: "Stop/Trail Side", width: 125, template: '#= triggerSideFormatter(StopTriggerSide) #', attributes: { class: "grid-centeralign"} },
                        { field: "TrailingStopTriggerPrice", title: "Trail Trigger", width: 100, template: '#= priceFormatter(TrailingStopTriggerPrice, Symbol) #', attributes: { class: "grid-centeralign"} },
                        { field: "TrailingStopAmount", title: "Trail Amount", width: 75, template: '#= amountFormatter(TrailingStopAmount) #', attributes: { class: "grid-centeralign"} },
                        { field: "MinQty", title: "Min Fill", width: 100, template: '#= quantityFormatter(MinQty) #', attributes: { class: "grid-centeralign"} },
                        { field: "MaxShow", title: "Max Show", width: 100, template: '#= quantityFormatter(MaxShow) #', attributes: { class: "grid-centeralign"} },
                        { field: "AvgPrice", title: "Avg Fill Px", width: 100, template: '#= priceFormatter(AvgPrice, Symbol) #', attributes: { class: "grid-centeralign"} },
                        { field: "Type", title: "Type", width: 100, attributes: { class: "grid-centeralign"} },
                        { field: "TimeInForce", title: "TIF", width: 75, attributes: { class: "grid-centeralign"} },
                        { field: "OrderStatus", title: "Status", width: 100, attributes: { class: "grid-centeralign"} },
                        { command: [{ name: "edit", text: "Update" }, { name: "destroy", text: "Cancel"}], title: "", width: 200, attributes: { class: "grid-centeralign"} }
                    ],
                    dataSource: {
                        data: openOrdersList,
                        pageSize: 4,
                        sort: { field: "TimeStamp", dir: "desc" },
                        schema: {
                            model: {
                                id: "OrderId",
                                fields: {
                                    OrderId: { type: "string", editable: false, nullable: false },
                                    TimeStamp: { type: "string", editable: false, nullable: false },
                                    Symbol: { type: "string", editable: false, nullable: false },
                                    Side: { type: "string", editable: false, nullable: false },
                                    Price: { type: "number", editable: true, nullable: false, validation: { required: true} },
                                    Qty: { type: "number", editable: true, nullable: false, validation: { required: true, min: 1} },
                                    CumQty: { type: "number", editable: false, nullable: false },
                                    StopPrice: { type: "number", editable: true, nullable: false, validation: { required: true} },
                                    StopTriggerSide: { type: "string", editable: false, nullable: false },
                                    TrailingStopTriggerPrice: { type: "number", editable: true, nullable: false, validation: { required: true} },
                                    TrailingStopAmount: { type: "number", editable: true, nullable: false, validation: { required: true} },
                                    MinQty: { type: "number", editable: false, nullable: false },
                                    MaxShow: { type: "number", editable: false, nullable: false },
                                    AvgPrice: { type: "number", editable: false, nullable: false },
                                    Type: { type: "string", editable: false, nullable: false },
                                    TimeInForce: { type: "string", editable: false, nullable: false },
                                    OrderStatus: { type: "string", editable: false, nullable: false }
                                }
                            }
                        }
                    }
                });

The following errors occur:

"NetworkError: 403 Forbidden - http://cdn.kendostatic.com/2012.3.1025/js/kendo.all.min.js"

I have built a simple page following the intro to PHP and the Kendo UI.  I have added a detail row using the detailInit method.  The combo box populates properly, and I can add associated records as needed.  However, when I try to delete them, the call fails.  Actually, the item is removed from the sub grid, but when I hit "save changes", nothing happens.  I have tried this in Firefox using Firebug, and I can see the GET methods when loading the grid and the data for the sub grid.  I can see the POST when the new association between the primary and secondary data types.  However, when I hit "save changes", there is no communication with the server.  I have followed the instructions in the comments on the blog entry, but am unable to delete.  Does anyone have a solution for this problem?

What tools (other then visual studio) are people using to develop pages and sites with HTML5, CSS3, jQuery, javascript and Kendo UI?
My current mix is: Dreamweaver for HTML5 overall layout and VIM for javascript.  This is a somewhat limited wysiwig dev platform (as compared to flashbuilder).

Thanks in advance for you insights!

Paula

IE8 seems to take a long time to build up the grid (with 7 columns) as compare to other browsers like Google Chrome. Any suggestions on how to improve the performance?

I have virtual scrolling setup with page size of 50, I noticed the pause in scrolling when page size limit was reached. The scrolling will become unresponsive for a moment while the grid takes its time to build up the UI. The response time does improve with smaller page size. Page size of 5 equals to a smooth scrolling. However, the initial load of 5 rows are too few for the display area of the grid. Is there a way I can keep the responsiveness of the scrolling while fill up the grid visual area at initial load?

Doug

Upload component posts the file before the metadata, but our server expects the metadata first because it includes vital information for processing the uploaded file. We do not want to save an intermediate copy before processing to avoid unnecessary processing overhead. Is there a way to instruct the Upload component to post the metadata before the file?

Hello,

I'm trying to user the kendo.data.Model to make an observable object from a single object retrieved from a web service.
When I do a kendo.data.Model.define(...), the fields are entirely ignored, and the field containing the date is mapped to a string.

If I create a datasource with the exact same model, I retrieve a correct date.

I tried to put a custom parse function, and in the first case, nothing happen.
In the second scenario, I can see my parse method called.

Here is a sample of what I do :
This make the following output to the console :

Thanks for you help.

HI,
While loading the page grid is loading,
in my sample code i'm showing userId, username, address,... and
there is one html textbox, one html button also
once after clickingon the html button i need to filter the data based on the textbox value i.e. if the user enters 'ABC' means i need to show only the  items that contains ABC in their name or city or address

Below is the sample code:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery.min.js" type="text/javascript" />
    <script type="text/javascript" src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
    <link href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css" rel="stylesheet">
    <link href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.default.min.css" rel="stylesheet">
</head>
<body>
    <div id="example" class="k-content">
        <input id="myTextField" type="text" />
        <input id="btnGo" type="button" value="Go" onclick='LoadGrid()' />
                <div id="grid" style="height: 380px">
        </div>
                <style scoped>
            #clientsDb
            {
                width: 692px;
                height: 413px;
                margin: 30px auto;
                padding: 51px 4px 0 4px;
                background: url('../../content/web/grid/clientsDb.png') no-repeat 0 0;
            }
        </style>
        <script>
        function LoadGrid()
        {
        debugger;

        alert('executed');

//            $(document).ready(function () {
                //var txtUser = document.getElementById('myTextField').value;
                $("#grid").kendoGrid({
                    scrollable: true,
                    sortable: true,
                    
                    filterable: true,
                    pageable: true,
                    columns: [
                                {field: "Id", title: "User ID" ,filterable:false , width: "60px"},
                                {field: "ContactName", title: "User Name",filterable:true , width: "125px" },
                                {field: "Name", title: "Name",filterable:false , width: "150px"},
                                {field: "Address", title: "Address",filterable:false , width: "140px"},
                                {field: "City", title: "City" ,filterable:false , width: "60px"},
                                {field: "State", title: "State" ,filterable:false , width: "60px"},
                                {field: "Country", title: "Country" , filterable:false , width: "60px"},
                                {field: "ZipCode", title: "ZipCode" , filterable:false , width: "60px"},
                            ],
                    dataSource: {
                        pageSize: 20,
                        type: "json",
                        serverPaging: true,
                        serverSorting: false,
                        serverFiltering: false,
                        transport: {
                            read: {
                                //url: "MyGrid.aspx/GetAccounts",
                                url: "MyGrid.aspx/GetData",
                                dataType: "json",
                                contentType: "application/json; charset=utf-8",
                                type: "POST"
                            },
                            parameterMap: function (options) {
                                return JSON.stringify(options);
                            }
                        },
                        schema: {
                            data: "d.data",
                            total: "d.total"
                        }
                    },
                    
                    
                });
            //});
            //Concatenate drop down variable to file name
//var dynamicUrl = "MyGrid.aspx?Name="+myTextField.value+"/GetData";
var dynamicUrl = "MyGrid.aspx?Name="+myTextField.value+"/GetData";

//Assign grid to variable
var grid = $("#grid").data("kendoGrid");

//Set url property of the grid data source
grid.dataSource.transport.options.read.url =dynamicUrl;

//Read data source to update
grid.dataSource.read();
grid.dataSource.refresh();

            }
        </script>
    </div>
</body>
</html>



Previously at the time of loading (with out considering the filter) i kept uri as
url: "MyGrid.aspx/GetAccounts",

the grid was loading perfectly, now after keeping the textbox and button and inbutton click event i added all the code
and changed the uri to
url: "MyGrid.aspx/GetData",

now the textbox value is not coming to the methos, i tried uri like this also
url: = "MyGrid.aspx?Name="+myTextField.value+"/GetData";

but still it is not coming

please help me..
its urgent and try to understand my situation

thanks in advance