Telerik Forums
UI for ASP.NET MVC Forum
1 answer
179 views

I have two dropdown at layout screen which can be use by more than one view.

My first view contain layout screen(with cascading dropdown) and scheduler control.

1.On Page load ,both cascading dropdown should populate with default value with scheduler calendar.

2.Scheduler control should load based on cascading dropdown selection change.

Issue#1 : My second dropdown is not loading and it is disable.

issue#2 : Scheduler control loading before layout dropdowns call. 

Layout view :

@(Html.Kendo().DropDownList()
                      .Name("Facility")
              .HtmlAttributes(new { style = "width:100%" })
                      .DataTextField("FacilityName")
                      .DataValueField("FacilityId")
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetFacilityList", "Facility");
                  });
              })
)

cascading dropdown:

@(Html.Kendo().DropDownList()
              .Name("Location")
              .HtmlAttributes(new { style = "width:100%" })
                      .DataTextField("LocationName")
                      .DataValueField("LocationId")
                      .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetFacilityLocationsList", "Facility")
                          .Data("filterLocations")
                       .Type(HttpVerbs.Post);
                  })
                  .ServerFiltering(false);
              })
              .Enable(true)
              .AutoBind(true)
                      .CascadeFrom("Facility")
                                )
                                <script>
                                    function filterLocations() {
                                        alert("filter");
                                        return {
                                            facilityId: $("#Facility").val()
                                        };
                                    }

 

Sceduler partial view:
 @(Html.Kendo().Scheduler<ORSA.ViewModel.ScheduleViewModel>()
          .Name("scheduler")
          .Date(DateTime.Today)
                  .StartTime(6, 00, 00)
                  .EndTime(23, 00, 00)
          .Height(800)
          .Views(views =>
          {
              views.WeekView(weekView => weekView.Selected(true));

          })
                  .Editable(editable =>
                  {
                      editable.TemplateName("CreateCase");
                  })
          .Timezone("Etc/UTC")
          .Group(group => group.Resources("Rooms"))
          .Resources(resource =>
          {
              resource.Add(m => m.Room.RoomId)
                  .Title("Rooms")
                  .Name("Rooms")
                  .DataTextField("RoomCode")
                  .DataValueField("RoomId")
                  .BindTo(Model.RoomList);
          })
              .DataSource(d => d.Read("DisplayBlocks", "Schedule"))

    )

Georgi Krustev
Telerik team
 answered on 24 Feb 2016
2 answers
643 views

Hi,

I'm currently looking into multi-select filtering for grids; I'm working with a very extensive grid that contains more than 100,000 meteorologic measured data from only about 30 distinct cities. I want the user of the grid to be able to filter the grid by one, multiple or all cities. In my controller, I do have a method that returns an array of the distinct city names, but I've yet to find a method to implement this.

This is the current code for the relevant column:

columns.Bound(c => c.MeteringStation).Title("Messstation").Width(200).Filterable(ftb => ftb.Multi(true).BindTo());

I figured I'd use .BindTo() for this, because .DataSource() doesn't seem to work. However, I don't know how to bind remote data to BindTo().

Thanks in advance

 

Jonah
Top achievements
Rank 1
 answered on 24 Feb 2016
9 answers
426 views

Hi,

 When I try to get row number from the second grid nested I get null value. Do you know the way to get the correct value?

 

@(Html.Kendo().Grid<ExpeditionViewModel>()
        .Name("expeditions")
        .HtmlAttributes(new { style = "height: 100%; border: 0;" })
        .Scrollable()
        .ToolBar(t =>
        {
            if (User.IsInRole("Modify"))
            {
                t.Create().Text("Nova Expedició");
            }
        })
        .Columns(columns =>
        {
            columns.Bound(f => f.ExpeditionID).Width(100);
            columns.Bound(f => f.Data).Width(80);
            columns.ForeignKey(f => f.TransportID, (System.Collections.IEnumerable)ViewBag.Transports, "ContactID", "CodAutor").Width(100);
            columns.Bound(f => f.Matricula).Width(80);
            columns.ForeignKey(f => f.XoferID, (System.Collections.IEnumerable)ViewBag.Xofers, "PersonID", "Nom").Width(200);
            columns.ForeignKey(f => f.OrigenID, (System.Collections.IEnumerable)ViewBag.Centres, "ContactID", "CodAutor").Visible(false);
            columns.ForeignKey(f => f.DestiID, (System.Collections.IEnumerable)ViewBag.Centres, "ContactID", "CodAutor").Width(80);
            columns.Bound(f => f.Kg).HtmlAttributes(new { style = "text-align: right;" }).Width(90);
            columns.Bound(f => f.Ticket).Width(80);
            columns.Bound(f => f.Reparto).HtmlAttributes(new { style = "text-align: right;" }).Width(80);
            columns.Bound(f => f.TotalLitres).HtmlAttributes(new { style = "text-align: right;" }).Width(90);
            columns.Bound(f => f.TotalKg).HtmlAttributes(new { style = "text-align: right;" }).Width(90);
            if (User.IsInRole("Modify"))
            {
                columns.Command(commands =>
                {
                    commands.Edit();
                    commands.Destroy();
                });
            }
        })
        .Editable(e => e.Mode(GridEditMode.PopUp).Window(w => w.Width(330)))
        //.Events(e => e
        //    .Edit("expedition_onEdit")
        //)
        .Pageable(pageable => pageable.Refresh(true))
        .Sortable()
        .Filterable()
        .ClientDetailTemplateId("Expedition_DetailTemplate")
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(18)
            .Model(m =>
            {
                m.Id(f => f.ExpeditionID);
                m.Field(f => f.TransportID).DefaultValue(ViewBag.DefaultTransportID);
                m.Field(f => f.OrigenID).DefaultValue(ViewBag.DefaultCentreID);
                m.Field(f => f.DestiID).DefaultValue(ViewBag.DefaultCentreID);
            })
            .Events(e => e
                .Error(@<text> function(e) { onError(e, "expeditions"); }</text>)
            )
            .Sort(s => s.Add(f => f.ExpeditionID).Descending())
            .Read("ExpeditionRead", "Planning")
            .Create("ExpeditionCreate", "Planning")
            .Update("ExpeditionUpdate", "Planning")
            .Destroy("ExpeditionDestroy", "Planning")
        )
    )
 
    @{
        Func<object, object> expeditionDetailError = @<text>
            function(e) {
                if (e.errors) {
                    onError(e, "expeditionDetail_#=ExpeditionID#");
                }
            }
        </text>;
 
        Func<object, object> expeditionRequestEnd = @<text>
            function(e) {
                onRequestEnd(e, "expeditionDetail_#=ExpeditionID#");
            }
        </text>;
 
        Func<object, object> expeditionEdit = @<text>
            function(e) {
                expeditionDetail_onEdit(e, "expeditionDetail_#=ExpeditionID#");
            }
        </text>;
    }
 
    <script id="Expedition_DetailTemplate" type="text/x-kendo-tmpl"><=== Second Grid
        <div class="row">
            @(Html.Kendo().Grid<ExpeditionDetailViewModel>()
                .Name("expeditionDetail_#=ExpeditionID#")
                .ToolBar(t =>
                {
                    if (User.IsInRole("Modify"))
                    {
                        t.Create().Text("Afegir Servei");
                    }
                })
                .Columns(columns =>
                {
                    columns.Bound(f => f.ServiceID).Width(80);
                    columns.Bound(f => f.ProductorID).Hidden();
                    columns.Bound(f => f.CodAutor).Width(80);
                    columns.Bound(f => f.ProductorName).Width(350).Filterable(f => f.Operators(g => g.ForString(h => { h.Clear(); h.Contains("Conté"); })));
                    columns.Bound(f => f.Poblacio).Filterable(f => f.Operators(g => g.ForString(h => { h.Clear(); h.Contains("Conté"); })));
                    columns.Bound(f => f.DataOrdre).Width(80);
                    columns.ForeignKey(f => f.HolderID, (System.Collections.IEnumerable)ViewBag.Centres, "ContactID", "CodAutor").Width(80);
                    columns.ForeignKey(f => f.DocTypeID, (System.Collections.IEnumerable)ViewBag.DocTypes, "OptionID", "ShortName").Width(50);
                    columns.Bound(f => f.DocNum).Width(80);
                    columns.Bound(f => f.JustNum).Width(40);
                    columns.ForeignKey(f => f.Reference, (System.Collections.IEnumerable)ViewBag.CatalegResidus, "Value", "Text");
                    columns.Bound(f => f.Litres).Width(60);
                    columns.Bound(f => f.Kg).Width(60);
                    columns.ForeignKey(f => f.StateID, (System.Collections.IEnumerable)ViewBag.ServiceStates, "OptionID", "Name").Width(100);
                    columns.ForeignKey(f => f.OwnerID, (System.Collections.IEnumerable)ViewBag.Users, "PersonID", "Nom").Visible(false);
                    if (User.IsInRole("Modify"))
                    {
                        columns.Command(commands =>
                        {
                            commands.Edit();
                            commands.Destroy();
                        });
                    }
                })
                .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("ExpeditionDetailEdit"))
                .Events(e =>
                {
                    e.Edit(expeditionEdit);<== Event Edit
                })
                .Pageable(pageable => pageable.Refresh(true))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model =>
                    {
                        model.Id(a => a.ServiceID);
                        model.Field(f => f.HolderID).DefaultValue(ViewBag.DefaultCentreID);
                        model.Field(f => f.StateID).DefaultValue((short)serviceState.Planned);
                        model.Field(f => f.OwnerID).DefaultValue(ViewBag.Usuari);
                    })
                    .Events(e => e
                        .Error(expeditionDetailError)
                        .RequestEnd(expeditionRequestEnd)
                    )
                    .Read("ServiceRead", "Planning", new { ExpeditionID = "#=ExpeditionID#" })
                    .Create("ServiceCreate", "Planning", new { ExpeditionID = "#=ExpeditionID#" })
                    .Update("ServiceUpdate", "Planning")
                    .Destroy("ServiceDestroy", "Planning")
                ).ToClientTemplate()
            )
        </div>
    </script>
</div>

Event Edit

function expeditionDetail_onEdit (e, gridName) {
        if ($("#DocTypeID").val() != @((short)documentType.FI))
            $("#JustNum").hide();
 
        var grid = $("#"+gridName).data("kendoGrid");
        //var data = grid.dataItem($(this).closest("tr"))
        var row = grid.tbody.children(".k-grid-edit-row");<== row = null
        var data = grid.dataItem("tr:eq(0)");
 
         
        //var grid = $("#"+gridName).data("kendoGrid");
        //var row = grid.dataItem(this.select());
        //var row = grid.tbody.children(".k-grid-edit-row");
 
        //var codi = row.find("[name=ServiceID]").text();
        //var name = row.find("[name=ProductorID]").text();
         
        //var productor = codi + ' - ' + name;
         
 
        //$("#ProductorID").data("kendoComboBox").input.val(productor);
 
         

Popup Template

<div class="container-fluid">
    <div class="row">
        <div class="form-horizontal col-md-12" style="width:905px">
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.DataOrdre, new { @class = "col-md-1 control-label" })
                <div class="col-md-2">
                    @Html.EditorFor(model => model.DataOrdre)
                </div>
                @Html.LabelFor(model => model.HolderID, new { @class = "col-md-1 control-label" })
                <div class="col-md-2">
                    @Html.EditorFor(model => model.HolderID)
                </div>
            </div>
 
            <div class="form-group">
                @Html.LabelFor(model => model.DocTypeID, new { @class = "col-md-1 control-label" })
                <div class="col-md-1">
                    @Html.EditorFor(model => model.DocTypeID)
                </div>
                <div class="col-md-1">
                    @Html.Kendo().TextBoxFor(m => m).Name("DocNum").HtmlAttributes(new { style = "width:100px" })
                </div>
                <div class="col-md-1">
                    @Html.Kendo().TextBoxFor(m => m).Name("JustNum").HtmlAttributes(new { style = "width:40px", maxlength = "2" })
                </div>
            </div>
 
            <div class="form-group">
                @Html.LabelFor(model => model.ProductorID, new { @class = "col-md-1 control-label" })
                <div class="col-md-4">
                    @Html.EditorFor(model => model.ProductorID)
                </div>
            </div>
 
            <div class="form-group">
                @Html.LabelFor(model => model.Observacions, new { @class = "col-md-1 control-label" })
                <div class="col-md-9">
                    @Html.TextAreaFor(model => model.Observacions, new { @class = "form-control", @rows = 5 })
                </div>
            </div>
 
            <div class="form-group">
                @Html.LabelFor(model => model.Reference, new { @class = "col-md-1 control-label" })
                <div class="col-md-2">
                    @Html.EditorFor(model => model.Reference)
                </div>
                @Html.LabelFor(model => model.Litres, new { @class = "col-md-1 control-label" })
                <div class="col-md-2">
                    @Html.EditorFor(model => model.Litres)
                </div>
                @Html.LabelFor(model => model.Kg, new { @class = "col-md-1 control-label" })
                <div class="col-md-2">
                    @Html.EditorFor(model => model.Kg)
                </div>
            </div>
 
            <div class="form-group">
                @Html.LabelFor(model => model.Incidencies, new { @class = "col-md-1 control-label" })
                <div class="col-md-9">
                    @Html.TextAreaFor(model => model.Incidencies, new { @class = "form-control", @rows = 5 })
                </div>
            </div>
 
            <div class="form-group">
                @Html.LabelFor(model => model.OwnerID, new { @class = "col-md-1 control-label" })
                <div class="col-md-2">
                    @Html.EditorFor(model => model.OwnerID)
                </div>
                @Html.LabelFor(model => model.StateID, new { @class = "col-md-1 control-label" })
                <div class="col-md-2">
                    @Html.EditorFor(model => model.StateID)
                </div>
            </div>
        </div>
    </div>
</div>

 

Thanks in advance.

 

 

 

Venelin
Telerik team
 answered on 24 Feb 2016
1 answer
297 views
I haven't been able to find this answer anywhere.  How do you set the filter list to sort alphabetically?
Maria Ilieva
Telerik team
 answered on 23 Feb 2016
3 answers
1.3K+ views

I have a page, bound to a model, with several dropdownlistfor controls. These work ok, however, some items on the form only need to be shown depending on the values of other fields. I can do this using the change event on the dropdownlist without a problem.

However, I also need this logic to fire, once the page is initially loaded, (as the page is an edit form as well as a new record form). Using the $(document).ready() function, when I try to read the value from the dropdownlist, I get an undefined or null reference error, as it seems the dropdownlist hasn't yet been bound to the data.

I also get this error using the $(window).load() function.  How can I get the initial value of the dropdown list, once the page has loaded, so I can process the logic needed to show / hide the appropriate sections of the form?

 The code I have is:-

var dropdownlist = $("#Replacement").data("kendoDropDownList");
var dataItem = dropdownlist.dataItem();
var replacementVal = dataItem.Code;
 
if(replacementVal=='Y')
{
    $('#divReplacementPost').show();
}
else
{
    $('#divReplacementPost').hide();
}

Thanks

Georgi Krustev
Telerik team
 answered on 23 Feb 2016
4 answers
1.2K+ views
Hello Support,

I want to trace, entry key press on combobox. I am not able to achieve that, please let me know how could I achieve this.

Thanks,
Parthiv
Kiril Nikolov
Telerik team
 answered on 23 Feb 2016
3 answers
53 views

Hi,

Which Telerik UI Asp.net MVC control we should use to accomplish attached functionality?

 

Thanks

 

Dimiter Madjarov
Telerik team
 answered on 22 Feb 2016
2 answers
239 views
I want to use window with partial view.

There are two function in partial view. When window was opening I got error : "Uncaught SyntaxError: Unexpected token :"

If I remove second parameter(prm2) in second function(getCustomer2) then it works fine.(MyWindowPartial.cshtml line 14)

What can I do?

 

<script>
function getCustomer1()    {
     return {  wfTypeId : @(Html.Raw(Json.Encode(ViewBag.WfTypeId))), 
                folderIdList : @(Html.Raw(Json.Encode(ViewBag.WfTypeId)))        };   }
function getCustomer2()   {
    return  { wfTypeId : @(Html.Raw(Json.Encode(ViewBag.WfTypeId))),
                  prm2 : "deneme"       };
}
 </script>
Slav
Telerik team
 answered on 22 Feb 2016
2 answers
132 views

Hi,

 

I want to load the grid from an offline source like in this example, http://stackoverflow.com/questions/12980444/caching-a-kendo-ui-datasource-object-using-localstorage.   However that example is using KendoUI directly, whereas I am creating the grid using the MVC HtmlHelper.  In the helper there is no overload on the Read method on the DataSource to specify a javascript function.  How do I do the equivalent with the HtmlHelper, or do I need to mix and match?
Scott Waye
Top achievements
Rank 2
Iron
Iron
Veteran
 answered on 22 Feb 2016
3 answers
340 views

Hello,

I've been reading up on the documentation about the customisation of exported excel documents from the grid.  My project is an MVC applicaation using razor views.  My question is how do you marry the grid to the javascript so that when the user presses "export" it runs the function?

For example my grid looks like this:

  @(Html.Kendo().Grid<Widget_Tests.Models.tbl_data>()
        .Name("Grid")
        .Columns(columns =>
            {
                columns.Bound(c => c.old_id).Title("Old ID");
                columns.Bound(c => c.name).Title("Name");
                columns.Bound(c => c.type).Title("Vessel Type");
                columns.Bound(c => c.company).Title("Company");        
            }
        )                
        .ToolBar(toolbar =>
            {
                toolbar.Excel();                               
            }
        )
        .Pageable()
        .Scrollable()
        .Excel(excel => excel
            .FileName("MyGrid.xlsx")            
            .AllPages(true)
            .Filterable(true)           
            )
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(50)
            .Read(read => read.Action("tbl_data_Read", "Home"))            
            )            
        )

Here is the javascript I found in the documentation:

  function saveExcel() {
        var workbook = new kendo.ooxml.Workbook({
            sheets: [
              {
                  columns: [{ autoWidth: true }],
                  rows: [
                    {
                        cells: [
                          {
                              value: "bold and italic",
                              bold: true,
                              italic: true
                          }
                        ]
                    },
                    {
                        cells: [
                          {
                              value: "red text on blue background",
                              color: "#ff0000",
                              background: "#0000ff"
                          }
                        ]
                    },
                    {
                        cells: [
                          {
                              value: "Arial 20px",
                              fontSize: 20,
                              fontName: "Arial"
                          }
                        ]
                    },
                    {
                        cells: [
                          {
                              value: "Right aligned",
                              hAlign: "right"
                          }
                        ]
                    },
                    {
                        cells: [
                          {
                              value: "Centered horizontally and vertically",
                              vAlign: "center",
                              hAlign: "center",
                              rowSpan: 2
                          }
                        ]
                    }
                  ]
              }
            ]
        });
    };

kendo.saveAs({
    dataURI: workbook.toDataURL(),
    fileName: "Test.xlsx"
});

 How do these go together?

 

Dimiter Madjarov
Telerik team
 answered on 22 Feb 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?