Questions on Kendo UI for jQuery Forum

1 answer

836 views

I have a KendoUI Window which is not behaving itself when I am using it inside another JQuery framework.
I am trying to set the window title colour and the maximise and close icons to the top right, but I cannot figure out the CSS settings to do this.
I attach an image showing what I have now and what I am trying to achieve.
I was given these settings a few months ago but they appear to be having little effect:
/* Override our KendoUI popup window */
/*
.k-window-titlebar
{
    background-color: pink;
    color: red;
    font-weight: bold;
    padding: 0px;
}
*/

.k-header {
    margin-top: 0px;
    padding: 0px;
}

.k-window-title {
    background-color: #275CAB;
    color: white;
    font-weight: bold;
    padding: 3px;
}

/* Allow centering of the table content in the popup window */
.k-window-content > .km-scroll-container
{
   height:100%;
    padding: 30px;
}

.k-window-titlebar .k-window-action
{
    background: none;
    border-width: 200px;
    background-color: #275CAB;
}
Your help is most appreciated?

Kind Regards, Garry.

Window

answered on 02 Sep 2013

3 answers

98 views

Style for the .Formatting() option not applied when opened in window control

When an editor control is loaded in a window control, the .Formatting() component on the editor does not render the expected styles for each of the options in the drop down list.

This is occurring with the latest build 2013.2.823.

It seems to be adding the below inline style to each of the list items in the dropdown. This has been happening for the last few builds but i got around it by having a mismatch of different version JS files which was less than ideal as it breaks other things.

color: rgb(51,51,51); padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-color: rgb(51,51,51); border-right-color: rgb(51,51,51); border-bottom-color: rgb(51,51,51); border-left-color: rgb(51,51,51); border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; display: block; background-image: none; background-attachment: scroll; background-repeat: repeat; background-position-x: 0%; background-position-y: 0%; background-color: transparent;

I have attached a screenshot to show this.

Editor

answered on 02 Sep 2013

1 answer

101 views

GroupBy functionality not working correctly with ClientRowTemplate

Hello,
I am trying to implement a grid that uses a ClientRowTemplate and also has GroupBy functionality. The grid renders fine and all other behaviors act appropriately except the GroupBy, when a column is selected to GroupBy the column headers act strangely and an additional column is inserted and the widths are changed as well. If I remove the ClientRowTemplate everything works great. I am new to Kendo so please let me know if my implementation is wrong or could be better code is below:

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

.Name("Grid")

.HtmlAttributes(new { style = "height:450px;font-size:.85em;" })

.Columns(columns =>

{

columns.Template(e => { }).ClientTemplate(" ").Width(30).HtmlAttributes(new { style="vertical-align: middle; text-align: center" });

columns.Bound(p => p.Id).Width(60);

columns.Bound(p => p.Title).Width(250);

columns.Bound(p => p.AssignedUser).Width(120);

columns.Bound(p => p.Status);

columns.Bound(p => p.Priority);

columns.Bound(p => p.Category);

columns.Bound(p => p.Tier);

columns.Bound(p => p.LastModifiedAsString).Title("Last Modified").Width(120);

})

.ClientRowTemplate(

"<tr>" +

"<td>" +

"<img style ='margin-top:5px;' src='" + Url.Content("~/Images/") +"#:data.Icon#' alt='#:data.Icon#' />" +

"</td>" +

"<td width='60'>#: Id #</td>" +

"<td width='250'>#: Title #</td>" +

"<td width='120'>#: AssignedUser #</td>" +

"<td>#: Status #</td>" +

"<td>#: Priority #</td>" +

"<td>#: Category #</td>" +

"<td>#: Tier #</td>" +

"<td>#: LastModifiedAsString #</td>" +

"</tr>"

)

.Pageable()

.Sortable()

.Scrollable()

.Groupable()

.Filterable(filterable => filterable

.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.StartsWith("Starts with")

.IsEqualTo("Is equal to")

.IsNotEqualTo("Is not equal to")

))

)

.Selectable(selectable => selectable

.Mode(GridSelectionMode.Single))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read.Action("Get", "Grid"))

)

.Events(e => e.Change("onChanged"))

)

<script type="text/javascript">

function onChanged(arg) {

var selected = this.select();

var wiId = this.dataItem(selected).Id;

window.location = '../WorkItem/Edit?Id=' + wiId;

}

var myGrid;

$(function () {

myGrid = $('#Grid').data('kendoGrid');

});

setInterval(DoWork, parseInt(@ViewBag.RefreshInterval));

function DoWork() {

myGrid.dataSource.read();

}

</script>

Grid

answered on 02 Sep 2013

1 answer

694 views

Add parameters to the ParametersMap dynamically

Hello there, is there any way I can add parameters to the DataSource dynamically?

Thanks!

Data Source

answered on 02 Sep 2013

1 answer

152 views

kendoUpload becomes undefined after disabling it on IE9

In my app I am disabling the kendoUpload widget when the user has chosen 5 files to upload. But - if the user removes one of those files to download, I will enable the kendoUpload widget.

My issue is that once I call the disable() method in the kendoUpload widget - the next time I try to access the kendoUpload widget it is undefined.

Here's my function.

function setAddAttachmentButton(disable) {
var kendoUpload = $("#attachmentUpload").data("kendoUpload");
if (kendoUpload == undefined)
return;

if (disable) {
kendoUpload.disable();
} else {
kendoUpload.enable();
}
}

This is only happening on IE9 - the other browsers work fine.

Upload

answered on 02 Sep 2013

5 answers

805 views

Drag and Drop feature is not working for kendo grid

Hi,
I have a drop downlist and grid.Based on the drop down selection, i'm loading the data in to kendo grid.
Drag and drop row feature is working fine when my page loads first time and after that selecting the dropdown list value and loading the grid first time.
If i change my dropdownlist value in change event and load the grid data, then drag is calling(that too calling multiple times).But drop is not calling...

The implementation is done for this feature by refering
http://jsfiddle.net/JBeQn/

Please find the written code snippet attachment

Drag and Drop

answered on 02 Sep 2013

1 answer

3.3K+ views

How to Fetch Current Row info of Kendo Grid from onClick event of ComboBox ?

Hello Kendo Team,

I am using Kendo Combo Box under Kendo Grid. Now i need to fetch current row data or array of Kendo Grid onClick event of ComboBox ?

In short meaning, OnClick event of ComboBox , I need to fetch data of current row of Kendo Grid. I can not do this and data of current row can be not fetched.

======================

Kendo ComboBox Event:

======================

transport: {

read: {

type: "POST",

dataType: "json",

data: function(e){

//alert(e.toSource());

var grid = $("#grid").data("kendoGrid");

var rowDataItem = grid.dataItem(grid.tbody.find("tr")); /* I need Current Row */

alert(rowDataItem.toSource());

},

url: "<?php

echo $this->url( array('module'=> 'Invoice', 'controller' => 'backend', 'action' => 'gateway' ), 'adminrout',    true); ?>"

}

grid.dataItem(grid.tbody.find("tr")) is not working. How to get the current row array ?

Please See the Screen Shot and Code sample attached herewith for your better understand.
Please help where is my mistake or can you give us a sample code ?

Grid

answered on 02 Sep 2013

2 answers

240 views

Disable tooltip gradients.

Hello,

I wonder how I can disable the gradient for tooltips.
I know I can disable chart gradients by setting:

seriesDefaults: { overlay: {gradient: null} }

But this doesn't work for tooltips.

Any advice would be greatly appreciated.

Charts

answered on 01 Sep 2013

4 answers

891 views

Why are autocompletes so hard to style?

90% of stuff I try to do with autocompletes is eliminated after the page is done loading. Why?

I try setting in-line CSS styles... most are removed after page load.

I try jQuery like so:

$('.autocomplete').css('width', width);

$('.autocomplete).css('background-color', '#eeeeee');

The width persists, but only after there's a visible width change on-screen after page load.

The background color is eliminated after page load.

What do I need to do to have these autocompletes stop flipping out and just take the styles I give them?

AutoComplete

answered on 30 Aug 2013

2 answers

178 views

Column Template with JS Reserved Word

I have a column in my grid defined as:

field : "class"

title : "Class"

width : 250

This works fine, but when I add a column template like so:

template : "<div class=\\"FieldValueLink\\" onclick=\\"(function(e,obj){ /* do stuff */ })(event, this)\\" >#=class#</div>"

I get the following error:

Uncaught Error: Invalid template:'<tr data-uid="#=data.uid#" role='row'><td role='gridcell'><div class="FieldValueLink" onclick="(function(e,obj){ /* do stuff */})(event, this)" >#=class#</div></td><td style="display:none" role='gridcell'>#:data.id==null?'':data.id#</td></tr>' Generated code:'var o,e=kendo.htmlEncode;with(data){o='<tr data-uid="'+(data.uid)+'" role=\'row\'><td role=\'gridcell\'><div class="FieldValueLink" onclick="(function(e,obj){ /* do stuff */ })(event, this)" >'+( class )+'</div></td><td style="display:none" role=\'gridcell\'>'+e(data.id==null?'':data.id)+'</td></tr>';}return o;' kendo.all.min.js:9

I'm sure this is because 'class' is a reserved word in javascript. Is there a different way to reference the field name in the template?

We're just trying to convert our existing grids to kendo grids. I'd rather not alter my database and all the existing code referencing this if it can be helped.

Grid

answered on 30 Aug 2013