I am evaluating Kendo UI Grid trial version to replace a third party grid control being used in one existing web forms application.
Environment : ASP.NET Web Forms Application (NOT MVC) (.NET Framework 4.5, upgraded from .NET Framework 2.0), Oracle 11g.
Browser : IE 11.
I am trying to implement Virtual scrolling with Remote data.
But it is not working. Data is only visible up to the height of the grid. Scroll bar is not appearing.
Setting
serverPaging: true,
serverSorting: true
does not show any data.

Could anyone tell me where I am going wrong ?
The server side function GetData() invokes database stored procedure which returns all data. It will not be possible to implement paging in the store procedures as there are a very large number of different grids aka stored procedures. If this is the cause of Virtual Scrolling not working, please suggest me the work around.

Sample code is as follows:

 

Hello,

We have a donu chart we draw with the kendo ui vue chart and it looks good. We place it in a small html iframe as you can see in the attached screen shot.
The chart is using 100% of the (small) frame size. As you can see in the attached screen shot, it is not vertically aligned. Since the generated svg occupies 100% of the area I assume it is something in the seriesDefaults to tweak for it to be vertically centered. But I could not find how to do it. Please advise.


Thanks,

Ron.

Hi there,

On tab drag i want to update a field in the datasource.  But as soon as datasource sync is called an "Index of undefined" error is received.  This is the sortable section of the tabstrip:

var configureSortable = function () {
            $("#tabstrip ul.k-tabstrip-items").kendoSortable({
                filter: "li.k-item",
                axis: "x",
                container: "ul.k-tabstrip-items",
                hint: function (element) {
                    return $("<div id='hint' class='k-widget k-header k-tabstrip'><ul class='k-tabstrip-items k-reset'><li class='k-item k-state-active k-tab-on-top'>" + element.html() + "</li></ul></div>");
                },
                start: function (e) {
                    tabstrip.activateTab(e.item);
                },
                change: function (e) {
                    var tabstrip = $("#tabstrip").data("kendoTabStrip"),
                        reference = tabstrip.tabGroup.children().eq(e.newIndex);

                    if (e.oldIndex < e.newIndex) {
                        tabstrip.insertAfter(e.item, reference);
                    } else {
                        tabstrip.insertBefore(e.item, reference);
                    }
                },
                move: function(e) {
                    //NOTE: the heading element will be excluded from the
                    //collection as it does not match the filter
                    //e.preventDefault();
                    //shows the original position of the item
                    var originalPos = this.indexOf(e.item);
                    console.log("index of item", originalPos);
                    //shows the position where item will be moved to
                    var newPos = this.indexOf(this.placeholder);
                    console.log("index of placeholder", newPos);
                    //var item = tabStrip.dataSource.at(originalPos);
                    //console.log(item.id + item.pos + item.name + item.status + newPos);
                    //item.set("pos", newPos);
                    //tabStrip.dataSource.sync();
                    var tabstrip = $("#tabstrip").data("kendoTabStrip");
//this gives me a null
                    //var dataItem = tabstrip.dataSource.get(e.item.data("id"));
                    var dataItem = tabstrip.dataSource.at(originalPos);
     //i tried this as well
                    //tabstrip.dataSource.remove(dataItem);
                    //tabstrip.dataSource.insert(newPos, dataItem);
                    dataItem.set("pos", newPos);
                    tabstrip.dataSource.sync();
                }
            });
        };

I was wondering if there was a way to get the refresh button to show up without having paging turned on.  I have a grid with virtual scrolling, so I want paging turned off.  But I also want to have the refresh button available on the bottom-right of the grid.  It looks like the only way to allow this is to turn paging on.  Is this correct or is there another way to get the refresh button to show up?  Thanks!

Regards,
Brian

I am seeing VERY strange behavior using a kendoValidtor with a listView. The listview is a table and each line looks like this:

 

 

 

As you can see the optionDesc field is a mandatory field and I have defined a validationMessage when it is empty.

However when I test it I see the following results (see 2020-03-29_1045.png)

As you can see the error message appears nexts ALL the optionDesc fields and not just the one that is missing.

So I thought I would try a different approach with the optionPrice field (also required). so I added a k-invalid-msg right next to the field in the same <tr> and <td >as the input. 

However it also behaves incorrectly and even MORE strangely. Basically the error message is displayed in the correct spot the first time. After that if any other field in another row is blank the error message is displayed in the original place and NOT next to the empty field. See image 2020-03-29_1049.png as an example. The field in row 3 is missing but the error message is showing in row 1 where it was previously missing.

Anyone have ideas/suggestions?

Alon

 

 

 

 

Is there a configuration setting or sample code for entering currency amounts in ATM style ?

For example

I am just starting to use the Telerik kendo grid so not sure if I left something out

We have an MVC project and are using razr views.  I have a Kendo grid displaying the results of a dynamic SQL query which doesn't allow for sorting or filtering.   Are these attributes inherent in the grid or am I missing something?

My grid:

@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
  columns.Bound(column.ColumnName).Groupable(true).Sortable(true).Filterable(true);
}
})
.Sortable(sortable => sortable.AllowUnsort(false))
.Scrollable()
.Filterable()
.Groupable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
if (column.ColumnName.Contains("-"))
{
column.ColumnName = column.ColumnName.Replace("-", "");
}
model.Field( column.ColumnName , column.DataType);
}
})
.Read(read => read.Action("ReadData", "Grid"))
)
)

My data source:

public ActionResult ReadData([DataSourceRequest] DataSourceRequest request, int id)
{
DataTable queryResults = QueryResults(id);
return Json(queryResults.ToDataSourceResult(request), "text/html", System.Text.Encoding.Unicode, JsonRequestBehavior.AllowGet);
}

private DataTable QueryResults(int id)

{

String queryString = (from a in _qryList where a.Id == id select a.Sql).First() ;
var dataTable = new DataTable();
try
{
var dataAdapter = new SqlDataAdapter(queryString, connection);
dataAdapter.Fill(dataTable);
}
catch (SqlException e)
{
ViewBag.TextareaHTML = "Your SQL Query is invalid.\r"+e.Message;
}
return dataTable;

}

Thanks

Hi,

The TypeScript definitions for the View are incomplete.

Kind Regards,

Marco

 

 

 

 

 

 

Hi,

I am using the popup editing feature of the grid. Now I need to put some validation in. I was able to figure out how to validate the string field but can't figure out how to validate the date fields since I am usingt the DateTimePicker on the popup window (code at bottom).
I would like to validate that the days are greeater than today and that EndDate > StartDate for example.

Thanks in advance.

jennifer

Hello,

First let me start by saying thanks for your previous help on these forums...they got me past a blocking issue and everything is working now...so there's the good news.

The bad news is that even though everything is working...there are some visual glitches that I can't figure out.  The worst of those being whenever I add a new row into my grid...on this particular example I have 2 DropDownLists for selecting the values to add in for the new row.  They function perfectly, but once I select a value and move onto the next column...the DropDownList and the selected value for it disappears...the value is still there in the new row, because when I click Save and look at the Controller Action, everything is coming across perfectly and the data is added into the database with no problems...also after I click save...the columns show the values as they should...the DropDownLists are disappearing only when adding a new row.  I've attached some pictures for reference and I'll include code snippets for my grid and dropdownlist.

 In the attached pictures...notice that the columns have the little red triangle in the upper left to note that there's a new value contained...but how when I move onto the next column the DropDownList and it's selected value are hidden...

Grid View:

FeatureDefectDropDownListTemplate:

 

ServerSwitchTestStatusDropDownListTemplate:

 

The controllers are all working perfectly so I don't think I need to include those source files, but I will gladly do it if requested. They all pass back Model objects as Json via ActionResults. Pretty standard stuff.