Telerik Forums
UI for ASP.NET MVC Forum
11 answers
1.9K+ views
I have an AutoComplete working in a view.  It's used to look up and employee name.  There is a related field, EmployeeID which I need to populate if the user changes the assigned Employee.  It's natural to look up the name, however, the key field is EmployeeID and that's the value I really need to send back to the database when the View posts.

I'm sending a list of objects (as Json) to the AutoComplete.  There are two properties, Name and ID.  Name is binding correctly to the AutoComplete and is being sent back on Post.  I think I need to use the Select event to get the ID value and populate that field but I can't find the object when I look at the debugging info in the browser when the page is running.  The event variable 'e' doesn't seem to have it.

How can i do this?  Code is appended.

View Code:
<!-- AutoComplete text box for Issue To Employee -->
<div class="row">
     <!-- IssuedToEmployeeName  NOTE: Autocomplete control MUST be the same name
                                      as the field that's being bound or it won't
                                      be sent back in the post operation!!!
      -->
    <span class="col-sm-2">
        <label>Issued To:</label>
    </span>
    <span class="col-sm-2">
       @(Html.Kendo().AutoComplete()
                    .Name("IssuedToEmployeeName")
                    .Delay(100)
                    .MinLength(2)
                    .DataTextField("IssuedToEmployeeName")
                    .Filter("contains")
                    .Events(e =>
                            {
                                e.Change("onChange")
                                 .Select("onSelect")
                                 .DataBound("onDataBound");
                            })
                    .DataSource(source =>
                                    {
                                        source.Read(read =>
                                            {
                                                read.Action("LookUpEmpName", "Home")
                                                    .Data("onAdditionalData");
                                            })
                                        .ServerFiltering(true);
  
                                    })
        )
    </span>
    <span class="col-sm-1">
        @Html.TextBoxFor(model => model.IssuedToEmployeeID, new { @class="form-control" })
    </span>
   <!-- IssuedOnDateTime -->
    <span class="col-sm-2">
        <label>Issue Date/Time:</label>
    </span>
    <span class="col-sm-3">
        @Html.TextBoxFor(model => model.IssuedOnDateTime, new { @readonly = "true" })
    </span>
    <span class="col-sm-2"></span>
</div>

<script>
    function onAdditionalData() {
        return { text: $("#IssuedToEmployeeName").val() };
    }

    function onChange(e) {
        //alert('onChange() event fired');
    }

    function onSelect(e) {
        alert('onSelect() event fired; event arg = ' + e.arguments);
    }

    function onDataBound(e) {
        //alert('onDataBound() fired. event arguement = ' + e); 
    }
</script>


Controller Code:
//
// LookUpEmpName()
public JsonResult LookupEmpName(string text)
{
    string[] empNames = DataAccess.LookupEmpName(text);
    List<NameSearchResult> result = new List<NameSearchResult>();
 
    if (empNames!=null)
    {
        foreach (string name in empNames) {
            NameSearchResult searchResult = new NameSearchResult();
            string empName = null;
            string empID = null;
            CommonMethods.ParseNameSearchResult(name, ref empName, ref empID);
            if((empName!=null) && (empID!=null)) {
                searchResult.IssuedToEmployeeName = empName;
                searchResult.EmployeeID = empID;
            }
            result.Add(searchResult);
        }
    }
    return Json(result, JsonRequestBehavior.AllowGet);
}
      
Georgi Krustev
Telerik team
 answered on 02 Jun 2015
5 answers
160 views

Hi Telerik,

 

the dropdownlist does not select the correct option on initialization when using virtualization (if i turn off virtualization it works fine). Im using it very similar to your demo of virtualization.

Is it possible that this is a bug? Im using version 2015.1.429.545.

 

this is my code:

@(Html.Kendo().DropDownListFor(model => model.person_id)      
        .DataTextField("Name")
        .DataValueField("Id")
        .Filter("contains")
        .OptionLabel("Choose...")
        .Height(300)
        .DataSource(source =>
        {
            source
                .Custom()
                .ServerFiltering(true)
                .ServerPaging(true)
                .PageSize(80)
                .Type("aspnetmvc-ajax")
                .Transport(transport =>
                {
                    transport.Read("ReadForDropDown", "Person");
                })
                .Schema(schema =>
                {
                    schema.Data("Data")
                          .Total("Total");
                });
        })
        .Virtual(v => v.ItemHeight(26).ValueMapper("personsValueMapper"))
    )

Georgi Krustev
Telerik team
 answered on 02 Jun 2015
1 answer
701 views

I have the following controller action that is invoked when I type in the Autocomplete box, however the DataSourceRequest object isn't populated with the filters that are passed, as if the model binding isn't working (all of the properties for my request variable below are the defaults i.e. filters is null).

1.public JsonResult GetParentResellers([DataSourceRequest]DataSourceRequest request)
2.{
3.    //...           
4.}

 

View:

1.@(Html.Kendo().AutoComplete()
2.      .Name("hi")
3.      .DataSource(ds => ds.Read("GetParentResellers", "Resellers")
4.            .ServerFiltering(true)))

 

And finally here's what's sent to the server( query string)

1.filter[logic]:and
2.filter[filters][0][value]:f
3.filter[filters][0][operator]:startswith
4.filter[filters][0][field]:
5.filter[filters][0][ignoreCase]:true

 

 

 

 

 

 

Rosen
Telerik team
 answered on 01 Jun 2015
1 answer
82 views

When I am rendering the grid control (using the server rendering option), I noticed that the resulting HTML is rendered as a single line.

Is there a way to render the grid's HTML as an outlined output with each table's tag on its own line aka

<table>
<tr>
    <td>value</td>
</tr>
</table>

It would be helpful for debugging and troubleshooting (in VisualStudio, browser debugger, in Fiddler, just using View Page Source option) and even in some cases for customers (to let them using Page Source option to save the raw HTML content - I had plenty of situations when that was a savvier).

Dimiter Madjarov
Telerik team
 answered on 01 Jun 2015
4 answers
324 views
Hi Telerik,

it is possible sort data in grid on server side with viewmodel which has navigation property to customer. Or I have to create new SQL view which will group data from two tables(Order and Customer together). I will be able to sort data from mssql view.

// Models
public class Order
{
  public int OrderID { get; set; }
  public Customer Customer { get; set; }
}

public class Customer
{
  public string ContactName { get; set; }
}

// Action
public ActionResult Read([DataSourceRequest] DataSourceRequest request)
{
  var dataContext= new DataContext();
  var orders = dataContext.Orders;
  var result = orders.ToDataSourceResult(request, o => new {OrderID = o.OrderID, CustomerName = o.Customer.ContactName});
  return result;
}

Now i want sort data according to CustomerName then error occures.
MSSQL view solve this problem? 
Boyan Dimitrov
Telerik team
 answered on 01 Jun 2015
3 answers
99 views

 I have posted this question on Stackoverflow, but had no real success in getting an answer.

 Hopefully someone here can help me.

 When I add this to my Grid:

 .Editable(editable => editable.Mode(GridEditMode.PopUp))

I get the following error:

 System.IO.FileNotFoundException
 Could not load file or assembly 'System.Data.Entity, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089' or one of its dependencies.

 When I remove the Popup edit function it works.

 Mono does not use / support System.Data.Entity.

 Furthermore, because the assembly is missing from mono, nothing in my solution uses or references that Library.

 Not event in my Web.Conf file.

 How can I solve this problem?

Rosen
Telerik team
 answered on 01 Jun 2015
1 answer
109 views

Hi guys,

 

I am havning a hard time understanding the setup process of the list view. i followed the documentation offered but i am finding it very difficult to set it up anyways. The issue i am having is that it is displaying no listview in the view.

 I deployed my site to garyrizzo.com if you are interested. just navigate to Household menu item and click on bathroom accessories.

Would appreciate if someone assists.

 

Here is my code:

 

Controller:

 

 public ActionResult ProductListing(string catname)
        {
            //Category cat = (from s in dbContext.Categories
            //          where s.Category1 == catname
            //          select s).Single();
            
            //int catid = cat.ID;

            //var prodlist = from s in dbContext.Products
            //                                 where s.C_ID == catid
            //                                 select s;

            //return View(prodlist);
            return View(GetProducts());
        }

        protected override void Dispose(bool disposing)
        {
            dbContext.Dispose();

            base.Dispose(disposing);
        }
                                      
        public ActionResult Products_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(GetProducts().ToDataSourceResult(request));
        }

        public IEnumerable<ideaworktelekrik.Models.ProductViewModel> GetProducts()
        {
            var northwind = from s in dbContext.Products
                            //where s.C_ID == catid
                            select s;

            List<ideaworktelekrik.Models.ProductViewModel> prodlist = new List<ideaworktelekrik.Models.ProductViewModel>();

            foreach (Product product in northwind)
            {
                ideaworktelekrik.Models.ProductViewModel newprod = new ideaworktelekrik.Models.ProductViewModel();
                   newprod.productID = product.ID;
                   newprod.ProductName = product.Name;
                   prodlist.Add(newprod);
            }
            return prodlist;
        }
    }

 

 

Model:

 

          public int productID {get;set;}
        public string ProductName {get;set;}
        public decimal unitprice {get;set;}

 

View:

 

@model IEnumerable<ideaworktelekrik.Models.ProductViewModel>

<script type="text/x-kendo-tmpl" id="template">
    <div class="product">
        <img src="@Url.Content("~/ProductImages/image001.png/")" alt="#:ProductName# image" />
        <h3>#:ProductName#</h3>
    </div>
</script>

<div class="demo-section">
    @(Html.Kendo().ListView<ideaworktelekrik.Models.ProductViewModel>(Model)
    .Name("listView")
    .TagName("div")
    .ClientTemplateId("template")
    .DataSource(dataSource =>
    {
        dataSource.Read(read => read.Action("Products_Read", "Home"));
        dataSource.PageSize(15);
    })
    .Pageable()
    )
</div>

<style>
    .demo-section {
        padding: 30px;
        width: 577px;
    }

    #listView {
        padding: 10px;
        margin-bottom: -1px;
        min-width: 555px;
        min-height: 510px;
    }

    .product {
        float: left;
        position: relative;
        width: 111px;
        height: 170px;
        margin: 0;
        padding: 0;
    }

        .product img {
            width: 110px;
            height: 110px;
        }

        .product h3 {
            margin: 0;
            padding: 3px 5px 0 0;
            max-width: 96px;
            overflow: hidden;
            line-height: 1.1em;
            font-size: .9em;
            font-weight: normal;
            text-transform: uppercase;
            color: #999;
        }

        .product p {
            visibility: hidden;
        }

        .product:hover p {
            visibility: visible;
            position: absolute;
            width: 110px;
            height: 110px;
            top: 0;
            margin: 0;
            padding: 0;
            line-height: 110px;
            vertical-align: middle;
            text-align: center;
            color: #fff;
            background-color: rgba(0,0,0,0.75);
            transition: background .2s linear, color .2s linear;
            -moz-transition: background .2s linear, color .2s linear;
            -webkit-transition: background .2s linear, color .2s linear;
            -o-transition: background .2s linear, color .2s linear;
        }

        .k-listview:after, .product dl:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
</style>

Daniel
Telerik team
 answered on 29 May 2015
8 answers
1.2K+ views

Hello,

 I have been trying to to use arrow keys (up/down) to navigate among a drop-down list's values. However it did not seem to work, even though I was able to find various examples in the documentation. So, I came upon a discrepancy (I think):

 

Keyboard navigation works, if the drown-down list is created (in Razor) using  Html.Kendo().DropDownList(). However, we are using Html.Kendo().DropDownListFor(). A major difference that I can see, is that the first approach creates a <select> HTML element, while the latter an <input>.

Is there a way to have keyboard navigation working with Html.Kendo().DropDownListFor() ?

 

Thank you very much.

AGGELIKI
Top achievements
Rank 1
Iron
 answered on 29 May 2015
3 answers
239 views
Is it possible to save the state of how a panel group was arranged using the sortable control?
Alexander Valchev
Telerik team
 answered on 29 May 2015
2 answers
171 views

When a row double click a edit form pops up and re-sizes but when add new record button is click the form is not re-sizes. 

This only works when edit button is clicked:

                $("#grid tbody").on("dblclick", "tr", function () {
                    var grid = $("#grid").data('kendoGrid');
                    grid.editRow(this);                    
                    $(".k-edit-form-container").parent().width(1200).data("kendoWindow").center();                    
                    $(".k-edit-buttons").parent().width(1200).data("kendoWindow");                    
                });

 

how can I use this code to re-size the form when both buttons are clicked?

Boyan Dimitrov
Telerik team
 answered on 28 May 2015
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?