Firstly i would say that i love your controls, very clear written and easy to use.

But, i have a problem...

I'm working on data entry application with lot of foreign keys in tables and i need to implement autocomplete textbox in way that i will enter name but i must get id  so that i can pass it with model to controller

I was thinking of making some custom class that will take all entries in table and put it as viewmodel parameter but some tables will have lot of data and i would rather do it with Jquery or some client side technique.

If you have any ideas it would be great

Thanks

You can use the jquery ui autocomplete. In the examples in the jquery ui site you will find an example of how to handle complex objects (in your case composed by is and description) retrieved from a server. If you have different Textboxes to be initilalized with different sources of data, assign to each of them a different css class.

Then in the document ready event initialize them with the jquery ui autocomplete plugin as needed($('.autocomplete1').autocomplete(.....)...and so on)

However this way newly created rows of the grid will not have the autocompletes working (they were not in the page whe the document ready event triggered)). So if you are using the DatagridFor, please intercept the NewHtmlCreated event of the grid. This event will receive the newly created item as an argument...so you can initialize its autocompletee: $(newItem.find('.autocomplete1').autocomplete(....) and so on...).

For each external key you need (in each row, that is in the edit template of the grid) both a textbox to apply the autocomplete to and an hidden field to store the id of the selected item (use the select event of the jquery ui autocomplete to store the id in the hidden field).

If you like the Mvc Controls Toolkit, please take a few minutes to write a 5 stars reviews: http://mvccontrolstoolkit.codeplex.com/releases/view/90390

Thx for the reply but I found solution with JavaScript:

 @item.TextBoxFor(m => m.ID_NAME, new { @onclick="autocomplete(this.id)"})
 @item.HiddenFor(m=>m.ID)

with this I get object id  and in JS and:

function completeKO(obj) {
            
                 $("#" + obj).autocomplete({
                     source: function (request, response) {
                         $.ajax({
                             url: myurl, type: "POST", dataType: "json",
                             data: { term: request.term, maxResults: 10 },
                             success: function (data) {
                                 response($.map(data, function (item) {
                                     return {
                                         value: item.Value,

                                         id: item.Id
                                     }
                                 }))
                             }

                         })
                     },
                     change: function (event, ui) {
                         if (!ui.item) {
                             this.value = '';
                         } else {
                             // get id of hidden id
                             var koID = obj.substring(0, obj.length - 5);

                             $('#' + koID).val(ui.item.id);
                         }
                     }
                 });
             }

public ActionResult myurl(string term, string maxResults) {

//and in Controller return Json like this

int max = int.Parse(maxResults);
            Entities context = new Entities();
            var filteredItems = (from i in context.Table
                                 where i.name.ToLower().Contains(term)
                                 select new { Value = i.Name, Id = i.Id}).Take(max);
            return Json(filteredItems, JsonRequestBehavior.AllowGet);

}

With this I get name and Id for my model...

Thanks again

However, this way you apply the autocomplete plugin each time you click on the textbox. This result on the plugin to be applied several times on the same textbox. You should apply the plugin just once in the initialization of the page, or if you want to apply it on the first click event you should store the fact that the plugin has been already applied either on an Html5 attrivute of the textbox or on the jQuery.data associted to the textbox. This way on the other click you check for this and avoid to apply the plugin again.