Questions on Kendo UI for jQuery Forum

2 answers

188 views

Hi!

We just decided to upgrade our projects from Telerik grid to Kendo, but this has become a major issue for us, since we have a very deep integration. When we want to show a Grid, we use our own ViewHelper class. This class would modify a Telerik Grid to the way we like.

For instance Grids created this way could have a specific DataAnnotation on each of the models property, that specified:

Alternative columnname
If the column is hidden or not
Specific datetime format
Wheather or not to summarize this column
MANY other options

Also, there are many extensions to the Grid itself, like:

Should the grid have an Export button, for Excel export
Should the grid have vertical scrollbars
Should the grid have text areas over each column for filtering.

We hook on most of the Grids events, to run scrips before the ones provided in the ClientEvents setting.

We have hundreds of Grids created this way, and it makes it easy to maintain since all Grids are defined by their model. To do this, we created Grids like this in the View:

<%=ViewHelper.CreateGridFromType<OverviewTopFiveModel>(this)

.Name("DailyTopFive")

.DataBinding(dataBinding => dataBinding.Ajax()

.Select("AjaxDailyTopFive", "Home"))

.Filterable()

.Sortable()

.ScrollBars(false)

%>

And CreateGridFromType would look like this:

public static GridBuilder<TModel> CreateGridFromType<TModel>(ViewPage page) where TModel : class

{

// create the custom grid

var component = (page.ViewContext.HttpContext.Items[StyleSheetRegistrar.Key] as StyleSheetRegistrar) ?? new StyleSheetRegistrar(new

WebAssetCollection(WebAssetDefaultSettings.StyleSheetFilesPath), page.ViewContext, DI.Current.Resolve<IWebAssetCollectionResolver>());

var scriptWrapper = DI.Current.Resolve<ScriptWrapperBase>();

var registrar2 = (page.ViewContext.HttpContext.Items[ScriptRegistrar.Key] as ScriptRegistrar) ?? new ScriptRegistrar(new WebAssetCollection(WebAssetDefaultSettings.ScriptFilesPath), new List<IScriptableComponent>(), page.ViewContext, DI.Current.Resolve<IWebAssetCollectionResolver>(), scriptWrapper);

var test = new

CustomViewComponentFactory(page.Html, DI.Current.Resolve<IClientSideObjectWriterFactory>(), ComponentBuilderBase<StyleSheetRegistrar, StyleSheetRegistrarBuilder>.Create(component), ComponentBuilderBase<ScriptRegistrar, ScriptRegistrarBuilder>.Create(registrar2));

var cGrid = test.Grid<TModel>();

var grid = new GridBuilder<TModel>(cGrid);

// create the columns

grid.Columns(CreateGridColumnsFromType(grid));

// hook internal events

grid.ClientEvents(e => e.OnLoad("onInternalGridLoad"));

grid.ClientEvents(e => e.OnDataBinding("onInternalGridDataBinding"));

grid.ClientEvents(e => e.OnDataBound("onInternalGridDataBound"));

grid.ClientEvents(e => e.OnDetailViewExpand("onInternalGridDetailViewExpand"));

grid.ClientEvents(e => e.OnDetailViewCollapse("onInternalGridDetailViewCollapse"));

grid.ClientEvents(e => e.OnRowDataBound("onInternalRowDataBound"));

grid.ClientEvents(e => e.OnCommand("onInternalGridCommand"));

return grid;

}

With the upgrade to Kendo, everything has changed. How on earth can we get a hold on the Grid in our ViewHelper? We need to preserve the settings made in the view, like the url to the DataSource and additional Columns. It is not good enough to just create a new Grid from scratch. It has to extend the Grid defined in the View. I hope you have some solution to our problem, since this way of creating Grids is crucial for us.

If i have not explained myself good enough, please let me know. Also, i can provide sample files - but i think the code provided explains most.

Grid

answered on 08 Apr 2013

1 answer

97 views

listview data-click doesn't fire

hi
the data-click event of listview does not firing
the list view inside the modal view

<div data-role="modalview" id="modalview-folder" style="width:95%;height:140px;">

<ul data-role="listview" style="cursor:pointer;" data-click="folderOptionsClick" >
<li data-operation="capture" >Capture</li>
<li data-operation="upload" >Upload</li>
<li data-operation="cancel" >Cancel</li>
</ul>

</div>

function folderOptionsClick(e) {
var operation = e.dataItem.operation;
console.log(operation);
if (operation == "capture") {
}
else if (operation == "upload") {
}
else if (operation == "cancel") {
$("#modalview-folder").kendoMobileModalView("close");
}
}

General Discussions

answered on 08 Apr 2013

10 answers

220 views

IE8 - MVC Grouping = 'length' is null or not an object

I'm using the Kendo UI Grid with AJAX binding using the MVC HTML helper and the IQueryable<T>.ToDataSourceResult extension.

Unfortunately in IE8 I am getting a 'length' is null or not an object javascript error.

Everything works fine in Chrome. So it is an IE8 compatibility issue. Any suggestions?

Controller:

TimeZoneCollection timeZones = new TimeZoneCollection(this.AppSettings);
timeZones.Load();
 
List<TimeZoneListModel> models = Mapper.Map<TimeZoneCollection, List<TimeZoneListModel>>(timeZones);
IQueryable<TimeZoneListModel> dataSource = models.AsQueryable();
 
return Json(dataSource.ToDataSourceResult(request));

View:

@(Html.Kendo().Grid<Shmiffer.Web.Areas.Admin.Models.TimeZoneListModel>()    
    .Name("grdTimeZones")
    .Groupable(grouping => grouping
        .Enabled(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Index", "TimeZones"))
        .Sort(sort => sort.Add(tz => tz.TimeZoneId).Ascending())
        .PageSize(10)
        .Group(group => group.Add(tz => tz.SupportsDaylightSavingTime)))
    .Filterable(filtering => filtering
        .Enabled(true))
    .Pageable(paging => paging
        .Enabled(true)
        .Info(true)
        .PageSizes(false)
        .Refresh(true))
    .Scrollable(scrolling => scrolling
        .Enabled(false)
        .Height(200)
        .Virtual(true))
    .Sortable(sorting => sorting
        .Enabled(true)
        .AllowUnsort(false)
        .SortMode(GridSortMode.SingleColumn))
)

Grid

answered on 08 Apr 2013

4 answers

595 views

Kendo ui inline grid Missing line border

Hi Guys,

I am having an issue where inline editing grid line border is missing in IE 7 if the date field is empty. Please advise

THank you

Grid

answered on 08 Apr 2013

6 answers

56 views

Bug fix: "Widget does not select correct item if optionLabel is defined"

In release 2012.3.1511, you state that the following fix was made for dropdown list:
"Widget does not select correct item if optionLabel is defined"

I think this is related to a problem I have. You please give some clarification and simple scenario that this fixes? Thanks.

DropDownList

answered on 08 Apr 2013

1 answer

145 views

Multiple tooltips when mousing about

I have a Kendo tooltips bound to the tabs of a Kendo tabstrip. When mousing over the tabs, occassionally, I get multiple tabs displayed e.g. they don't clear. See screen grab snippet attached.

ToolTip

answered on 08 Apr 2013

3 answers

1.6K+ views

KendoGrid command click event triggered multiple times

I have a Kendo grid presented in a mobal window (kendoWindow). The grid has a column command with a click event:
$("#grid").kendoGrid({
...
columns:[
...
{ command: { text: "Details", click: showDetails }, width: "60px" }],
}];

The first time I open the window everything works fine, each time i click on a Details button on a row the showDetails method is called.
However, after closing the windows and opening it again, the event is fired twice. In fact as many times as I've opened the modal window.

Is there a way to unregister the event handler on the grid?

Grid

answered on 08 Apr 2013

4 answers

184 views

Page numbers are vertical?

This is odd.. So my grid seems to be working, but the page numbers are being shown vertically.. not horizontally . Am I missing something?

TTAIA

Grid

answered on 05 Apr 2013

0 answers

213 views

Razor Grid ClientRowTemplate using an IEnumerable

Hey,

I am developing a grid that takes in a model, but inside the model the variable it needs is an IEnumerable.

We have controllers filling this IEnumerable and it works without the ClientRowTemplate and the DataSource that we have on it, but the second we add both of those elements in, it stops working, it is blank, and does not show any errors.

Here is the code:

@model NS.Quoting.Models.ViewModels.QuoteLineGridViewModel

@(Html.Kendo().Grid(Model.QuoteLines)

.Name("QuotesGrid")

.Columns(columns => {

columns.Bound(c => c.LineNumber).Filterable(false).Width(60).Title("Line #");

columns.Bound(c => c.ItemNumber).Title("Material #");

columns.Bound(c => c.ItemDescription).Title("Material Name");

columns.Bound(c => c.Quantity).Filterable(false).Width(70).Title("Quantity");

columns.Bound(c => c.SalePrice).Filterable(false).Width(81).Title("Quoted Price");

columns.Bound(c => c.LinePrice).Filterable(false).Width(60).Title("Extended Price");

columns.Bound(c => c.MarginPercent).Filterable(false).Width(60).Title("Margin %");

})

.ClientRowTemplate(

"<tr>" +

"<td class='line'>" +

"<span class='linenumber'> #: LineNumber # </span>" +

"</td>" +

"<td class='materialNum'>" +

"<span class='itemnumber'> #: ItemNumber # </span>" +

"</td>" +

"<td class='materialName'>" +

"<span class='itemdescription'> #: ItemDescription # </span>" +

"</td>" +

"<td class='QTY'>" +

"<span class='quantity'> #: Quantity # </span>" +

"</td>" +

"<td class='quotedPrice'>" +

"<span class='saleprice'> #: SalePrice # </span>" +

"</td>" +

"<td class='extendedPrice'>" +

"<span class='lineprice'> #: LinePrice # </span>" +

"</td>" +

"<td class='marginPerc'>" +

"<span class='marginpercent'> #: MarginPercent # </span>" +

"</td>" +

"</tr>"

)

.DataSource(dataSource => dataSource

.Ajax().ServerOperation(false)

)

.Pageable(pager => pager.PageSizes(new int[]{10,25,50}))

.Scrollable()

.Sortable()

.Filterable()

)

Here is the call TWO CALLS to get the PartialView when the View is built:

<div id="itemGrids">

<h3>Active Items</h3>

<div id="newAct">

@Html.Action("GetGrid", "Quote", new { id = Model.Quote.QuoteNumber, isActive = true })

</div>

<h3>Inctive Items</h3>

<div id="newDe">

@Html.Action("GetGrid", "Quote", new { id = Model.Quote.QuoteNumber, isActive = false })

</div>

The IEnumerable in the QuoteLineGridViewModel is this:

public IEnumerable<QuoteLineSummary> QuoteLines { get; set; }

Here is the Controller method to fill the IEnumerable:

public PartialViewResult GetGrid(int id, bool isActive)

{

QuoteLineGridViewModel model = new QuoteLineGridViewModel();

using (var client = new HttpClient())

{

// URL: /api/QuoteLine/GetByQuoteNumber/1

var lineUrl = Url.RouteUrl(

"ActionApi",

new { httproute = "", controller = "QuoteLine", action = "GetSummaryByQuoteNumber", id = id, isActive = isActive },

Request.Url.Scheme

);

model.QuoteLines = client

.GetAsync(lineUrl)

.Result

.Content.ReadAsAsync<IEnumerable<QuoteLineSummary>>().Result;

}

return PartialView("_QuoteLineGrid", model);

}

Our theory is that it is not getting the current item in the IEnumerable, but we are not completely sure on why it doesn't work.

We tried going through the API/Documentation to see if a RowTemplate would be better, but we did not find much on this topic for the KendoUI.

The reason we are doing it this way is because we want to eventually be able to change the way a row displays using conditional statements.

Please let me know if you need more information or clarification for what is going on and what the end result is.

Grid