Hi,

I have a need from my users. They want to show thousands of data loaded when choose a category in a list box and browse row by scrolling. 

I can do that by create a grid with a client side paged data source and a scrollable virtual grid. 

But now, my user want to load an other catgery and concat the new rows to existing rows and keep scrolling position. 

How can I do that ? I tried to add data in datasource, but scroll don't work any more (ranges are in invalid state). What is the best solution for do that ?

There is my actual code:

This may be helpful to others. Scheduler's eventTemplate is more flexible than is currently documented. 

The documentation indicates that the following fields may be used:

• description String - the event description
• end Date - the event end date
• resources Array - the event resources
• start Date - the event start date
• title String - the event title

Ref: http://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler#configuration-eventTemplate

However, this is not strictly true. I have been able to use any property from a dataSource in the "read" transport. 

Example:

The customField1 (line 11 above) property should actually be available for you to use within your eventTemplate.

This opens up the eventTemplate to much greater levels of customisation than is documented. 

From the other posts out here, I see that window positioning can be tricky.  I am hoping someone can help me solve my issue.  I have a page which has two grids on it.  The page is "long" enough to generate scroll bars. Each grid has a column with custom buttons.  Those buttons open one of two windows.  However, as they are called from the grids, Kendo tries to place the windows on top of the grids.  That would be fine, but upon drawing of the window(s), the page scrolls up to the top automatically. The window(s) are further down the page and not visible.  I would like a way to either suppress the top-scrolling behavior or place my windows at the top of the page when drawn.  Any help is appreciated.  Snippets below.

$("#grid").delegate(".showExtendWindow", "click", function (e) {
extendAccessWindow.data("kendoWindow").center();
extendAccessWindow.data("kendoWindow").open();
});

$("#grid2").delegate(".showExtendWindow2", "click", function (e) {
extendContractWindow.data("kendoWindow").center();
extendContractWindow.data("kendoWindow").open();
});

When I set the navigatable option to true in the below example:

http://dojo.telerik.com/apOGE

When the user does the following scenario:

1. Click "Add new record"

2. Enter a value in the name (without navigating outside the text)

3. Sort any column

The value entered is not saved. This bug does not occur if the "navigatable" option is set to "false"

I had deletes working in my grid but lost some of the code and have been trying without success the last 2 days to get it to work again.

I have a REST service I call to do the actual delete, it is backed by Java. The relevant part of that code is below, followed by my grid.

I have floundered around changing this and that and never can get it to work. The Java Rest Service detects that I am doing a DELETE but I cannot get the parts. I only really need the ID.

What am I doing wrong?

Java based REST service

private void doDelete(HttpServletRequest request, HttpServletResponse response) throws IOException {

// Map prmMap = request.getParameterMap();
// String id = prmMap.get("id").toString();
String prmUNID = request.getParameter("id");
Database DB = this.getAppData();
// String t = request.getParameter("unid");
Document tmpDoc = DB.getDocumentByUNID(prmUNID);
if (tmpDoc != null) {
tmpDoc.remove(true);
} else {
}
}

script is below

 $( document ).ready( function () {

// Add Document
    $('#newDoc').click(function(event){
    var url = "xpFormPC.xsp";
    window.open(url,"_self");
    });


// Setup Rest Service
var loc = ( location.href );
var url = loc.substring( 0, loc.lastIndexOf( "/" ) ) + "/xpRest.xsp/custom/";
var searchInput = XSP.getElementById("#searchInput");
var crudServiceBaseUrl = "xpRest1.xsp", 
dataSource = new kendo.data.DataSource({
autoSync : true,
transport : {
read : {
url : url + "get?status=5",
dataType : "json",

type : "GET"

},
t
destroy : {
dataType : "json",
url : "destroy?id="

type : "DELETE"

}

},
parameterMap: function(data, type) {
if (type == "destroy") {
return { models: kendo.stringify(data.models) }
}
},
batch:true,
pageSize : 15,
scrollable : false,
height : 600,
 
schema : {
model : {
id : "unid",
fields : {
serialNumber : {
type : "string",
editable : false
},
statusDescription : {
type : "string",
editable : false
},
lastActionDate : {
type : "date",
editable : false
},
lastActionUser : {
type : "string",
editable : false
},
lastActionLocation : {
type : "string",
editable : false
},
assetTag : {
type : "string",
editable : false
},
model : {
type : "string",
editable : false
},
unid : {
type : "string",
nullable : false
}
}
}
}
});

// Grid
grid = $("#grid").kendoGrid( {
      excel:{
          fileName: "PC Inventory All.xlsx",
          filterable:true,
          allPages:false
        },
dataSource : dataSource,
dataBound: onDataBound,
columns : [
       //define template column with checkbox and attach click event handler
       {width: "30px", 
       template: "<input type='checkbox' class='checkbox' />" },
{
        width : "150px",
field : "serialNumber",
title : "Serial Number",
template : "<a href=xpFormPC.xsp?action=openDocument?&key=#=unid#><h5><b>#=serialNumber#</b></h5></a>"
}, {
width : "200px",
field : "statusDescription",
title : "Status"
}, {
width : "250px",
field : "lastActionDate",
title : "Being Decomissioned Date",
template: "#= (lastActionDate == null) ? ' ' : kendo.toString(kendo.parseDate(lastActionDate, 'yyyy-mm-dd'), 'MM/dd/yyyy') #"
}, {
width : "250px",
field : "lastActionUser",
title : "Being Decomissioned User"
}, {
width : "275px",
field : "lastActionLocation",
title : "Being Decomissioned Location"
}, {
  width : "150px",
field : "assetTag",
title : "Asset Tag"
}, {
   //width : "150px",
field : "model",
title : "Model"
}, {
hidden: false,
width : "50px",
template : "<button type='button' class='btn btn-danger k-grid-delete'>X</button>"
}
],
       editable: "inline",
pageable : {
refresh : true,
pageSizes : true,
buttonCount : 5
},
groupable : true,
reorderable : true,
filterable : true,
selectable : true,
sortable : true,
resizable : true,
columnMenu : true
});


// Search
$( "#searchInput" ).keyup( function () {

var selecteditem = $( "#searchInput" ).val();
var kgrid = $( "#grid" ).data( "kendoGrid" );
selecteditem = selecteditem.toUpperCase();
var selectedArray = selecteditem.split( " " );
if ( selecteditem ) {
var orfilter = {
logic : "or",
filters : []
};
var andfilter = {
logic : "and",
filters : []
};
$.each( selectedArray, function ( i, v ) {
if ( v.trim() == "" ) {
} else {
$.each( selectedArray, function ( i, v1 ) {
if ( v1.trim() == "" ) {
} else {
orfilter.filters.push( {
field : "serialNumber",
operator : "contains",
value : v1
}, {
field : "status",
operator : "contains",
value : v1
}, {
field : "curLocation",
operator : "contains",
value : v1
}, {
field : "model",
operator : "contains",
value : v1
}, {
field : "assetTag",
operator : "contains",
value : v1
} );
andfilter.filters.push( orfilter );
orfilter = {
logic : "or",
filters : []
};
}

} );
}
} );
kgrid.dataSource.filter( andfilter );
} else {
kgrid.dataSource.filter( {} );
}
});

    var checkedIds = {};

    // On click of the checkbox:
    function selectRow() {
        var checked = this.checked,
        row = $(this).closest("tr"),
        grid = $("#grid").data("kendoGrid"),
        dataItem = grid.dataItem(row);

        checkedIds[dataItem.id] = checked;
        if (checked) {
            //-select the row
            row.addClass("k-state-selected");
            } else {
            //-remove selection
            row.removeClass("k-state-selected");
        }
    }


    //on dataBound event restore previous selected rows:
    function onDataBound(e) {
        var view = this.dataSource.view();
        for(var i = 0; i < view.length;i++){
            if(checkedIds[view[i].id]){
                this.tbody.find("tr[data-uid='" + view[i].uid + "']")
                .addClass("k-state-selected")
                .find(".checkbox")
                .attr("checked","checked");
            }
        }}
        
        });

I have noticed that when a user zooms their browser in/out that the scheduler grid becomes misaligned with the dates. I have turned off/on various css properties i have defined in and around the scheduler and cannot seem to figure out why it is doing this. In some zoom sizes the scheduler loads fine. And other it looks terrible. Please advise!

I have attached some videos and images...

Currently my scheduler is sitting in a parent div with a height that is a css calculation against the vh (ie calc(100vh - 23px). It also is set to overflow:hidden;

http://screencast-o-matic.com/watch/cDXf2ojMIo

Hello, I have a Kendo Grid I am creating from JSON data.  I am attempting to pass a function to a custom Command button's click event within the grid to get that row's data when it is clicked.  Due to my grid data coming from JSON, my command field's click event in my column array is stored as a string value. 

In JSON, my command field looks as follows:

                                      "command": [
                                        {
                                          "name": "Select",
                                          "click": "testFunction();"
                                        }
                                      ]

When the button is clicked in the grid, I am given the following Console error:

jquery-2.1.4.min.js:3 Uncaught TypeError: ((n.event.special[g.origType] || (intermediate value)).handle || g.handler).apply is not a function(…)

I have attempted to pass in testFunction as "eval(testFunction() );" and even attempted to recreate my column data with a New Function object instead of the string, however I could not get the column array to play nice with Kendo and consistently received e.chartAt errors when the grid attempted to parse.  I used the following demo to create my column data dynamically:

http://jsbin.com/iharik/6/edit?html,js,output

I really would like to simply specify my function call from the JSON data.  I have also thought about finding the Click event from within Kendo UI and attempting to parse my string there as well.  I can't think of any other ways to get this to function from JSON data.

Hello,
We would like to know how to configure kendo for a given model binder to be the last of all the binders executed when a property is bound to multiple custom binders ?

E.g.:

<div data-bind="customBinder1:someAction, enabled:someOtherAction, customBinder2:anotherAction, value:someProperty"></div>

How to ensure customBinder2 will ALWAYS be the last one to refresh the dom element state ?

Regards,

We are using a helper for our grid throughout our application.  We are using Gridbuilder<T>.  How would I go about making all grids that use this helper have locked(frozen) command columns?