Questions on Kendo UI for jQuery Forum

3 answers

467 views

How to display additional Data in Header Template?

Here is my html for the my list view:

<ul id="best-in-klas-products-list-view"></ul>

I have the following Header Template:

<script id="best-in-klas-products-header-template" type="text/x-kendo-template">
# if ( klas.bestInKlasProductsViewModel.checkForBestInKlas(value) ) { #
<div class="list-view-group-header">
<div class="group-header-table-container">
<div><img src="images/best-in-klas.svg" class="best-in-class-logo" /></div>
<div>
<div class="market-segment-title">#: klas.marketSegmentName #</div>
<div class="award-title">Best in KLAS</div>
</div>
</div>
</div>
# } else { #
<div class="list-view-group-header">
<div class="group-header-table-container">
<div><img src="images/category-leader.svg" class="best-in-class-logo" /></div>
<div>
<div class="market-segment-title">#: klas.marketSegmentName #</div>
<div class="award-title">Category Leaders</div>
</div>
</div>
</div>
# } #
</script>

This is my script for the list view:

$('#best-in-klas-products-list-view').kendoMobileListView({
headerTemplate: $('#best-in-klas-products-header-template').text(),
template: $('#best-in-klas-products-template').text(),
dataSource: new kendo.data.DataSource({
type: 'json',
transport: {
read: url
},
group: {
field: 'groupByField', dir: "desc"
},
sort: [
{ field: "ranking", dir: "asc" }
]}),
filterable: false,
click: function (e) {
...
}
});

The Code is simple clean, I Love it. My problem is that I need to display additional in my header template. We have additional award categories I need to display additional information in the header template. What's the best way to accomplish this? Any help would be greatly appreciated.

ListView (Mobile)

answered on 10 Feb 2014

3 answers

101 views

Panelbar blowing up the HTML page when div has a grid

when you click on the section2, the whole HTML layout is blown apart. the actual behaviour on the page with splitter is quite worse.
this only happens when
<div id="orgSchlDgExmSchdl" style="min-height:400px;"></div>
and it is not instantiates/initialized into actual grid object, the proble also does not occur when div tag is initialized into grid object.

<head>
<script type="text/javascript">
$(document).ready(function () {
//collapsible management
$("#panelbar").kendoPanelBar({
//expandMode: "single"
});
});
</script>

</head>
<body>
<ul id="panelbar">
<li class="k-state-active">
<span> Section1 </span>
<div>
Elements under section one
</div>
</li>
<li>

<span>Data Entry Grid</span>
<div id="orgSchlDgExmSchdl" style="min-height:400px;"></div>
</li>
</ul> 

</body>
</html>

PanelBar

answered on 10 Feb 2014

2 answers

308 views

Basic grid datasource in webform Web Services problem

Hi,

I’m testing kendo grid and trying to get it to read from asp.net WebMethod in a webform. I’ve tried many options in the code but nothing works. How can I return the correct json format for the grid to use?

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string GetSomthing() {

// [{"ProductID":1,"ProductName":"Test Product"}]

}

I have the following script in the aspx page:

<script src="http://cdn.kendostatic.com/2013.3.1324/js/jquery.min.js"></script>
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.web.min.js"></script>

<div id="example" class="k-content">
<div id="grid"> </div>
<script>

$(document).ready(function () {

$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "KendoTest.aspx/GetSomthing",
dataType: "json",
type: "POST",
data: {}
}

},
schema: {
data: "d",
model: {
id: "ProductID",
fields: {
ProductID: { editable: true, type: "number" },
ProductName: { editable: true, type: "string" }
}
}
}
},
height: 250,
columns: [{
field: "ProductID"
}, {
field: "ProductName"
}]
});
});

</script>
</div>

Thanks.

Grid

answered on 09 Feb 2014

4 answers

399 views

Post data into db from multiselect

Hi!
I have 2 datasources: for multiselect and for dropdownlist, and 1 datasource for insert data into db from multiselect and dropdownlist.
But as result i have new record in database: id_client: blank and id_board: (needed value).
When i do "alert(required.value() + optional.value() )" i getting needed values. Why is blank posted data in field "id_client"?

var required = $("#multiclients").data("kendoMultiSelect");<br> var optional = $("#ddrecord").data("kendoDropDownList");<br><br><br> $("#mrecord").click(function() {<br> alert(required.value() + optional.value() );<br> var

dataa = {id_client: required.value(), id_board: optional.value()};<br>        dataSR.add(dataa);<br>         dataSR.sync();<br>  });

MultiSelect

answered on 09 Feb 2014

0 answers

131 views

Grid Batch Editing with Virtual Scrolling

**** I WAS INCORRECT IN MY ASSUMPTION THAT DATA WAS LOST WHILE SCROLLING. PLEASE DISCARD THIS POST.

I have a grid in cell editing mode with virtual scrolling with a dataSource using batch updates. When the virtual scrolling requires new data to be fetched from the server, any unsaved changes to the current data are lost. That makes sense because the dataSource is only maintaining a portion of the total data at any given scroll position.

I would like to present the use with a message like "You need to save changes before scrolling any more..." and give them the opportunity to either save or cancel the existing changes or simply stop the scrolling until the either save or cancel.

I tried binding to the requestStart event that is triggered by the dataSource's undocumented prefetch method that is called while virtual scrolling. I can prevent the new data from being fetched by calling event.preventDefault() in the handler but the grid is left in a disabled state via a kendo progress indicator that was initiated somewhere along the way.

The relevant code in kendo-ui that I've been examining include VirtualScrollable._scroll() and DataSource.prefetch().

Q: Is there a more elegant way of doing this? I know I could use paging and have more control but virtual scrolling is just much cooler IMO.

Thanks

Grid

asked on 09 Feb 2014

9 answers

3.6K+ views

[Solved] Disabled/ReadOnly CSS

I have a requirement to disable the ComboBox under certain conditions (or make readOnly). Part of the requirement is the appearance of the ComboBox; the dispaly area must have a light Grey background and the Text must be black. However, while I can make the background lightgray, nothing I do works for setting the text to Black.

I also have the same problem with DatePicker widgets.

So how do I go about keeping the text color black when the a widget is disabled?

ComboBox

answered on 08 Feb 2014

3 answers

287 views

ap..navigate finish event?

Hi,

we want to change the title in navbar according to some global variables.
after navigating to another application page via app.navigate('ksettings.html') it's not possible to call title method of the navbar, eg.

$("#photonavbar").data("kendoMobileNavBar").title( g_models.ParamsVM.valSpecNames.join(' ' ) );

because $("#photonavbar").data("kendoMobileNavBar") is undefined.
Event indicating all kendo structures are initiated would be usefull.

How to track that page was succesfully navigated and all kendo structures are instantiated?

Thanks in advance

Application

answered on 07 Feb 2014

5 answers

190 views

Error in columns.ForeignKey

Hi, I have the following problem, and I do not know how to solve:

Error de servidor en la aplicación '/'. El valor no puede ser nulo.
Nombre del parámetro: items Descripción: Excepción no controlada al ejecutar la solicitud Web actual. Revise el seguimiento de la pila para obtener más información acerca del error y dónde se originó en el código.

Detalles de la excepción: System.ArgumentNullException: El valor no puede ser nulo.
Nombre del parámetro: items

Error de código fuente:

Línea 37: columns.ForeignKey(pozos => pozos.IdCatPlataforma, (IEnumerable<KendoGridAjaxEditing.Models.CatPlataforma>)ViewData["CatPlataforma"], dataFieldValue: "Id", dataFieldText: "Nombre");
Línea 38: columns.Bound(pozos => pozos.Descripcion).Width(250);
Línea 39: columns.Command(commands =>
Archivo de origen: c:\Users\GMayaS\Documents\Visual Studio 2013\Projects\KendoGridAjaxEditing\KendoGridAjaxEditing\Views\Home\Index.cshtml Línea: 37

Seguimiento de la pila:

[ArgumentNullException: El valor no puede ser nulo.
Nombre del parámetro: items]
System.Web.Mvc.MultiSelectList..ctor(IEnumerable items, String dataValueField, String dataTextField, IEnumerable selectedValues) +361238
System.Web.Mvc.SelectList..ctor(IEnumerable items, String dataValueField, String dataTextField) +19
Kendo.Mvc.UI.Fluent.GridColumnFactory`1.ForeignKey(Expression`1 expression, IEnumerable data, String dataFieldValue, String dataFieldText) +69
ASP._Page_Views_Home_Index_cshtml.<Execute>b__11(GridColumnFactory`1 columns) in c:\Users\GMayaS\Documents\Visual Studio 2013\Projects\KendoGridAjaxEditing\KendoGridAjaxEditing\Views\Home\Index.cshtml:37
Kendo.Mvc.UI.Fluent.GridBuilder`1.Columns(Action`1 configurator) +144
ASP._Page_Views_Home_Index_cshtml.Execute() in c:\Users\GMayaS\Documents\Visual Studio 2013\Projects\KendoGridAjaxEditing\KendoGridAjaxEditing\Views\Home\Index.cshtml:27
System.Web.WebPages.WebPageBase.ExecutePageHierarchy() +197
System.Web.Mvc.WebViewPage.ExecutePageHierarchy() +97
System.Web.WebPages.StartPage.RunPage() +17
System.Web.WebPages.StartPage.ExecutePageHierarchy() +62
System.Web.WebPages.WebPageBase.ExecutePageHierarchy(WebPageContext pageContext, TextWriter writer, WebPageRenderingBase startPage) +76
System.Web.Mvc.RazorView.RenderView(ViewContext viewContext, TextWriter writer, Object instance) +260
System.Web.Mvc.BuildManagerCompiledView.Render(ViewContext viewContext, TextWriter writer) +115
System.Web.Mvc.ViewResultBase.ExecuteResult(ControllerContext context) +295
System.Web.Mvc.ControllerActionInvoker.InvokeActionResult(ControllerContext controllerContext, ActionResult actionResult) +13
System.Web.Mvc.<>c__DisplayClass1a.<InvokeActionResultWithFilters>b__17() +23
System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +242
System.Web.Mvc.<>c__DisplayClass1c.<InvokeActionResultWithFilters>b__19() +21
System.Web.Mvc.ControllerActionInvoker.InvokeActionResultWithFilters(ControllerContext controllerContext, IList`1 filters, ActionResult actionResult) +177
System.Web.Mvc.Async.<>c__DisplayClass2a.<BeginInvokeAction>b__20() +89
System.Web.Mvc.Async.<>c__DisplayClass25.<BeginInvokeAction>b__22(IAsyncResult asyncResult) +102
System.Web.Mvc.Async.WrappedAsyncResult`1.End() +57
System.Web.Mvc.Async.AsyncControllerActionInvoker.EndInvokeAction(IAsyncResult asyncResult) +43
System.Web.Mvc.<>c__DisplayClass1d.<BeginExecuteCore>b__18(IAsyncResult asyncResult) +14
System.Web.Mvc.Async.<>c__DisplayClass4.<MakeVoidDelegate>b__3(IAsyncResult ar) +23
System.Web.Mvc.Async.WrappedAsyncResult`1.End() +62
System.Web.Mvc.Controller.EndExecuteCore(IAsyncResult asyncResult) +57
System.Web.Mvc.Async.<>c__DisplayClass4.<MakeVoidDelegate>b__3(IAsyncResult ar) +23
System.Web.Mvc.Async.WrappedAsyncResult`1.End() +62
System.Web.Mvc.Controller.EndExecute(IAsyncResult asyncResult) +47
System.Web.Mvc.Controller.System.Web.Mvc.Async.IAsyncController.EndExecute(IAsyncResult asyncResult) +10
System.Web.Mvc.<>c__DisplayClass8.<BeginProcessRequest>b__3(IAsyncResult asyncResult) +25
System.Web.Mvc.Async.<>c__DisplayClass4.<MakeVoidDelegate>b__3(IAsyncResult ar) +23
System.Web.Mvc.Async.WrappedAsyncResult`1.End() +62
System.Web.Mvc.MvcHandler.EndProcessRequest(IAsyncResult asyncResult) +47
System.Web.Mvc.MvcHandler.System.Web.IHttpAsyncHandler.EndProcessRequest(IAsyncResult result) +9
System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +9514812
System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +155

Información de versión: Versión de Microsoft .NET Framework:4.0.30319; Versión ASP.NET:4.0.30319.18408

Grid

answered on 07 Feb 2014

1 answer

218 views

Dynamically added control not rendering correctly

Scenario:

Kendo control is in a partial view.

Page loads to homepage, no kendo control.

User clicks to view that has a kendo control, we pull that partial view down and inject it into the container.

Some kendo controls do not load at all (calender), and in the scheduler's case, does not render the scheduled events.

I've tried using the deferred feature then calling Kendo().DeferredScripts(), but that only results in the scheduler not rendering at all.

The grid renders fine when dynamically injected, however.

The deferred feature documentation says the default functionality is for the control's initialization scripts to fire immediately after the control is rendered. If this is the case then injecting a partial view with kendo controls within should not be a problem.

However, all of the controls that I've tested work fine when they are rendered during page load, but only the grid works as expected when injected after page load.

Scheduler

answered on 07 Feb 2014

2 answers

151 views

How to Constrain the Pinch and Zoom?

I'm using a Kendo Mobile View and I've set the data-zoom attribute to true ("data-zoom = true") so that my view can Pinch and Zoom.

Is there an attribute or css style that I can set to limit the size in which the Pinch and Zoom resizes the contents? I want to set a max and min size.

I want to make my view so that it can zoom in but I want to constrain the view so that it doesn't get smaller than 100% of the viewport width. I like to set the min-width equal to the viewport width in some way. How do you do this?

Any help would be greatly appreciated.

General Discussions

answered on 07 Feb 2014