Telerik Forums
UI for ASP.NET MVC Forum
2 answers
106 views
I am using JSON To populate the AutoComplete List of the MultiSelect like Below:

Controller
public JsonResult PopList(string name)
{
    var lstNames = db.GetNames.Select(e => new
    {
        name = e.OrgNames                             
    });         
    return Json(orgs, JsonRequestBehavior.AllowGet);
}
Razor:

@(Html.Kendo()
 .MultiSelect()
 .Name("nameBox")
 .AutoBind(true)
 .Placeholder("Select names...")
 .DataTextField("name")
     .DataSource(source =>
      {
         source.Read(read =>
         {
            read.Action("PopList", "ListNames");
         })
            .ServerFiltering(true);
       })
 
)
Can I bind the Value to a list that is not in the list I am using for the auto-complete list?

I attached a image.


If the user wanted to type a name and add it, or if the value being bound are not in the list can it be added?  

When saved the items would then appear in the list.

Bartley
Top achievements
Rank 1
 answered on 17 Nov 2013
4 answers
118 views
Hi,

We are using Kendo Controls for MVC (kendo UI Version 2013.1.514)  in our project and we have some cross browser compatibility issue.

Specifically, the Kendo client side validations (unobstrusive) does not work as expected in IE 9. Usually when you focus a required field control (textbox for instance) and move to the next control without entering data, the unobstrusive validation triggers  and shows the message. The same is true when you directly hit submit without entering any required fields.

The application works fine in Chrome and Firefox but it does not work in IE 9.
This is how we are triggering validate function.  
$(document).ready(function () {
      var form = $("form");
      var validator = form.kendoValidator().data("kendoValidator");      
      $("#btnSubmit").click(function () {
          if (validator.validate()) {
              form.submit();
          }
      });
  });
View Model Binding
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
 
                @Html.LabelFor(model => model.CompanyName)
                <span>
                    @Html.EditorFor(model => model.CompanyName)
                    @Html.ValidationMessageFor(model => model.CompanyName)
                </span>
--- omitted for brevity
<p>
             <input id="btnSubmit" type="submit" value="Add Customer" />
        </p>
}
Attached other files for support.

Any help is highly appreciated. Thanks.
Alexander Valchev
Telerik team
 answered on 15 Nov 2013
1 answer
479 views
I am populating The auto-complete portion of the Multi-Select like below

Controller:
public JsonResult lstNames(string name)
{
    var lstOfNames = db.GetNames.Select(e => new
    {
        name = e.Names
    });
    return Json(lstOfNames , JsonRequestBehavior.AllowGet);
}

Razor:

@(Html.Kendo()
      .MultiSelect()
      .Name("names")
      .AutoBind(true)
      .Placeholder("Select names...")
      .DataTextField("name")
      .DataSource(source =>
      {
          source.Read(read =>
          {
              read.Action("lstNames", "ListNamesView");
          })
                .ServerFiltering(true);
      })
 
)

I was wondering is it possible to bind the value to a list that is not in the auto-complete list and also be able to type a new name in as the value?


Petur Subev
Telerik team
 answered on 15 Nov 2013
1 answer
835 views
I need to create a custom toolbar template for a mvc detail grid.

here is my detail grid definition: 

<script id="incompleteTrainTemplate" type="text/kendo-tmpl">
  
    @(Html.Kendo().Grid<CNX.Domain.Entities.CnxRailcar>()    
          .Name("IncompleteTrains_#=Id#")                  
          .Editable(editable => editable.Mode(GridEditMode.InCell))
          .Columns(columns =>
            {
                columns.Bound(o => o.Id).Visible(false);
                columns.Bound(o => o.TRAIN_GUID).Visible(false);              
                columns.Bound(o => o.EQUIPMENT_NUMBER).Width(125);  
                columns.Bound(o => o.SEQUENCE_NUMBER).Width(75) ;                         
                columns.Bound(o => o.PILE).Width(75);
                columns.Bound(o => o.CLASS).Width(75);
                columns.Bound(o => o.LOT).Width(75);               
                columns.Bound(o => o.INBOUND_TRACK).EditorTemplateName("_inboundTrackDropDown").Width(100);
                columns.Bound(o => o.EMPTY_TRACK).EditorTemplateName("_emptyTrackDropDown").Width(100);
                columns.Bound(o => o.AS_RECEIVED_WEIGHT).Width(100); 
                columns.Bound(o => o.STATUS);                             
            })
            .DataSource(dataSource => dataSource.Ajax()
                                                .PageSize(10)
                                                .Update(update => update.Action("CnxRailcarUpdate" , "MenuTrain" , Model))                                              
                                                .Read(read => read.Action("CnxRailcars", "MenuTrain", new { trainGuid = "#=Id#" })
                                                .Type(HttpVerbs.Post))
                                                .Update(update => update.Action("CnxRailcarUpdate", "MenuTrain", Model).Type(HttpVerbs.Post))
                                                .Model(model => model.Id(o => o.Id)))                                               
            .Pageable()
            .Sortable()
            .Filterable()  
            .Events(ev => ev.Save("incompleteRailcars_Save"))//.DataBound("function(e){setTimeout(function(){$('\\#Lot_#=Id#').data('kendoDropDownList').dataSource.read()})}"))
            .ToolBar(tb =>
                        {
                            tb.Template(() =>
                            {
                                @Html.Kendo().DropDownList().Name("Lot_#=Id#").DataTextField("val").DataValueField("id").DataSource(dataSource => dataSource.Read(read => read.Action("GetTrainLots", "MenuTrain", new { trainGuid = "#=TRAIN_GUID#" })));
                            });
                        })
            .ToClientTemplate()
        )
 
 
        
</script>
Here are my controller actions : 

[HttpPost]
       public ActionResult CnxRailcars(Guid trainGuid, [DataSourceRequest] DataSourceRequest request)
       {                  
           return Json(cnxRailcarRepository.Railcars(trainGuid).ToDataSourceResult(request));
       }
 
[HttpPost]
       public JsonResult GetTrainLots(Guid trainGuid, [DataSourceRequest] DataSourceRequest request)
       {
           return Json(cnxRailcarRepository.Railcars(trainGuid).ToDataSourceResult(request));
       }
I just can figure out how to force the dropdownlist's datasource to read. Should i be reading from the datasource in the grid's databound event?

Maybe something like this 

.Events(ev => ev.Save("incompleteRailcars_Save")).DataBound("function(e){setTimeout(function(){$('\\#Lot_#=Id#').data('kendoDropDownList').dataSource.read()})}"))
Maybe i'm going completely in the wrong direction. Any ideas on what i'm doing wrong or missing here?

Thanks in advance

Daniel
Telerik team
 answered on 15 Nov 2013
2 answers
216 views
I have Grid View which I'm using with a remote data source but initially populating with local data. Basically the same requirement as the following 
http://www.kendoui.com/forums/kendo-ui-web/grid/initial-load-locally-with-remote-datasource.aspx except that I'm using .NET MVC extensions.

Its essentially working as a normal remotely loaded grid view but I'm also passing data with a view model on the initial page load.

This seems to work fine (at least with a smallish data set) however I can't find any other examples of anyone doing this which makes me wonder if I'm being stupid and there is a reason I shouldn't do this? Is the fact the I'm using 2 data set likely to cause issues that I've not yet discovered? Would the fact I'm not passing my data DataSourceResult in Index() mean I bring more data to the server than I need to? The data set for this isn't big, but it's being pulled together from various sources so it is quite slow, so speed is a big consideration for me.

My Grid view is as follows
@model IEnumerable<MVCCOD.ViewModels.ProviderDisputeViewModel>
 
@(Html.Kendo().Grid(Model).Name("Disputes").Columns(c => {
    c.Bound(p => p.ID);
    c.Bound(p => p.BillingPrvName);
 /* etc */
  }
    ).
    DataSource(d => d
        .Ajax()
        .Read(r => r.Action("JsonRead", "ProviderDispute")).PageSize(50)
    ).
Pageable().
Sortable())
Controller is below where the view is loaded via ActionIndex
    public class ProviderDisputeController : Controller
    {
        public ActionResult Index()
        {
               return View(GetDisputes());
        }
 
        public ActionResult JsonRead([DataSourceRequest] DataSourceRequest request)
        {
            return Json(GetDisputes().ToDataSourceResult(request));
        }
 
        private List<ProviderDisputeViewModel> GetDisputes()
        {
/* etc */
}
}
Michael
Top achievements
Rank 1
 answered on 14 Nov 2013
1 answer
335 views


I have a Kendo grid with sorting, filtering and column menu enabled.  Out of the box, there are two clickable actions in each column header:
  *  Clicking the title in the column header sorts the data in that column 
  *  Clicking the chevron column menu icon displays the column menu options
 
What I’d like to accomplish - instead of a sort being applied when the title in the column header is clicked is for the column menu options (sort asc, sort desc, columns, filter) to appear.  Essentially, I want the title in each column header to take the place of the chevron icon.  Is this possible?  The main motivation is that some of the columns are just too narrow (ex: 40px)to properly display all the default icons.  Is there some event that can be intercepted to do this?  BTW, I am using the MVC  Html wrappers to setup the grid - if that matters.

Thanks,
R Cornish
Nikolay Rusev
Telerik team
 answered on 14 Nov 2013
9 answers
725 views
Hi, i am trying to follow this guide and rewrite it to the Razor syntax:
Preserve grid state in cookie example.

The difference from my code and the example code is that they use AutoBind: false.
I cant use that in Razor because i initialize the data into the model when the view is rendered.

Another difference is that the example uses schema: syntax, don't think i need that when using razor, Am i correct?

Here is my razor code:

01.@model IEnumerable<Backend.ViewModel.ViewSalon>
02.<div id="salonDetail">
03. 
04.    @(Html.Kendo().Grid(Model)
05.          .Name("Grid")
06.          .Columns(c =>
07.                   {
08.                       c.Bound(m => m.Id).Width(30);
09.                       c.Bound(m => m.Name).Width(110).HtmlAttributes(new { @class = "customerName" });
10.                       c.Bound(m => m.Telephone).Width(100);
11.                       c.Bound(m => m.ContactPerson).Width(100);
12.                       c.Bound(m => m.City).Width(50);
13.                       c.Bound(m => m.StatusId).HtmlAttributes(new { @class = "statusid" }).Hidden();
14.                       c.Bound(m => m.Kundnr).Width(50);
15. 
16.                   })     
17.                  .Scrollable()
18.                  .DataSource(dataSource => dataSource       
19.                  .Ajax()               
20.                  .ServerOperation(false)  
21.                )
22. 
23.                  .ColumnMenu()
24.                  .Reorderable(reorder => reorder.Columns(true))
25.                  .Resizable(resize => resize.Columns(true))
26.                  .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
27.                  .Sortable()
28.                  .Filterable()
29.                  .Events(events => events.Change("onChange").DataBound("onDataBound").DataBinding("onDataBinding"))
30.                  .HtmlAttributes(new { style = "height: 408px" })
31.          )
32.</div>
01.@* Loads cookie support *@
03. 
04.<script type="text/javascript">
05.     //START: *** Save grid state ***
06.     
07.    function onDataBound(e) {
08.        var grid = $(this).data("kendoGrid");
09.        var dataSource = this.dataSource;
10. 
11.        var state = kendo.stringify({
12.            page: dataSource.page(),
13.            pageSize: dataSource.pageSize(),
14.            sort: dataSource.sort(),
15.            group: dataSource.group(),
16.            filter: dataSource.filter()
17.        });
18. 
19.        $.cookie("customerState", state);
20. 
21.        if ($.cookie('customerRows')) {
22.            $.each(JSON.parse($.cookie('customerRows')), function () {
23.                var item = dataSource.get(this);
24.                var row = grid.tbody.find('[data-uid=' + item.uid + ']');
25.                row.addClass('k-state-selected');
26.            });
27.        }
28.    }
29.     
30.    function onChange(e) {
31.        var grid = $(this).data("kendoGrid");
32.        var ids = grid.select().map(function () {
33.            return grid.dataItem($(this)).Id;
34.        }).toArray();
35.        $.cookie('customerRows', JSON.stringify(ids));
36.    }
37. 
38.    function parseFilterDates(filter, fields) {
39.        if (filter.filters) {
40.            for (var i = 0; i < filter.filters.length; i++) {
41.                parseFilterDates(filter.filters[i], fields);
42.            }
43.        }
44.        else {
45.            if (fields[filter.field].type == "date") {
46.                filter.value = kendo.parseDate(filter.value);
47.            }
48.        }
49.    }
50.     
51.    function onDataBinding() {
52.       
53.    }
54. 
55.    $(document).ready(function () {
56.        var grid = $('#Grid').data("kendoGrid");
57. 
58.        var state = JSON.parse($.cookie("customerState"));
59.        if (state) {
60.            if (state.filter) {
61.                parseFilterDates(state.filter, grid.dataSource.options.schema.model.fields);
62.            }
63.            grid.dataSource.query(state);
64.        }
65.        else {
66.            grid.dataSource.read();
67.        }
68.         
69.        // END: *** Save grid state ***
70.</script>

 

Dan
Top achievements
Rank 1
 answered on 13 Nov 2013
1 answer
45 views
Hi,

Combo box server side filter working  only in IE10 but not IE9/8. When i open developer tool ( under network => start capturing)
ajax request is not sending for IE 9/8 but ajax request sending in IE10. I saw the HTML source code for both ie9 and ie10 . Its was same.

Please find attached scripts and css files


HTML Code.
(.cshtml)
<link href="@Url.Content("~/Content/kendo/2013.2.918/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2013.2.918/kendo.metro.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2013.2.918/kendo.dataviz.metro.min.css")" rel="stylesheet" type="text/css" />

    <script type="text/javascript"  src="@Url.Content("~/Scripts/kendo/2013.2.918/jquery.min.js")"></script>
    <script type="text/javascript"  src="@Url.Content("~/Scripts/kendo/2013.2.918/kendo.all.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/kendo/2013.2.918/kendo.aspnetmvc.min.js")"></script>


<
div>
        @(Html.Kendo().ComboBox()
          .Name("countires")
          .Filter("contains")
           .HtmlAttributes(new { style = "width:250px" })
          .Placeholder("please select")
          .DataTextField("Text")
          .DataValueField("Value")
          .DataSource(source =>
              source.Read(read =>
                      {
                          read.Url("http://localhost:59590/api/Search/GetCountires");
                      }).ServerFiltering(true))
          .HighlightFirst(true)
          .IgnoreCase(true)
          .AutoBind(false)
          .Suggest(true)
    )
    </div>
Server side code

[HttpGet]
 public List<MVC.SelectListItem> GetCountires(string text)
 {
     
     text = string.IsNullOrEmpty(text) ? null : text.ToUpper();
     DataTable results = Counties.GetALLCountires(text);
     return ConvertToSelectListItem(results);
 
 }

Petur Subev
Telerik team
 answered on 13 Nov 2013
4 answers
469 views
Hi

How can i use the x-kendo-template for my grid toolbar?

Before I got something like this:
kendoGrid({
toolbar: kendo.template($("#toolbarTemplate").html())
});

and a corresponding script like:
<script type="text/x-kendo-template" id="toolbarTemplate">
  <div class="toolbar">
  </div>
</script>

how can i use the same template script inside asp.net mvc kendo ui grid
@(Html.Kendo().Grid(Of CProductionDataGridViewModel)().Name("datagrid").ToolBar(Sub(toolbar)
  toolbar.Template("kendo.template($('#toolbarTemplate').html()")
End Sub))

Thanks
Matt Miller
Top achievements
Rank 1
 answered on 12 Nov 2013
3 answers
678 views
Here is a code snip:
@Html.Kendo().MultiSelectFor(model => model.Programs).BindTo((SelectList)ViewBag.Programs).DataTextField("Text").DataValueField("Id").Name("SelectedProgramIds ")
ViewBag.Programs is populated by:
Models.Program[] obj = model.List();
ViewBag.Programs = new SelectList(obj, "Id", "Name", project.Programs);

I'm also using:
public IEnumerable<String> SelectedProgramIds { get; set; }
.. as the property for the saved value in the model.

After I POST, SelectedProgramIds  contains the Text Name (but not values) of the entries in the MultiSelect control.  How can I get the Value as set by 
DataValueField(), instead of the DataTextField() after POST?

Also, when the control loads, how can existing items be selected?  Currently the box is empty.
Petur Subev
Telerik team
 answered on 12 Nov 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?