PDA

View Full Version : [CLOSED] Razor - Combobox autocomplete not working



OriCoder
Feb 05, 2013, 5:27 PM
Hi

When I pull back combobox data from a store the autocomplete does not seam to work Example below

Model:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Collections;
using Ext.Net.MVC;

namespace Ext.Net.MVC.Examples.Areas.GridPanel_Paging_and_So rting.Models
{

public class Soil
{
public int id { get; set; }
public int shadeId { get; set; }
public string value { get; set; }
}

public class Shade
{
public int id { get; set; }
public int zoneId { get; set; }
public string value { get; set; }
}

public class Plant
{
public int id
{
get;
set;
}
public string Common
{
get;
set;
}

public string Botanical
{
get;
set;
}

public int Zone
{
get;
set;
}

public string ColorCode
{
get;
set;
}

public string Light
{
get;
set;
}

public double Price
{
get;
set;
}

public DateTime Availability
{
get;
set;
}

public bool Indoor
{
get;
set;
}

public static Paging<Plant> PlantsPaging(StoreRequestParameters parameters)
{
return Plant.PlantsPaging(parameters.Start, parameters.Limit, parameters.SimpleSort, parameters.SimpleSortDirection, null);
}

public static Paging<Plant> PlantsPaging(int start, int limit, string sort, SortDirection dir, string filter)
{
List<Plant> plants = Plant.GetPlants();

if (!string.IsNullOrEmpty(filter) && filter != "*")
{
plants.RemoveAll(plant => !plant.Common.ToLower().StartsWith(filter.ToLower( )));
}

if (!string.IsNullOrEmpty(sort))
{
plants.Sort(delegate(Plant x, Plant y)
{
object a;
object b;

int direction = dir == SortDirection.DESC ? -1 : 1;

a = x.GetType().GetProperty(sort).GetValue(x, null);
b = y.GetType().GetProperty(sort).GetValue(y, null);

return CaseInsensitiveComparer.Default.Compare(a, b) * direction;
});
}

if ((start + limit) > plants.Count)
{
limit = plants.Count - start;
}

List<Plant> rangePlants = (start < 0 || limit < 0) ? plants : plants.GetRange(start, limit);

return new Paging<Plant>(rangePlants, plants.Count);
}

public static List<Shade> GetShade()
{
return new List<Shade>{
new Shade
{
id = 1,
zoneId = 1,
value = "Darkness"
}
,
new Shade
{
id = 1,
zoneId = 1,
value = "Mostly Shady"
}
,
new Shade
{
id = 2,
zoneId = 2,
value = "Sun or Shade"
}
,
new Shade
{
id = 3,
zoneId = 2,
value = "Mostly Sunny"
}
,
new Shade
{
id = 4,
zoneId = 3,
value = "Shade"
}
,
new Shade
{
id = 5,
zoneId = 3,
value = "Bright Sunlight"
}
};
}

public static List<Soil> GetSoil()
{
return new List<Soil>{
new Soil
{
id = 1,
shadeId = 1,
value = "Light Acid"
}
,
new Soil
{
id = 2,
shadeId = 1,
value = "Very Acid"
}
,
new Soil
{
id = 3,
shadeId = 2,
value = "Neutral"
}
,
new Soil
{
id = 4,
shadeId = 3,
value = "Very Alkiline"
}
,
new Soil
{
id = 4,
shadeId = 3,
value = "Light Alkiline"
}
};
}

public static List<Plant> GetPlants()
{
return new List<Plant> {
new Plant
{ id = 1,
Common = "Bloodroot",
Botanical = "Sanguinaria canadensis",
Zone = 2,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 2.44,
Availability = new DateTime(2006, 03, 15),
Indoor = true
},

new Plant
{ id = 2,
Common = "Columbine",
Botanical = "Aquilegia canadensis",
Zone = 2,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 9.37,
Availability = new DateTime(2006, 03, 06),
Indoor = true
},

new Plant
{ id = 3,
Common = "Marsh Marigold",
Botanical = "Caltha palustris",
Zone = 1,
ColorCode = "F5F5F5",
Light = "Mostly Sunny",
Price = 6.81,
Availability = new DateTime(2006, 05, 17),
Indoor = false
},

new Plant
{ id = 4,
Common = "Cowslip",
Botanical = "Caltha palustris",
Zone = 1,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 9.90,
Availability = new DateTime(2006, 03, 06),
Indoor = true
},

new Plant
{ id = 5,
Common = "Dutchman's-Breeches",
Botanical = "Dicentra cucullaria",
Zone = 3,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 6.44,
Availability = new DateTime(2006, 01, 20),
Indoor = true
},

new Plant
{ id = 6,
Common = "Ginger, Wild",
Botanical = "Asarum canadense",
Zone = 3,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 9.03,
Availability = new DateTime(2006, 04, 18),
Indoor = true
},

new Plant
{ id = 7,
Common = "Hepatica",
Botanical = "Hepatica americana",
Zone = 4,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 4.45,
Availability = new DateTime(2006, 01, 26),
Indoor = true
},

new Plant
{ id = 8,
Common = "Liverleaf",
Botanical = "Hepatica americana",
Zone = 1,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 3.99,
Availability = new DateTime(2006, 01, 02),
Indoor = true
},

new Plant
{ id = 9,
Common = "Jack-In-The-Pulpit",
Botanical = "Arisaema triphyllum",
Zone = 1,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 3.23,
Availability = new DateTime(2006, 02, 01),
Indoor = true
},

new Plant
{ id = 10,
Common = "Mayapple",
Botanical = "Podophyllum peltatum",
Zone = 3,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 2.98,
Availability = new DateTime(2006, 06, 05),
Indoor = true
},

new Plant
{ id = 11,
Common = "Phlox, Woodland",
Botanical = "Phlox divaricata",
Zone = 3,
ColorCode = "EEEEEE",
Light = "Sun or Shade",
Price = 2.80,
Availability = new DateTime(2006, 01, 22),
Indoor = false
},

new Plant
{ id = 12,
Common = "Phlox, Blue",
Botanical = "Phlox divaricata",
Zone = 1,
ColorCode = "EEEEEE",
Light = "Sun or Shade",
Price = 5.59,
Availability = new DateTime(2006, 02, 16),
Indoor = false
},

new Plant
{ id = 13,
Common = "Spring-Beauty",
Botanical = "Claytonia Virginica",
Zone = 1,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 6.59,
Availability = new DateTime(2006, 02, 01),
Indoor = true
},

new Plant
{ id = 14,
Common = "Trillium",
Botanical = "Trillium grandiflorum",
Zone = 2,
ColorCode = "EEEEEE",
Light = "Sun or Shade",
Price = 3.90,
Availability = new DateTime(2006, 04, 29),
Indoor = false
},

new Plant
{ id = 15,
Common = "Wake Robin",
Botanical = "Trillium grandiflorum",
Zone = 2,
ColorCode = "EEEEEE",
Light = "Sun or Shade",
Price = 3.20,
Availability = new DateTime(2006, 02, 21),
Indoor = false
},

new Plant
{ id = 16,
Common = "Violet, Dog-Tooth",
Botanical = "Erythronium americanum",
Zone = 1,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 9.04,
Availability = new DateTime(2006, 02, 01),
Indoor = true
},

new Plant
{ id = 17,
Common = "Trout Lily",
Botanical = "Erythronium americanum",
Zone = 3,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 6.94,
Availability = new DateTime(2006, 03, 24),
Indoor = true
},

new Plant
{ id = 18,
Common = "Adder's-Tongue",
Botanical = "Erythronium americanum",
Zone = 3,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 9.58,
Availability = new DateTime(2006, 04, 13),
Indoor = true
},

new Plant
{ id = 19,
Common = "Anemone",
Botanical = "Anemone blanda",
Zone = 4,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 8.86,
Availability = new DateTime(2006, 12, 26),
Indoor = true
},

new Plant
{ id = 20,
Common = "Grecian Windflower",
Botanical = "Anemone blanda",
Zone = 4,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 9.16,
Availability = new DateTime(2006, 07, 10),
Indoor = true
},

new Plant
{ id = 21,
Common = "Bee Balm",
Botanical = "Monarda didyma",
Zone = 1,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 4.59,
Availability = new DateTime(2006, 05, 03),
Indoor = true
},

new Plant
{ id = 22,
Common = "Bergamot",
Botanical = "Monarda didyma",
Zone = 2,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 7.16,
Availability = new DateTime(2006, 04, 27),
Indoor = true
},

new Plant
{ id = 23,
Common = "Black-Eyed Susan",
Botanical = "Rudbeckia hirta",
Zone = 3,
ColorCode = "FFFFFF",
Light = "Sunny",
Price = 9.80,
Availability = new DateTime(2006, 06, 18),
Indoor = false
},

new Plant
{ id = 24,
Common = "Buttercup",
Botanical = "Ranunculus",
Zone = 4,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 2.57,
Availability = new DateTime(2006, 06, 10),
Indoor = true
},

new Plant
{ id = 25,
Common = "Crowfoot",
Botanical = "Ranunculus",
Zone = 4,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 9.34,
Availability = new DateTime(2006, 04, 03),
Indoor = true
},

new Plant
{ id = 26,
Common = "Butterfly Weed",
Botanical = "Asclepias tuberosa",
Zone = 2,
ColorCode = "FFFFFF",
Light = "Sunny",
Price = 2.78,
Availability = new DateTime(2006, 06, 30),
Indoor = false
},

new Plant
{ id = 27,
Common = "Cinquefoil",
Botanical = "Potentilla",
Zone = 1,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 7.06,
Availability = new DateTime(2006, 05, 25),
Indoor = true
},

new Plant
{ id = 28,
Common = "Primrose",
Botanical = "Oenothera",
Zone = 2,
ColorCode = "FFFFFF",
Light = "Sunny",
Price = 6.56,
Availability = new DateTime(2006, 01, 30),
Indoor = false
},

new Plant
{ id = 29,
Common = "Gentian",
Botanical = "Gentiana",
Zone = 4,
ColorCode = "EEEEEE",
Light = "Sun or Shade",
Price = 7.81,
Availability = new DateTime(2006, 05, 18),
Indoor = false
},

new Plant
{ id = 30,
Common = "Blue Gentian",
Botanical = "Gentiana",
Zone = 3,
ColorCode = "EEEEEE",
Light = "Sun or Shade",
Price = 8.56,
Availability = new DateTime(2006, 05, 02),
Indoor = false
},

new Plant
{ id = 31,
Common = "Jacob's Ladder",
Botanical = "Polemonium caeruleum",
Zone = 1,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 9.26,
Availability = new DateTime(2006, 02, 21),
Indoor = true
},

new Plant
{ id = 32,
Common = "Greek Valerian",
Botanical = "Polemonium caeruleum",
Zone = 1,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 4.36,
Availability = new DateTime(2006, 07, 14),
Indoor = true
},

new Plant
{ id = 33,
Common = "California Poppy",
Botanical = "Eschscholzia californica",
Zone = 2,
ColorCode = "FFFFFF",
Light = "Sunny",
Price = 7.89,
Availability = new DateTime(2006, 03, 27),
Indoor = false
},

new Plant
{ id = 34,
Common = "Shooting Star",
Botanical = "Dodecatheon",
Zone = 2,
ColorCode = "E7E7E7",
Light = "Mostly Shady",
Price = 8.60,
Availability = new DateTime(2006, 05, 13),
Indoor = true
},

new Plant
{ id = 35,
Common = "Snakeroot",
Botanical = "Cimicifuga",
Zone = 3,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 5.63,
Availability = new DateTime(2006, 07, 11),
Indoor = true
},

new Plant
{ id = 36,
Common = "Cardinal Flower",
Botanical = "Lobelia cardinalis",
Zone = 3,
ColorCode = "E1E1E1",
Light = "Shade",
Price = 3.02,
Availability = new DateTime(2006, 02, 22),
Indoor = true
}
};
}
}
}


Controller:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Ext.Net.MVC.Examples.Areas.GridPanel_Paging_and_So rting.Models;

namespace Ext.Net.MVC.Examples.Areas.GridPanel_Paging_and_So rting.Controllers
{
public class RemoteController : Controller
{
public ActionResult Index()
{
return View();
}

public ActionResult Read(StoreRequestParameters parameters)
{
return this.Store(Plant.PlantsPaging(parameters));
}
public ActionResult Plants()
{
IEnumerable<Plant> Plants;
Plants = (from ofg in Plant.GetPlants()
select ofg);

return this.Direct(Plants);
}



public ActionResult Shade(int id)
{
IEnumerable<Shade> Shade;
Shade = (from ofg in Plant.GetShade()
where ((ofg.zoneId == id))
select ofg);

return this.Direct(Shade);
}

public ActionResult Soil(int id)
{
IEnumerable<Soil> Soil;
Soil = (from ofg in Plant.GetSoil()
where ((ofg.shadeId == id))
select ofg);

return this.Direct(Soil);
}

public DirectResult Edit(int id, string field, string oldValue, string newValue, object customer)
{
string message = "<b>Property:</b> {0}<br /><b>Field:</b> {1}<br /><b>Old Value:</b> {2}<br /><b>New Value:</b> {3}";

// Send Message...
X.Msg.Notify("Edit Record #" + id.ToString(), string.Format(message, id, field, oldValue, newValue)).Show();

X.GetCmp<Store>("Store1").GetById(id).Commit();
return this.Direct();
}
}
}




View:


@model Ext.Net.MVC.Examples.Areas.GridPanel_Paging_and_So rting.Models.Plant
<h1>Remote paging and sorting</h1>
<script>
var edit = function (editor, e) {
/*
"e" is an edit event with the following properties:

grid - The grid
record - The record that was edited
field - The field name that was edited
value - The value being set
originalValue - The original value for the field, before the edit.
row - The grid table row
column - The grid Column defining the column that was edited.
rowIdx - The row index that was edited
colIdx - The column index that was edited
*/

// Call DirectMethod
if (e.value !== e.originalValue) {
Ext.net.DirectMethod.request({
url: '@(Url.Action("Edit"))',
params: {
id: e.record.data.id,
field: e.field,
oldValue: e.originalValue,
newValue: e.value,
customer: e.record.data
}
});
}
};

</script>
@Html.X().ResourceManager()
@(

Html.X().GridPanel()
.ID("PlantGrid")
.Title("Plants")
.Frame(true)
.Height(300)
.Plugins(
Html.X().CellEditing().Listeners(ls =>
{
ls.Edit.Fn = "edit";

}
)
)
.Store(
Html.X().StoreForModel()
.ID("Store1")
.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("Read"))
.Reader(Html.X().JsonReader().Root("data"))
)
.RemoteSort(true)
.PageSize(5)
.SorterFor(Model, m => m.Common, Ext.Net.SortDirection.ASC)
)
.ColumnModel(
Html.X().Column().DataIndex(Model, m => m.id).Text("id"),
Html.X().Column().DataIndex(Model, m => m.Common).Text("Common Name").Flex(1)
.Editor(
Html.X().ComboBox()
.MinChars(4)
.TypeAhead(true)
.ValueField("id")
.DisplayField("Common")
.Store(
Html.X().Store()
.ID("PlantsList")
.AutoLoad(false)
.Model(Html.X().Model()
.Fields(
new ModelField("id", ModelFieldType.Int),
new ModelField("Common", ModelFieldType.String)
)

)

.Proxy(
Html.X().AjaxProxy()
.Url(Url.Action("Plants"))

.ActionMethods(actions =>
{

actions.Read = HttpMethod.POST;
}
)

.Reader(
Html.X().JsonReader().Root("result")
)


)

)

)
,
Html.X().Column().DataIndex(Model, m => m.Botanical).Text("Botanical").Width(230)
.Editor(
Html.X().ComboBox()
.MinChars(4)
.TypeAhead(true)
.Padding(5)
.Items(
new ListItem("Erythronium",0),
new ListItem("Anemone",1),
new ListItem("Monarda",2),
new ListItem("Somthing Else",3)
)

),
Html.X().Column().DataIndex(Model, m => m.Zone).Text("Zone").Width(50),
Html.X().Column().DataIndex(Model, m => m.Light).Text("Shade").Width(130)
.Editor(
Html.X().ComboBox()
.ValueField("id")
.DisplayField("value")
.Store(
Html.X().Store()
.ID("ShadeList")
.AutoLoad(false)
.Model(Html.X().Model()
.Fields(
new ModelField("id", ModelFieldType.Int),
new ModelField("value", ModelFieldType.String)
)

)

.Proxy(
Html.X().AjaxProxy()
.Url(Url.Action("Shade"))
.ExtraParams(ep =>
{
ep.Add(new Parameter()
{
Name = "id",
Value = "3",
Mode = ParameterMode.Raw
}
);


}
)
.ActionMethods(actions =>
{

actions.Read = HttpMethod.POST;
}
)

.Reader(
Html.X().JsonReader().Root("result")
)


)

)

)
,
Html.X().Column().Text("Soil").Width(130)
.Editor(
Html.X().ComboBox()
.ValueField("id")
.DisplayField("value")
.Store(
Html.X().Store()
.ID("SoilList")
.AutoLoad(false)
.Model(Html.X().Model()
.Fields(
new ModelField("id", ModelFieldType.Int),
new ModelField("value", ModelFieldType.String)
)

)

.Proxy(
Html.X().AjaxProxy()
.Url(Url.Action("Soil"))
.ExtraParams(ep =>
{
ep.Add(new Parameter()
{
Name = "id",
Value = "3",
Mode = ParameterMode.Raw
}
);


}
)
.ActionMethods(actions =>
{

actions.Read = HttpMethod.POST;
}
)

.Reader(
Html.X().JsonReader().Root("result")
)


)

)

)
,
Html.X().Column().DataIndex(Model, m => m.Price).Text("Price").Width(70).Align(Alignment.Right),
Html.X().DateColumn().DataIndex(Model, m => m.Availability).Text("Available").Width(95).Format("yyyy-MM-dd"),
Html.X().Column().DataIndex(Model, m => m.Indoor).Text("Indoor?").Width(55)
)
.BottomBar(
Html.X().PagingToolbar()
.DisplayInfo(true)
.DisplayMsg("Displaying plants {0} - {1} of {2}")
.EmptyMsg("No plants to display")
)
)



Can someone tell me where I am going wrong please

Baidaly
Feb 06, 2013, 2:16 AM
Hello!


When I pull back combobox data from a store the autocomplete does not seam to work Example below

Sorry, but I didn't quite understand what exactly is your problem? What do you mean under autocomplete?

OriCoder
Feb 06, 2013, 6:43 AM
When you edit the cell the combobox is displayed. When you type in this combobox is should 'filter' / autocomplete as you type to the results that are matching. Which if I supply a static list with no other setting a combobox will do, but not when it is getting is data from the store.

Does this help you understand? example posted shows the issue.

Daniil
Feb 06, 2013, 10:58 AM
Hi,

I have not run the sample, but I think that you should set up MinChars to 0 (default is 4 if QueryMode is Remote).
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.ComboBox-cfg-minChars

Also, probably, you should set up TypeAhead to true.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.ComboBox-cfg-typeAhead

OriCoder
Feb 06, 2013, 11:54 AM
Hi,

I have not run the sample, but I think that you should set up MinChars to 0 (default is 4 if QueryMode is Remote).
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.ComboBox-cfg-minChars

Also, probably, you should set up TypeAhead to true.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.ComboBox-cfg-typeAhead

I'll give it a try but I had a full word of about 10 characters in and it still didnt filter the list down or auto complete

Daniil
Feb 06, 2013, 12:44 PM
I just tried your sample and, seems, I was right in my guesses.

A load request occurs if type, for example, "very" and it shows two items. If you need a load request to be triggered earlier please decrease MinChars as needed.

The "autocomplete" feature is enabled by setting up TypeAhead to true.

OriCoder
Feb 06, 2013, 1:15 PM
I just tried your sample and, seems, I was right in my guesses.

A load request occurs if type, for example, "very" and it shows two items. If you need a load request to be triggered earlier please decrease MinChars as needed.

The "autocomplete" feature is enabled by setting up TypeAhead to true.

So the TypeAhead sorts my autocomplete but adding .MinChars(0) does not filter my, am I getting it wrong?

Daniil
Feb 06, 2013, 1:35 PM
Please update from SVN and retest.

OriCoder
Feb 06, 2013, 11:19 PM
Please update from SVN and retest.

Have pulled the latist trunk from svn compiled and tested still the same. To show what I mean I have updated the View at the start of the thread with a combobox (on the botanical column) with a manual list which is working how the one with the store should.

Daniil
Feb 07, 2013, 4:51 AM
Understand. You don't filter items on server according the text that a user types.

The typed text is sending with a request as a "query" (default name) parameter. You should take it into account in the controller/model to return filtered items only.

Here is an example.
http://examples2.ext.net/#/Form/ComboBox/Custom_Search/

OriCoder
Feb 07, 2013, 8:50 AM
Understand. You don't filter items on server according the text that a user types.

The typed text is sending with a request as a "query" (default name) parameter. You should take it into account in the controller/model to return filtered items only.

Here is an example.
http://examples2.ext.net/#/Form/ComboBox/Custom_Search/


Sorry Danil this is not a Razor example, I am not following. Please can you update the supplied razor example with what you mean.

Am I to take it that when store is added to a combobox it is treated diffrently from adding items to the list? This does not seam a consistent approach since both sets of data are loaded local. Sure the store would be used to create the list items and they should behave in the same way?

Daniil
Feb 07, 2013, 10:31 AM
Sorry Danil this is not a Razor example, I am not following. Please can you update the supplied razor example with what you mean.

Well, it is not too related to Razor. The changes will be on server side.



Am I to take it that when store is added to a combobox it is treated diffrently from adding items to the list? This does not seam a consistent approach since both sets of data are loaded local. Sure the store would be used to create the list items and they should behave in the same way?

"Items" means that a ComboBox gets local items.

But if you define a Store with an AjaxProxy it means that a ComboBox gets its items remotely.

Do you need to load items remotely when a user types or not?

OriCoder
Feb 07, 2013, 1:21 PM
Well, it is not too related to Razor. The changes will be on server side.



"Items" means that a ComboBox gets local items.

But if you define a Store with an AjaxProxy it means that a ComboBox gets its items remotely.

Do you need to load items remotely when a user types or not?

Sorry I NEED a working example in MVC / Razor I'm not getting the webforms example at any level. If you could show me what you mean based on the MVC / Razor example that I supplied that would be great.

Daniil
Feb 07, 2013, 2:02 PM
I just committed the MVC ComboBox Custom Search example to the SVN trunk. Please take a look.

OriCoder
Feb 07, 2013, 2:16 PM
Thank you very much for that I will take a look and work through it tonight.