Questions on Kendo UI for jQuery Forum

4 answers

486 views

Fixed size for pie chart legend and plotArea

For our bar chart, sometimes the category number is big, e.g., 100, in this scenario, the legend area mess up and the plot area disappears.
Could Kendo control the size of legend, or, for example, give a scroll bar to show legend?

Charts

answered on 25 Oct 2013

1 answer

335 views

Validation with custom rule for data in either AutoComplete or DropDownList

How can I validate whether input has been entered in an AutoComplete or a selection has been made in a DropDownList. If neither is true then it should fail validation. I'm just figuring out the Kendo Validation and if there was a length requirement maybe I'd be on the right track. Can someone suggest a successful way to validate this scenario?

Here's where I started:

<div id="cboSearchStringValidate1">

<input type="search" id="cboSearchString1AC" />

<input id="cboSearchString1DDL" />

</div>

$("#btnSearch").click(function () { alert('start to validate'); $("#cboSearchStringValidate1"

).kendoValidator({

rules: {

customruleSearchStrings1: function (input) { if (cboSearchString1AC.length == 0 && $(cboSearchString1DDL).val == ""){

return input.val() === "true";

} return true;

}, messages: { customruleSearchStrings1: "Search must not be empty" } }); alert('validate checked');

}

);

I think this needs to be in here somewhere, but not sure if I have the whole thing put together properly.

var validator1 = $("#cboSearchStringValidate1").kendoValidator().data("kendoValidator");

if (!validator1.validate()) {

alert("validated search strings 1");

alert('yes, we are valid');

}

else {

alert("no such luck");

}

Thanks in advance for enlightening me ;)

General Discussions

answered on 25 Oct 2013

3 answers

167 views

Executing kendo transport functions to CRUD remote data

I am stuck for a couple of days now with the kendo grid.
When I select a row in the grid, I save it inside an Angular scope variable.
When I click edit a custom edit screen opens with the data of the selected row.
After saving the changes, I want to call the "update" function from the dataSource.transport.
But my server returns a new "EditedDate", so I also want to call the e.success() callback in my update function.

When I call the dataSource.transport.update(editedObject), I only have the object in my function, without an e.success() to update the grid row.
When I call the dataSource.remove() or the dataSource.add() and then the dataSource.sync() everything goes well.

I'm just not able to update any row, because I also need the e.success().

create: function (e) {

//custom createfunction with callback

vm.CourseFactory.Insert(e.data, function success(data) {

e.success(data);

});

},

update: function (e) {

//custom update function with callback

vm.CourseFactory.Update(e.data, function success(data) {

e.success(data);

});

},

the dataSource.add(newObject), calls the create function with an e.data and an e.success
I need the same kind of function for my update function, but I only found add() and remove()
and dataSource.transport.update() is not what I'm looking for.

Any help would be appreciated!

Grid

answered on 25 Oct 2013

3 answers

108 views

Different size for ComboBox and the items that it is showing

Hi there,

I am using a kendoComboBox to load data from the server. I would like to limit the size of the initial control to, say 200px, but display the items that are returned from the server in a wider list, say 400px wide below the control.

How can this be done? I tried various things such as setting explicit widths on various CSS elements. I also used a template with a <div> that has a defined width, for each item but no matter what I try, the size of the items is constrained by the size of the original ComboBox control.

Are there any examples that show how to accomplish this?

Thanks in advance,

Imar

ComboBox

answered on 25 Oct 2013

8 answers

280 views

Kendo Scheduler Timeline View just like Telerik Scheduler Timeline View

Hi !

I was trying to create a scheduler using Kendo Scheduler.
It seems that there is no way for me to create a timeline view like Telerik Scheduler.

I'm trying to display monthly meeting but i want to the days display in horizontal way not in a calendar way.

Thanks in advance for your help

General Discussions

answered on 25 Oct 2013

3 answers

152 views

Multiple Drawer Issues

Issue 1: Drawer re-appears when using app.navigate()
I have several views that use a Drawer. Running into an issue when using ap.navigate().
Steps to reproduce:
1. I have 4 views that use the same Drawer
2. While on View 1, I bring up the Drawer and select a link (<a>) to bring up view 2
3. On view 2, I do a button click, which then does an app.navigate() back to view 1
4. Now, instead of displaying view 1 fully, I get view 1 with the Drawer already shown covering most of view 1.
How can I prevent the Drawer from showing up again unless the user explicitly brings up the Drawer?

Issue 2:
On views that have a Back button, clicking the back button brings up the Drawer if the view was shown by navigating thru the Drawer. Is there an option to prevent the Drawer from getting added to the history so that the back button doesn't navigate back to the Drawer?

Issue 3:
The iPhone simulator (that comes with Telerik Graphite) doesn't seem to work well with the Drawer. In the above scenario, when I navigate back to View 1, the Drawer displays one of the views instead of its own content. The same issue has been noticed on a desktop browser as well

Drawer (Mobile)

answered on 25 Oct 2013

1 answer

104 views

Custom layout

Hey guys

I'm wondering if I can make something like the home screen (I don't know exactly how it's called) from Windows Phone 8.
Not the full alphabetical list of apps, but the tiles to the left.

I tried altering some CSS, but things got a bit messy. I guess I should just use the Scroller widget, right? The only thing I'll miss is the virtual scrolling, which prevents performance problems for big lists.

Any thoughts?
Thanks!

ListView (Mobile)

answered on 25 Oct 2013

3 answers

175 views

Adding Dropdownlist as Column inside grid

Hi

I need to add Dropdownlist with binding data as column inside my grid..i checked in forum..but i didn't get proper solution..Here i have attached my screen for your reference.Kindly find the attachment.kindly do the needful.Thanks in advance.

Grid

answered on 25 Oct 2013

2 answers

799 views

Prevent Horizontal Scroll Bar

Is there a way to prevent the Horizontal Scroll Bar appearing in a dropdownlist. (while keeping the vertical scrolling)

Many people would be happy for horizontal overflow to be hidden on a drop-down list.

The catch is you can't keep making the drop-down portion of a dropdownlist wider as if it's wider than the container div the control wraps to the next line and messes up the layout.

DropDownList

answered on 24 Oct 2013

2 answers

355 views

How to set controller parameters for kendo grid in jquery?

Here is my situation:

I have a kendo dropdown list box and a numeric text box in a view. When the user clicks a button, i want to display a kendo grid in a popup window.
All i need to do is figure out how to pass the values from the dropdown and textbox to my mvc controller.

Here is the definition of the dropdown and text box:

@Html.Kendo().DropDownListFor(x => x.TrainList).BindTo(Model.TrainList).HtmlAttributes(new { style = "width:150px" }).DataTextField("CNX_AUT").DataValueField("Id").Name("trainList").Value("Id").Text("CNX_AUT")

@Html.Kendo().NumericTextBoxFor(x => x.BeltScaleWeight).Name("beltScaleWeight").HtmlAttributes(new { style = "width:150px" })

Here is the button definition that will display the pop up window:

<button class="k-button" id="applyToCars" style="width:150px" >Apply To Cars</button>

Here is the definition for my grid inside the pop up window's div:

<div id="GridWindow">

<br/>

@(Html.Kendo().Grid<CNX.Domain.Entities.EDIRailcar>()

.Name("RailCarGrid")

.Columns(columns =>

{

columns.Bound(o => o.Id).Visible(false);

columns.Bound(o => o.EDI_417_TRAIN_GUID).Visible(false);

columns.Bound(o => o.EQUIPMENT_INITIAL);

columns.Bound(o => o.EQUIPMENT_NUMBER);

columns.Bound(o => o.WEIGHT);

columns.Bound(o => o.TARE_WEIGHT);

columns.Bound(o => o.AS_RECEIVED_WEIGHT);

columns.Bound(o => o.Pile);

columns.Bound(o => o.Class);

columns.Bound(o => o.STATUS);

})

.DataSource(dataSource => dataSource.Ajax()

.PageSize(10)

.Read(read => read.Action("ApplyWeights", "MenuWeight")

.Type(HttpVerbs.Post))

.Model(model => model.Id(o => o.Id)))

.Pageable()

.Sortable()

.Filterable()

)

</div>

Here is the javascript/jquery from my view :

<script type="text/javascript">

$(document).ready(function () {

var win = $("#GridWindow").kendoWindow({

actions: ["Maximize", "Minimize", "Close"],

draggable: true,

height: "500px",

width: "500px",

modal: true,

resizable: true,

visible: false,

position: { top: 100, left: 100 }

}).data("kendoWindow");

});

$("#applyToCars").click(function () {

var selectedTrain = $("#trainList").data("kendoDropDownList");

var weightValue = $("#beltScaleWeight").data("kendoNumericTextBox");

var win = $("#GridWindow").data("kendoWindow");

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

/*How do i pass the values they selected to the controller? */

grid.dataSource.fetch();

win.title('Railcar weights for ' + selectedTrain.text() );

win.center();

win.open();

});

</script>

Kinda under the gun on this one as far as time is concerned. Any help would be most appreciated.

Grid

answered on 24 Oct 2013