Questions on UI for ASP.NET MVC Forum

1 answer

563 views

Hi,

I have a little issue, i'm explaining :

I'm working with Kendo and Google Map API and some data are retrieve from the API, like address, postal code, city, country, etc...
I would like to populate different ComboBoxes (Address combobox, Postal Code combobox, etc...)

The problem is that i don't know how to retrieve the selected value from a combobox, any idea please ?

Here is my code :

On Controller (which populate countries combobox) :

public JsonResult GetCascadeCountries()
{
   return Json(_db.Countries.Select(c => new {CountryId = c.Id, CountryName = c.CountryName }), JsonRequestBehavior.AllowGet);
}

Index.cshtml :

 @(Html.Kendo().ComboBox()
           .Name("Countries")
           .Placeholder("Select a country")
           .DataTextField("CountryName")
           .DataValueField("CountryId")
           .DataSource(source => {
           	source.Read(read => {
                    read.Action("GetCascadeCountries", "Index");
                });
           })
   )

In the javascript file :

if (elt.types[0] == 'country')
    {
        var countriesComboBox = $('#Countries').data("kendoComboBox");
        alert($('#Countries_input').data());
        var selectItem = function (dataItem) {
            //dataItem argument is a ComboBox data item.
            return dataItem.Text == elt.long_name;
        }
 
        countriesComboBox.select(selectItem);
    }

I tried with a document.getElementsByName ou document.getElementById, to set the value, but i still fail :/

Any idea ?

Thanks

Edit : I've found, you have to set the trigger manually : countriesComboBox.trigger("change");

ComboBox

answered on 19 Dec 2012

1 answer

201 views

[Solved] Groupable grid using MVVM

Hello.
I just updated to Kendo UI for ASP.NET MVC Q3 2012 and I am trying to create a pageable, filterable, sortable and groupable grid. We are using ASP.NET MVC, but because of the MVVC architecture we are using, the grid properties are being defined using html attributes, like this:

<div id="userGrid"
  data-role="grid"
  data-columns='[{ "field": "Name", "title": "Name"}, { "field": "Group", "title": "Group"}]'
  data-filterable='true'
  data-navigatable='true'
  data-pageable='true'
  data-groupable='true'
  data-sortable='true'
  data-bind="source: userDataSource"></div>

and the DataSource is being set in javascript like this:

userDataSource: new kendo.data.DataSource({
type: "aspnetmvc-ajax",
transport: {
read: {
url: '/home/ListUsers'
}
},
schema: {
model: {
id: 'ID',
fields: {
ID: {
type: 'number'
},
Name: {
type: 'string'
},
Group: {
type: 'string'
}
}
},
data: 'Data',
total: 'Total'
},
page: 1,
pageSize: 30,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
serverAggregates: true,
serverGrouping: true
})

The ListUsers actions simply returns the corresponding data using DataSourceRequest, like this:

public ActionResult ListUsers([DataSourceRequest] DataSourceRequest request)
{
  return Json(GetUsers().ToDataSourceResult(request));
}

By doing this, the grid is shown correctly, the paging, filtering and sorting all work fine, but not the grouping. I can see the column "drop area" and I can drag the column headers, but I can't drop them.
I compared the grid properties with the script generated when using the MVC wrapper (using the wrapper, the grouping works) and I didn't see anything different that could be related to grouping. Am I missing something?

Thanks!

Grid

answered on 19 Dec 2012

1 answer

1.1K+ views

How to use assign a dynamic .Name property?

Hello, I am trying to create a reusable control (partial view) utilizing the Kendo UI Autocomplete widget. The issue is that since this new partial I am creating can appear multiple times in a view, how can you pass in or otherwise use a variable as the .Name() attribute in the AutoComplete helper?

Here is my partial view:

@using Kendo.Mvc.UI;

@model IEnumerable<OTIS.AppServ.Shared.ViewModels.ddlOptions>

@(Html.Kendo().AutoComplete()

.Name("TEST")

.Filter("startswith")

.DataTextField("DisplayName")

.BindTo(Model)

.Events(e => e

.Change("autocomplete_change")

)

.Placeholder("Select Customer...")

.HtmlAttributes(new {@class = "filter"})

)

<input class="filter" id="@ViewBag.ControlId" type="hidden" />

<script>

//$("#TEST").attr("id", '@ViewBag.ControlId' + '_org');

function autocomplete_change() {

var hiddenInput = $('#' + '@ViewBag.ControlId');

var autoContainer = $("#" + 'TEST').data("kendoAutoComplete");

var result = $.grep(autoContainer.dataSource.data(),

function (itemInArray, itemIndex) {

return itemInArray.DisplayName == autoContainer.value();

}

);

//alert(result[0].Id)

hiddenInput.val(result[0].Id);

}

</script>

My controller will handle acquiring the specific data and then passing it to the partial (it needs to take a parameter to populate ViewBag.ControlId, for now it is just hard coded):

[ChildActionOnly]

public ActionResult Customers()

{

List<ddlOptions> viewModel = new List<ddlOptions>();

viewModel = _manageDDLsAppServ.GetCustomersDDLViewModel(_currentCompanyId).ToList();

ViewBag.ControlId = "customerIdFilter";

return PartialView("_ddlOptionsAutoComplete", viewModel);

}

I then call this partial from my view like:

@{ Html.RenderAction("Customers", "ManageDDLs", new { area = "Shared" }); }

I tried JQuery, to change the name at run time, but this then breaks the Kendo jquery script as it will be looking for the original name.

General Discussions

answered on 19 Dec 2012

1 answer

538 views

AutoComplete Events in PartialView = "Cannot use a lambda expression..." Error

Per the documentation I am trying to add Events to the autocomplete helper so I can lookup the value of the selected item (as seen in this post), but when doing so am getting the following error on line 10:

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS1977: Cannot use a lambda expression as an argument to a dynamically dispatched operation without first casting it to a delegate or expression tree type

Source Error:

Line 8: .DataTextField("DisplayName")

Line 9: .BindTo(Model)

Line 10:     .Events(e => e 

		.Change("autocomplete_change"))

Line 11: .Placeholder("Select Customer...")

Line 12: .HtmlAttributes(new {@class = "filter"})

Here is the PartialView

@using Kendo.Mvc.UI;

@model IEnumerable<OTIS.AppServ.Shared.ViewModels.ddlOptions>

@(Html.Kendo().AutoComplete()

.Name(ViewBag.ControlId)

.Filter("startswith")

.DataTextField("DisplayName")

.BindTo(Model)

.Events(e => e

	.Change("autocomplete_change"))

.Placeholder("Select Customer...")

.HtmlAttributes(new {@class = "filter"})

)

<script>

function autocomplete_change() {

var autoContainer = $("#AutocompleteId").data("kendoAutoComplete");

var result = $.grep(autoContainer.dataSource.data(), function (item) {

item.Text == autoContainer.value();

});

}

</script>

Call from View:

@{ Html.RenderAction("Customers", "ManageDDLs", new { area = "Shared" }); }

Controller:

[ChildActionOnly]

public ActionResult Customers()

{

List<ddlOptions> viewModel = new List<ddlOptions>();

viewModel = _manageDDLsAppServ.GetCustomersDDLViewModel(_currentCompanyId).ToList();

ViewBag.ControlId = "customerIdFilter";

return PartialView("_ddlOptionsAutoComplete", viewModel);

}

AutoComplete

answered on 18 Dec 2012

1 answer

6.2K+ views

How can I change the header color of just one grid ?

I have a page with a grid and beneath it, a tab. I want to change the header column colors.

That grid is declared within a td at the top of the page. I declared a style within that td, setting .k-header to my new color and that grid does reflect that new color.

But now everything else below, even outside that td, also now has the new color, even the tab. When I open the modal window on that page, even the window is now using the new color.

I thought styles changes were local to the element they are in? If so, then why is this happening? If not, then what is the correct way to target a specific color to one specific grid?

Grid

answered on 18 Dec 2012

2 answers

161 views

issue with virtualization of remote data and scrolling

Hi,

I am working on a 500 000 rows grid, that is why I have used the virtualization of remote data.
There is a bug though, which happens only with chrome (i.e. not with firefox and IE 9, whaaaaaaat !!).

I have made a fiddle to recreate this bug, using the kendo remote data demo.

To see the bug, do the following steps:
1) put the scroll in the bottom of the grid
2) use the mousse wheel to go up until you see the load-image.gif
3) then, go back in the bottom with the mousse wheel, you'll see a number of data different than 11077 (which is the good one);

if the bug does not appears, do it again a few times.

Do you have an idea of where does this come from ?
Is there something wrong in my code ?

here is the fiddle link: http://jsfiddle.net/johnjohn/mqPxH/1/

Grid

answered on 18 Dec 2012

2 answers

143 views

[Solved] Duplicate static window content script initialization

I have a question about duplicate static window content script initialization.



Let's see an example:

I have a KendowUI Window with static content:



@Html.Kendo().Window().Name("Window").Content(@<div>
            <script type="text/javascript">
                $(document).ready(function () {
                    alert('It\'s me!');
                });
            </script>
            </div>).Visible(false).Modal(true).Title("Test").Draggable(false)



So when I am opening page with provided code I see two alerts.



Please help me to find different solution except provided below:


            <script type="text/javascript">
                $(document).ready(function () {
                    alert('It\'s me!');
                });
            </script>
@Html.Kendo().Window().Name("Window").Content(@<div>
            </div>).Visible(false).Modal(true).Title("Test").Draggable(false)



This is very important for me for initializing KendoUI controls inside of static window content.

Window

answered on 18 Dec 2012

1 answer

372 views

Kendo Upload control with Multiple(true) and AutoUpload(false)

Hello when I select a file with Multiple(true) and AutoUpload(false) (I plan to have a separate button launch uploads) Inside a Kendo Window, it displays two files (and actually attempts to upload two files, one with filename="" and the other with filename="<the uploaded file name>").

I have attached an example project and a screenshot of what is happening.

Any ideas on what is going on?

Upload

answered on 18 Dec 2012

5 answers

933 views

How ro install Trial Kendo UI Complete + Server Wrappers for ASP.NET MVC

I have downloaded theKendo UI Complete + Server Wrappers for ASP.NET MVC (kendoui.trial.2012.2.710.zip) but I see no indication at all about what I am supposed to do with this file once it is downloaded.

I am using VS2010 and have MVC3 and MVC 4 installed - what am I supposed to do with the downloaded file?

Installer and VS Extensions

answered on 18 Dec 2012

3 answers

301 views

Drop Down List with AJAX

I am trying to load a drop down list, with data from AJAX. When it loads, I get the "waiting" circle over the list continually. I looked at the example, and noticed the same behavior.

View Code:

<fieldset class="form-list"> <ol> <li> <label>Project *</label> @(Html.Kendo().DropDownList()   .Name("1Project")   .DataTextField("DisplayName")   .DataValueField("ProjectID")   .DataSource(source =>   {   source.Read(read =>   {   read.Action("ProjectList", "ReturnMail");   });   }) ) </li> <li> <label>Name Address 1</label> <input type="text" id="1NameAddress1" class="k-textbox" /> </li> <li> <label>Name Address 1</label> <input type="text" id="1NameAddress2" class="k-textbox" /> </li> <li> <label>Name Address 1</label> <input type="text" id="1NameAddress3" class="k-textbox" /> </li> <li> <label>Name Address 1</label> <input type="text" id="1NameAddress4" class="k-textbox" /> </li> <li> <label>Name Address 1</label> <input type="text" id="1NameAddress5" class="k-textbox" /> </li> <li> <label>City</label> <input type="text" id="1City" class="k-textbox" /> </li> <li> <label>State</label> <input type="text" id="1State" class="k-textbox" maxlength="2" /> </li> <li> <label>&nbsp;</label> <button id="SearchAddressButton" class="k-button primary">Search</button> </li> </ol> </fieldset> 

Controller Code:
public JsonResult ProjectList(string userName = "") { if (userName == "") userName = Request.ServerVariables["AUTH_USER"]; List<ProjectModel> proj = ProjectModel.AllProjects(); return Json(proj); }

DropDownList

answered on 18 Dec 2012