I've created a dojo here to demonstrate my question.

http://dojo.telerik.com/ikArE

When creating a set of functions under schema, model for a datasource and then refereing to them like "field: 'Functionname()'" in the columns for the grid, it appears to load correctly, but attempting to sort on by clicking the column header results in "d.Functionname" is not a function error.

Is this not supported or is there something else wrong?

Hi,

Whenever I try to use custom task template, the drag-handle automatically disappears, please help

Hi All,

I am using kendo grid row template where i have to add dynamic div based on the text.

Below is my code:

<script id="altRowTemplate" type="text/x-kendo-tmpl">

    <tr class="k-alt" data-uid="#: uid #">

       <td style="width:100%">

                  <div class="col-sm-1">
                         <img src="@Url.Content("~/Content/Images/#: OwnerImage#")" class="img-responsive" style="width:80px; height:50px" alt="1" />
                    </div>

                   <div id="Category">

                          #:changeTemplate(Category)#

                  </div>

         </td>

   </tr>

</script>

for the category in first row value is c# and second row value is: c#, Asp.Net, AngularJs

for change template below is the script function used.

function changeTemplate(category) {var splitCategory = category;var setCategorySpan = '';if (splitCategory.indexOf(',') !== -1) { splitCategory = category.split(',');for (var i = 0; i < splitCategory.length; i++) {var setcolID = 2;// Trim the excess whitespace. splitCategory[i] = splitCategory[i].replace(/^\s*/, "").replace(/\s*$/, "");// Add additional code here, such as: setCategorySpan += "<div class='col-sm-" + setcolID + "'><span class='tags' style='font-family:arial; font-size:small'>" + splitCategory[i] + "</span></div>"; setcolID+=2;} $("#dvCategory").append(setCategorySpan);}else { setCategorySpan = "<div class='col-sm-12'><span class='tags' style='font-family:arial; font-size:small'>" + splitCategory + "</span></div>"; $("#dvCategory").append(setCategorySpan);}}

in this function i am checking if value is seprated by comma then split one by one value and add in span tag and that tag should append in div.

i have checked through debug if i am directly appending value to div so this div is no more there, for that purpose i am creating this div in document ready function only:

var container = document.createElement('div'); container.setAttribute('id', 'dvCategory'); container.setAttribute('class', 'row');

if i am using here $('body').append(container);

value is showing but out of grid.

can i get help to set div on the same position where category is there?

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