Questions on Kendo UI for jQuery Forum

0 answers

148 views

Populating data from Datasource to ComboBox

Hello Everyone,
I'm new to Kendo UI. I've tried getting the data by giving the values in the datasource of kendoComboBox.
But I need to get the values from Sql Server 2008 database and display in the Kendo UI Combo Box.

Say my database is like

Table Name:Fabrics
----------------
Fab Name
----------------
Cotton
Polyester
Rib Knit
Nylon

Please Help
Thanks,

ComboBox

asked on 12 Sep 2012

2 answers

789 views

kendo is undefined

I'm not sure what is going on. I'm doing an MVC4 app with VS2012. My ready function defines a new datasource, then a grid. When I run the app in Chrome, it works fine. When I run my app in IE9, it throws an error on the code that defines the datasource with "kendo is undefined".

Here is my code:

//define the dataSource for the grid

searchVM.dataSource = new kendo.data.DataSource({

schema: {

model: {

fields: {

Number: { type: "string" },

DateReceived: { type: "date" },

County: { type: "string" },

Media: { type: "string" }

}

},

pageSize: 10,

change: function (e) {

//refresh the grid

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

grid.refresh();

}

});

Why does it work in Chrome, but throw the error in IE9? Is it some setting in IE that's causing trouble for me?

General Discussions

answered on 12 Sep 2012

0 answers

396 views

Kendo UI Grid custom PopUp

Hi
i am using KendoUi Grid to display the data on my page from a datasource .
Here is the Code for the same .

@using Kendo.Mvc.UI

@model IEnumerable<Ami.WebRole.Models.FacilityGroupModel>

@{

ViewBag.Title = "Manage Facility Group ";

}

<script type="text/javascript">

$(document).ready(function () {

$("form.k-edit-form").kendoValidator();

});

</script>

<style type="text/css">

.k-widget.k-window

{

width: 450px;

height: 250px;

}

</style>

<h2 style="color:Maroon;">Manage Facility Group</h2> <hr />

<table>

<td>

<td align="center">

<table>

<tr>

<td align="left">

@using (Html.BeginForm("ManageFacilityGroup", "ManageFacilityGroup", FormMethod.Get))

{

<fieldset>

<table>

<tr>

<td>

<p>

<span><b> Name:</b></span>

</p>

</td>

<td>

<p>

@(Html.Kendo().AutoComplete()

.Name("FacilityGroupName")

.DataTextField("FacilityGroupName")

.Filter("Contains")

.IgnoreCase(true)

.DataSource(source =>{

source.Read(read =>

{

read.Action("GetFacilityName", "ManageFacilityGroup")

.Data("onAdditionalData");

})

.ServerFiltering(true);

})

)

<script type="text/javascript">

function onAdditionalData() {

return {

text: $("#FacilityGroupName").val()

};

}

</script>

</p>

</td>

<td align="left">

<span><b>Status:</b></span>

</td>

<td>

@(Html.Kendo().DropDownList()

.Name("chkStatus")

.DataTextField("Text")

.DataValueField("Value")

.BindTo(new List<SelectListItem>() {

new SelectListItem() {

Text = "All",

Value = "-1"

},

new SelectListItem() {

Text = "Active",

Value = "true"

},

new SelectListItem() {

Text = "InActive",

Value = "false"

}

})

.Value("1")

)

</td>

<td align="right">

<p>

<input id="Submit1" type="submit" value="Search" />

</p>

</td>

</tr>

</table>

</fieldset>

}

</td>

</tr>

<tr>

<td align="center" >

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

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.CustomerName).HtmlAttributes(new { style = "text-align:left;" }).Width(150);

columns.Bound(p => p.FacilityGroupName).HtmlAttributes(new { style = "text-align: left;" }).Width(170).Title("Facility Group Name");

columns.Bound(p => p.StatusName).HtmlAttributes(new { style = "text-align: center;" }).Width(90).Title("Status");

columns.Bound(p => p.CreationDate).HtmlAttributes(new { style = "text-align: right;" }).Width(110).Format("{0:MM/dd/yyyy}");

columns.Command(command => { command.Edit(); }).Width(85);

})

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("FacilityGroupPopUp").Window(window => window.Title("Edit Facility Group").Name("editwindow1")))

.Scrollable()

.Pageable(p => p.PageSizes(true))

.Sortable()

.DataSource(datasource => datasource

.Ajax()

.ServerOperation(false)

.Model(model => model.Id(p => p.FacilityGroupId))

.Read(read => read.Action("ManageFacilityGroup", "ManageFacilityGroup"))

.Update(update => update.Action("Update", "ManageFacilityGroup"))

)

</td>

</tr>

</table>

</td>

</table>

As u can u see i am using a Custom Pop Up editor to edit the records on my Grid.
Here is my Custom Pop Up

@model Ami.WebRole.Models.FacilityGroupModel

@using Kendo.Mvc.UI

<fieldset>

@* <legend>Edit Facility Group</legend>*@

<table border="10" cellpadding="0" cellspacing="0" style="border-color:Black; width:350px;" >

<tr>

<td colspan="2">

@if (ViewData["FailureMessage"] != null)

{

<div id="divFailureMsg" style="height:25px; background-color:#fffeff;visibility:visible ;color:Red" align="center">

@Html.Label(ViewData["FailureMessage"].ToString())

</div>

}

else

{

<div id="divFailureMsg" style="visibility:hidden; height:0px;">

</div>

}

</td>

</tr>

<tr>

<td style="width:150px;">

@Html.LabelFor(model => model.CustomerName)

</td>

<td>

@(Html.Kendo().DropDownList()

.Name("CustomerName")

.DataTextField("CustomerName")

.DataValueField("CustomerName")

//.DataValueField("CustomerId")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetCustomer", "ManageFacilityGroup");

});

})

)

</td>

</tr>

<tr>

<td>

@Html.LabelFor(model => model.FacilityGroupName)

</td>

<td>

@Html.TextBoxFor(model => model.FacilityGroupName, new { style = "width:156px;" })

</td>

</tr>

<tr>

<td>

@Html.LabelFor(model => model.Description)

</td>

<td>

@Html.TextAreaFor(model => model.Description, new { style = "width:163px;" })

</td>

</tr>

<tr>

<td>

@Html.LabelFor(model => model.status)

</td>

<td>

@(Html.Kendo().DropDownList()

.Name("StatusName")

.DataTextField("StatusName")

.DataValueField("StatusName")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetStatus", "ManageFacilityGroup");

});

})

)

</td>

</tr>

</table>

</fieldset>

Now on my popup i am letting the user edit "Customer Name" ,"Facility Group Name" and "Description" and the "Status".
While updating i am checking whether the updated facility group name doesnt match with any of the already existing names,
Now what i want to achieve is once the facility group name is checked for any duplicacy the name should be updated but if there is any duplicacy the record should not get updated and the edit popup window should remain intact with the proper error message.
In my case the record is not being updated on duplicacy but the edit pop up window gets closed automatically.
Help!!!

Grid

asked on 12 Sep 2012

0 answers

147 views

Update Editor content on paste

Hello,

I have an Editor where I have setup with the "paste" event. I am having no problem with the event firing it is that I can't get it to replace the content correctly. Here is a working example of the problem http://jsfiddle.net/WgvNr/3/. To test paste in some Microsoft Word content with some formatting. The paste event will strip the Word formatting. This works also, but it leaves the original content and the edited content. How can I just have the edited content show in the editor?

$("#txtActions").kendoEditor({

tools: [

"bold",

"italic",

"underline",

"insertUnorderedList",

"insertOrderedList",

],

paste: function (e) {

var editor = $("#txtActions").data("kendoEditor");

editor.value(CleanWordHTML(e.html));

//console.log(editor);

}

});

Editor

asked on 12 Sep 2012

2 answers

138 views

"interpolate" not working for stacked charts if CategoryAxis is of type Date

I have the following code:

var threshold = 100;

var throughputPer10min = [ 15, 26, 21, 40, 63,

16, 38, 79, 120, 54,

12, 56, 75, 102, 110,

130, 90, 75, 50, 5];

var startDate = new Date();

var chartData = [];

for (i = 0; i < throughputPer10min.length; i++) {

var date = new Date(startDate);

date.setMinutes(startDate.getMinutes() + (10 * i));

chartData.push({

"time": date,

"threshold": threshold,

"actual": throughputPer10min[i],

"below": Math.min(throughputPer10min[i], threshold),

"above": Math.max(0, throughputPer10min[i] - threshold)

});

}

var endDate = chartData[chartData.length - 1].time;

chartData[chartData.length - 1].threshold = threshold;

$("#testGraph").kendoChart({

dataSource:

{

data: chartData

},

valueAxis:

{

majorUnit: 50,

min: 0,

max: 150

},

categoryAxis:

{

field: "time",

baseUnit: "minutes",

type: "Date",

majorGridLines:

{

visible: false

},

majorTicks:

{

visible: false

},

labels:

{

step: 20

}

},

series: [

{

type: "area",

stack: true,

missingValues: "interpolate",

field: "below",

color: "#55F",

line: { color: "blue" },

},

{

type: "area",

stack: true,

missingValues: "interpolate",

field: "above",

color: "green"

},

{

type: "line",

field: "actual",

missingValues: "interpolate",

width: 1,

markers:

{

size: 0

},

name: "Actual Throughput"

},

{

type: "line",

field: "threshold",

missingValues: "interpolate",

name: "threshold",

color: "red",

dashType: "dash",

width: 1.5,

markers:

{

size:0

},

name: "Threshold line"

}

],

legend: {

visible: false

}

});

if I replace the date.setMinutes(startDate.getMinutes() + (10 * i)); with getMinutes() + i, everything looks fine, otherwise, it looks as if I had used missingValues: "zero"

Is this a bug or intended ?

Charts

answered on 12 Sep 2012

0 answers

140 views

Rebind Chart and DataGrid (like that of MVVM )

How to rebind Charts and Grids in kendo ui, which automatically displays data on change, we dont need to create it again ?

Thanks in advance.

Charts

asked on 12 Sep 2012

1 answer

78 views

Server Editing Grid not updated through the joined coloumn

When i am trying to update the value through the join it updated the database but not updating the gridview.
But after refreshing the page it is showing the updated value.
Here is my code.

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

.Name(

"Grid")

.Columns(columns =>

{

columns.Bound(p => p.RoleTypeName).HtmlAttributes(

new { style = "text-align: left" }).Width(90);

columns.Bound(p => p.Name).HtmlAttributes(

new { style = "text-align: left" }).Width(100);

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

new { style = "text-align: center" }).Width(80);

columns.Command(command => { command.Edit(); }).HtmlAttributes(

new { style = "text-align: center" }).Width(100);

})

.Editable(editable => editable.Mode(

GridEditMode.PopUp).TemplateName("PopUpTemplate").Window(w => w.Title("Manage Role").Name("editWindow").Width(400).Height(200)))

.Pageable(p => p.PageSizes(

true))

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

//.Server()

.Ajax()

.ServerOperation(

false)

.Model(model => model.Id(p => p.RoleID))

.Read(read => read.Action(

"ManageRole", "ManageRole"))

.Update(update => update.Action(

"Update", "ManageRole"))

)

and my editor template contains dropdownlist

@(Html.Kendo().DropDownListFor(model => model.StatusName)

.Name(

"StatusName")

.DataTextField(

"StatusName")

.DataValueField(

"StatusName")

.DataSource(source =>

{

source.Read(read =>

{

read.Action(

"GetStatus", "ManageRole");

});

})

)

When i update the status from the dropdownlist updates in data but not show in grid, it appear when refreshing the page.How can i remove this problem please help me out.

Grid

answered on 12 Sep 2012

2 answers

177 views

Date or Time Resets

So I'm using MVC3, creating a textbox for the date-time like so:

@Html.TextBoxFor(e => e.EndDtTm, new { id = "endDtTm", style = "width: 200px;" })

and in Ready creating the kendo control

$("#endDtTm").kendoDateTimePicker();

The problem I'm having is that after I load up the model the control shows the date and time correctly but if I click the time icon and pick a new time the date resets to todays date. The opposite happens if I select the date icon and pick a new date then the time is reset to 12:00 am.

How do I prevent this from happening?

DatePicker

answered on 12 Sep 2012

2 answers

5.3K+ views

datepicker change event

When i set the value for the datepicker programatically, the change event does not fire. The basic code is below:

$("#datePicker").kendoDatePicker({
change: function (e) {
selectedDate = $("#datePicker").data("kendoDatePicker").value();
console.warn(selectedDate);
}
});
$("#datePicker").data("kendoDatePicker").value(selectedDate);

DatePicker

answered on 12 Sep 2012

2 answers

550 views

Dynamic number format in grids?

Is it possible to format numbers based on variable rather than fixed values? I know that there are various ways you can
do this normally, like padding etc but is it possible to do something directly in the grid?

This is very important btw.

Grid

answered on 12 Sep 2012