Questions on Kendo UI for jQuery Forum

1 answer

173 views

Dropdown List shows error in Kendo Grid incell editing - MVC

I have the requirement to load a set of data in kendo grid editable cell in a dropdown list. The model which I have used to populate the
kendo grid Sales and the model that will be used for the dropdown is resource.

I have added the client template to the resource field

columns.Bound(p=> p.Resource).ClientTemplate("#=Resource.DisplayName#").Width(150);

model.Field(p=> p.Resource).DefaultValue(ViewData["defaultCategory"] as FOO.Models.ResourceModel);

But the above lines shows converting type error in view itself.

I have followed the procedures in the below link
http://demos.kendoui.com/web/grid/editing-custom.html

I have my view, controller code below. Can anyone help me out how to solve this.. or is there any other way is there to populate the kendo dropdown
in the kendo grid cell ?

View
@(Html.Kendo().Grid<FOO.Models.Sales>()
.Name("SalesGrid")
.Columns(columns =>
{
columns.Bound(p => p.ID);
columns.Bound(p =>p.Resource).ClientTemplate("#=Resource.DisplayName#").Width(150);
columns.Bound(p =>p.Customer).Width(150);
columns.Bound(p => p.GS).Width(150);
columns.Bound(p =>p.Price).Width(150);
})
.Scrollable()
.Editable(editable => editable.Mode(GridEditMode.InCell))
.HtmlAttributes(new { @style = "Font:12px calibri; " })
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetSaleDetailsByID", "Sales")
.Data("GetSaleByID")
)

        .ServerOperation(false)
.Model(model =>
{
model.Id(p => p.Resource);
model.Field(p =>p.Resource).DefaultValue( ViewData["defaultCategory"] as FOO.Models.ResourceModel);
model.Field(p => p.Customer);
model.Field(p => p.GS).Editable(false);
model.Field(p => p.Price);
})
)
)
Controller
public ActionResult AppointmentSales()
{
PopulateCategories();
var id = RouteData.Values["id"];
EditSales oresult = new EditSales();
ViewData["appid"] = "";
if (id != null)
{
oresult = GetSalesDetails(id);
ViewData["appid"] = id;

            }
return View(oresult);
}

CODE FOR POPULATING THE VIEW DATA
private void PopulateCategories()
{

var categories = _Sales.GetEmployees()
                        .Select(c => new ResourceModel
{
ID = c.ID,
DisplayName =c.DisplayName
})
.OrderBy(e => e.ID);
ViewData["categories"] =categories;
ViewData["defaultCategory"]= categories.First();
}

I have tried to populate a dropdown list box in kendo grid with the example given in kendo demos “Editing Custom editor”. But its not
working , it shows error in the view itself in the following set of line

model.Field(p =>p.Customer).DefaultValue(ViewData["defaultCategory"] as FOO.Models.ResourceModel);

and the error is
Cannot Convert from FOO.Models.ResourceModel to string

Can anyone help me out what is the mistake in the code ?

Mayil.M
On Behalf of
Jeremy Thompson

Grid

answered on 23 Oct 2013

1 answer

495 views

How to change the grid datasource using jQuery and calling an MVC controller

I have been looking through the postings but can't find one that addresses by specific issue. I have a grid that is being loaded with data just fine on the initial page request. But now the user wants to select a subset of the data.

Here is the grid HTML helper from the MVC razor view page:

@(Html.Kendo().Grid<AdvisorSearchResultsVM>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(a => a.AdvisorID);
columns.Bound(a => a.CIFID);
columns.Bound(a => a.FirstName);
columns.Bound(a => a.LastName);
columns.Bound(a => a.Status);
})
.Sortable()
.Pageable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("onError"))
.Model(model =>
{
model.Id(a => a.AdvisorID);
model.Field(a => a.AdvisorID).Editable(false);
})
.Read(read => read.Action("GetAdvisors","Advisor"))
)
)

I want to change the grid datasource action to call the Advisor controller GetRegistered method.

I tried doing this in a javascript method

$("#Grid").kendoGrid.dataSource.transport.options.read.action("/Advisor/GetRegistered");

But I get an error that says $(...).kendoGrid.dataSource is undefined.

Any suggestions?

Grid

answered on 23 Oct 2013

3 answers

265 views

Fixed size for pie chart legend and plotArea

I'd like to set the legend and plotArea on multiple pie charts to fixed width and height to maintain visual consistency for a client's dashboard app. There doesn't seem to be any legend.width, legend.height, plotArea.width, or plotArea.height properties, however. Is there a workaround for this which can let me set fixed legend and plotArea sizes consistently?

Charts

answered on 23 Oct 2013

1 answer

117 views

Grid MVVM binding to date string from ajax request

Hi!

We are trying to bind declaratively to date columns represented like "/Date(1325289600000)/". This works when creating the grid in code and setting column type to "date", but not declaratively. This is shown in the DtStart column. As shown in the DtStop column though this does work when the date value is a real date as opposed to a string.

It is possible to create a template for the column using for example "#=kendo.dateParse(DateFrom)#", but the datepicker will still not "understand" the value.

The full example can be seen here: http://jsfiddle.net/Gkgg9/3/

Thanks for any help!
/Victor

Grid

answered on 23 Oct 2013

1 answer

424 views

loading ajax spinner

I had loading ajax spinner working in my MVC project. When I convert my project to use Kendo UI it stopped working. Because it there is no dialog method in Knedo Ui. I post my old code can you help me convert this code to work with Kendo
Thanks

var loader = $('#loader').dialog({ autoOpen: false, modal: true, resizable: false, width: 150, height: 50 });
$(".ui-dialog-titlebar").hide();

loader.ajaxStart(function () {
$(this).dialog('open');

}).ajaxStop(function () {
$(this).dialog('close');
});

Window

answered on 23 Oct 2013

1 answer

133 views

ListView + DataSource + odata + 2way Binding

Hi,

in my viewmodel i have defined a datasource with type: "odata".
The datasource is bound to a listview like this:

var template = kendo.template($("#Template_Pre").html()

+ viewModel.templates["someKey"].Item

+ $("#Template_Sub").html());

$("#mylist").kendoMobileListView({

dataSource: viewModel.listDataSource,

template: template,

appendOnRefresh: false,

pullToRefresh: true,

scrollThreshold: 30

});

The used template is a combination of parts defined in html and code. - including some if-statements.
Inside the template i have this textbox:

<input data-role="numerictextbox" data-bind="value: someIntValue" />

This should make it possible for the user to change the "someIntValue" directly from the list.
In another function i want to foreach all the bound items and submit the new "someIntValue" values to the server,
but every time i try that the values are still the original ones.

Any ideas what i'm missing to make this work?

Here is the model i defined in the schema of the datasource:

model: {

id: "myId",

fields: {

myId: { editable: false, type: "number" },

someStringValue: { editable: false, type: "string" },

someIntValue: { editable: true, type: "number", validation: { min: 0 } }

}

ListView (Mobile)

answered on 23 Oct 2013

1 answer

108 views

Focus lost on asyncronous data binding

Hello,

We encounter the following issue,
- a form with many combobox-es each of them will load its items using ajax from the server using ServerFiltering (true)
- sometime obtaining the filtered items takes a bit, and our users just go ahead and start to fill in the next combobox in the form.
- problem is that at some point the previous combo async operation completes and the dropdown of previous combobox will open and the focus is shifted back to the previous control

The behavior we consider appropriate here would be that the previous combo handles silently the end of async operation if it is no longer focused control on the form.
Can this behavior achieved somehow with current version.

As a side note there was something similar with TabStrip control where asynchronous tab contents were stacked as the asynchronous operation completed, I see now that this was solved in the last internal build (2013.2.1015) perhaps you can consider a similar fix for the combo async behavior explained above.

Thanks
Ovidiu

ComboBox

answered on 23 Oct 2013

1 answer

639 views

Disabling anchor tag button

I have a view that has a navigation button to another view that looks like this:

<a id="GoIssue" data-role="button" href="Main/Issue?priorPage=Picklist&fieldName=reqOrWO&value={TBS}" data-icon="details" ></a><br>

I'd like to disable it under certain conditions. I have tried adding a class to it and checking the class in the click handler:

// Start disabled until someone puts something IN the reqOrWO field

$('#GoIssue').addClass("disabled");

// disabled is implemented by returning false on the click action if it has the disabled class

// the disabled class also has visual aspects as well.

$('#GoIssue').click(function ()

{

event.preventDefault ? event.preventDefault() : event.returnValue = false;

return (!$(this).hasClass('disabled'));

});

At first, I just tried returning false, but navigation still occurred. So, I tried adding the additional code to call preventDefault() [if present] and event.returnValue [if not]. But none of this seems to prevent the navigation from going to the target page.

Am I missing something? Is there a simpler way?

Thanks

General Discussions

answered on 23 Oct 2013

3 answers

280 views

Pie Chart Overlay Property

I have been trying to change the overlay property for a pie chart series. According to your documenation at http://www.kendoui.com/documentation/dataviz/chart/configuration.aspx and http://demos.kendoui.com/dataviz/pie-chart/index.html, I should able to set the overlay property of the pie series to the string "glass" as so:

series: [{

type: "pie",

field: "Amount",

categoryField: "DisplayName",

colorField: "color",

padding: 20,

overlay: "glass"

}]

However, this has no effect on the chart. After digging through the source code for the chart, I believe that overlay is not a string, but an object. So instead of the above, I should use this:

series: [{

type: "pie",

field: "Amount",

categoryField: "DisplayName",

colorField: "color",

padding: 20,

overlay: {

gradient: "glass"

}

}]

I think this is an error in your documentation that needs correcting.

Additionally, it would be great to know all of the possible values that can be supplied there. After further inspection of your source code, it appears that "none", "glass", "roundedBevel" are valid values that can be used. Are there others?

Thanks,
Sara

Charts

answered on 23 Oct 2013

10 answers

932 views

Full Calendar

Hi,

Does Kendo UI will have a full calendar? Like:

http://arshaw.com/fullcalendar/

Greetings.

Calendar

answered on 23 Oct 2013