Telerik Forums
UI for ASP.NET MVC Forum
7 answers
167 views
I am using cascading with a combo box and a multi select
box. You first choose a server in the combo box which gives you a list of users
from that server for the Multi select box. Previous to my upgrading to
2015.1.408 you were able to select multiple servers and multiple users and the
Multi select retained all the previously selected users. With the upgrade to
2015.1.408 the Multi select box is cleared on every read/cascade from the combo
box. We have been using this functionality for over a year now is this a bug or
functionality that you no longer support? Here’s my code.

 <div class="form-group">

                    <h5>Select Server: @Html.Raw(ViewBag.SERVER) </h5>

                    @(Html.Kendo().DropDownList()

                          .Name("ServerID")

                          .OptionLabel(Resources.Select_Server)

                          .DataTextField("ServerName")

                          .DataValueField("ServerID")

                          .HtmlAttributes(new { required = "required",
validationMessage = "Please select a
Server" })

                          .DataSource(source
=>

                          {

                              source.Read(read
=>

                              {

                                  read.Action("GetServers", "DropdownMenus", new { area = "Shared" });

                              });

                          }).Events(e =>
e.Change("onServerChange"))

                          )

                </div>

                <span class="form-group
divider" style="width:400px;">

                    <h5>Select Agent: @Html.Raw(ViewBag.AGENT)</h5>

                    @(Html.Kendo()

                          .MultiSelect()

                          .Name("AgentID")

                          .Placeholder("Select multiple Agents...")

                          .Value(Model.USER_ID)

                          .DataTextField("UserName")

                          .DataValueField("UserID")

                          .HtmlAttributes(new { required = "required",
validationMessage = "Please select some
Agents" })

                          .Events(events => events.Change("agentChange"))

                          .DataSource(source
=>

                          {

                              source.Read(read
=>

                              {

                                  read.Action("GetAgentAndServer", "DropdownMenus", new { area = "Shared" })

                                      .Data("filterServers");

                              })

                                 
.ServerFiltering(true);

                          })

                          .AutoBind(false)

                          .Enable(false)

                          )

                    <input type="hidden" name="serverUsersCache" id="serverUsersCache"  />

                </span>

function onServerChange(e) {

 

        var lineMultiSelect = $('#AgentID').data('kendoMultiSelect');

        lineMultiSelect.enable(true);

        lineMultiSelect.dataSource.read();

    };

function filterServers() {

        return {

            Servers: $("#ServerID").val()

        };

    }
Kiril Nikolov
Telerik team
 answered on 25 May 2015
3 answers
425 views

Hi

I have multiple tree views named role, responsibility, function using local data binding as in the below attached screen shot.  Below is the html view . I need to reload automatically the RoleListView if any changes made on responsibility tree view. i.e if i drag a function and drop it on Responsibility tree view then rolelist should be reloaded with modified responsibilities data automatically. How can i do this. pls assist .

@using Kendo.Mvc.UI;
@using Kendo.Mvc.UI.Fluent;
@using Msc.UAM.Presentation.ViewModel;
@model List<ResponsibilityListView>
 
@(Html.Kendo().TreeView()
            .Name("ResponsibilityList")
        .BindTo(Model, (NavigationBindingFactory<TreeViewItem> mappings) =>
        {
            mappings.For<ResponsibilityListView>
            (binding => binding.ItemDataBound((item, response) =>
            {
                item.Id = response.InternalResponsibilityId.ToString();
                item.Text = response.Description;
                item.SpriteCssClasses = "iconResponsibility";
            })
            .Children(res => res.Functions));
            mappings.For<FunctionListView>(binding => binding.ItemDataBound((item, function) =>
            {
                item.Id = function.InternalFunctionId.ToString();
                item.Text = function.Description;
                item.SpriteCssClasses = "iconFunction";
            }));
        })
        .DragAndDrop(true)
        .Events(events => events.DragStart("OnResponsibilityDragStart")
        .Drop("OnResponsibilityDrop"))
)

@using Kendo.Mvc.UI;
@using Msc.UAM.Presentation.ViewModel;
@model List<FunctionListView>
 
@(Html.Kendo().TreeView()
        .Name("FunctionList")
        .BindTo(Model, (Kendo.Mvc.UI.Fluent.NavigationBindingFactory<TreeViewItem> mappings) =>
        {
            mappings.For<FunctionListView>
            (binding => binding.ItemDataBound((item, function) =>
            {
                item.Id = function.InternalFunctionId.ToString();
                item.Text = function.Description;
                item.SpriteCssClasses = "iconFunction";               
            }));
        })
        .DragAndDrop(true)
        .Events(events => events.Drop("OnFunctionDrop"))
)
@using Kendo.Mvc.UI;
@using Kendo.Mvc.UI.Fluent;
@using Msc.UAM.Presentation.ViewModel;
@model List<RoleListView>
 
@(Html.Kendo().TreeView()
            .Name("RoleList")           
            .BindTo(Model, (NavigationBindingFactory<TreeViewItem> mappings) =>
            {
                mappings.For<RoleListView>
                (binding => binding.ItemDataBound((item, role) =>
                {
                    item.Id = role.InternalRoleId.ToString();
                    item.Text = role.Description;
                    item.SpriteCssClasses = "iconRole";                   
                })
                .Children(role => role.Responsibilities));
                mappings.For<ResponsibilityListView>(binding => binding.ItemDataBound((item, responsibility) =>
                {
                    item.Id = responsibility.InternalResponsibilityId.ToString();
                    item.Text = responsibility.Description;
                    item.SpriteCssClasses = "iconResponsibility";
                }).Children(res => res.Functions));
                mappings.For<FunctionListView>(binding => binding.ItemDataBound((item, function) =>
                {
                    item.Id = function.InternalFunctionId.ToString();
                    item.Text = function.Description;
                    item.SpriteCssClasses = "iconFunction";
                }));
            })
            .DragAndDrop(true)
            .Events(events => events.DragStart("OnRoleDragStart")
                                    .Drop("OnRoleDrop")
                                    .DragEnd("OnDragEnd")
                                    .Expand("OnRoleExpand"))
)

Alexander Popov
Telerik team
 answered on 25 May 2015
2 answers
265 views

HI,

 I am displaying 80 records on a bar chart and when the renders on the screen, all the labels on the category axis are squashed together. 

Is there a way of only displaying the 5th label?

The code i have tried is:

@(Html.Kendo().Chart()
         .Name("string-battery-chart")
         .Title("BATTERY VOLTAGES")
         .Theme("moonlight")
         .Legend(legend => legend.Visible(false))
         .ChartArea(ch => ch.Height(300).Background("transparent"))
         .DataSource(ds => ds.Read(read => read.Action("BatteryVoltageChartData", "STRING")))
         .Series(series =>
         {
             series.Column("Value").CategoryField("BatteryNumber").Name("Volts [V]").Color("#0099ff");
             series.Line("Value").CategoryField("BatteryNumber");
         })
         .CategoryAxis(axis => axis.Title("Battery Number").MajorTicks(ticks => ticks.Skip(4).Step(5)))
         .ValueAxis(axis => axis.Numeric("Value").Title("Volts").Labels(lab => lab.Format("{0}V")))
         .Tooltip(t => t.Visible(true).Template("Battery ${category}: ${value} V"))
         .Transitions(false)
         .Events(e => e.Zoom("onZoom"))
         .Events(e => e.Drag("onDrag"))
         .Events(e => e.DragEnd("onDragEnd"))
         )

Can anyone help please?

Thanks

Scott

Scott
Top achievements
Rank 1
 answered on 24 May 2015
7 answers
1.2K+ views
is it possible to have the pagination on top and bottom of the grid?  today it always sits at the bottom but on our case where the list is big, it would be nice to have it on top so use don't have to navigate to the bottom for pagination.  Thanks.
Laurie
Top achievements
Rank 2
 answered on 22 May 2015
4 answers
2.2K+ views

Hi Guys,

I have a custom button in a nested grid. I want when the user clicks the button to download a file  saved in my database and save it to the local disk.

Whats the best approach? And could you provide a sample of how to call the controller action for download, how to pass ASSIGNMENT_DOCUMENT_ID, and after returning the file from the controller to ask the user where to save it? Not sure how to do post and get or do I need to do a get with the custom button..

Here is my nested grid:

@using PartnerLink.Models
@using Telerik.OpenAccess.SPI
@model Tuple<TBL_ASSIGNMENT, IQueryable<TBL_ASSIGNMENT_EXPENDITURE_VALUE>, IQueryable<TBL_ASSIGNMENT_INCOME_VALUE>, IQueryable<TBL_ASSIGNMENT_VEHICLE>>
 
<div style="height:500px">
    @(Html.Kendo().Grid<AssignmentDocTypesExt>()
        .Name("gridCaseDocuments")
        .Columns(columns =>
        {
            columns.Bound(p => p.ASSIGNMENT_DOCUMENT_TYPE_ID).Hidden(true);
            columns.Bound(p => p.ASSIGNMENT_ID).Hidden(true);
            columns.Bound(p => p.DOCUMENT_TYPE_ID).Hidden(true);
            columns.Bound(p => p.WHICH_APPLICANT).Hidden(true);
            columns.Bound(p => p.DOCUMENT_TYPE_STATUS_ID).Hidden(true);
            columns.Bound(p => p.CREDITOR_ID).Hidden(true);
            columns.Bound(p => p.numOfUploadedFiles).Hidden(true);
            columns.Bound(p => p.documentDescription).Title("Document").Width(350);
            columns.Bound(p => p.whichApplicant).Title("Applicant").Width(100);
            columns.Bound(p => p.documentTypeStatusDescription).Title("Type Status").Width(200);          
            columns.Bound(p => p.COMPLETE_FLAG).Title("Complete").ClientTemplate("<input type='checkbox' #= COMPLETE_FLAG ? checked='checked' :'' # disabled />").Width(90);
            columns.Bound(p => p.autoCompleteOnUpload).Title("Auto Complete").ClientTemplate("<input type='checkbox' #= autoCompleteOnUpload ? checked='checked' :'' # disabled />").Hidden(true);      
            columns.Command(command => { command.Edit().Text("Upload"); }).Width(230);
        })
                .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ClientDocumentUpload").Window(w => w.Events(e => e.Close("onCloseClientDocumentUpload"))))
        .Sortable()
        .Scrollable()
        .ClientDetailTemplateId("gridCaseDocumentsDetails")
        .Pageable(pager => pager.Refresh(true))
        .Resizable(resize => resize.Columns(true))
        .HtmlAttributes(new { style = "height:500px;" })
        .Events(clientEvents => clientEvents.DataBound("onRowDataBoundgridCaseDocuments"))             
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Events(events => events.Error("error_handlerCaseDocuments"))
            .Model(model => model.Id(p => p.ASSIGNMENT_DOCUMENT_TYPE_ID))
            .Read(read => read.Action("CaseDocuments_Read", "Home", new { id = Model.Item1.ASSIGNMENT_ID }))
            .Update(update => update.Action("CaseDocuments_Update", "Home"))           
            )
                       
    )
</div>
 
<script id="gridCaseDocumentsDetails" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<ClientDocumentsExt>()
            .Name("gridCaseDocuments_#=ASSIGNMENT_DOCUMENT_TYPE_ID#")
            .Columns(columns =>
            {
                columns.Bound(m=>m.ASSIGNMENT_DOCUMENT_ID).Hidden(true);
                columns.Bound(m => m.FILE_NAME).Title("File Name");
                columns.Bound(m => m.uploadedBy).Title("Uploaded By").Width(210);
                columns.Bound(m => m.DATE_CREATED).Title("Upload Date").Format("{0:dd/MM/yyyy}").Width(110);
                columns.Command(c => c.Custom("Download").Click("onClickDownloadClientDoc")).Width(110);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(5)
                .Model(model => model.Id(m => m.ASSIGNMENT_DOCUMENT_ID))
                .Read(read => read.Action("gridCaseDocumentsDetails_Read", "Home", new { id = "#=ASSIGNMENT_DOCUMENT_TYPE_ID#" }))
 
            )
            .Pageable(pager => pager.Refresh(true))
            .Sortable()
            .Scrollable()
            .ToClientTemplate()
    )
</script>
 
<script type="text/javascript">
    function error_handlerCaseDocuments(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
 
    $("#gridCaseDocuments").find(".k-grid-content").height(421);
    function onClickDownloadClientDoc(e)
    {
        alert(e.ASSIGNMENT_DOCUMENT_ID);
    }
 
    function onRowDataBoundgridCaseDocuments(e) {
 
        var grid = $("#gridCaseDocuments").data("kendoGrid");
        var gridData = grid.dataSource.view();
        
        for (var i = 0; i < gridData.length; i++) {
            var currentUid = gridData[i].uid;
            if (gridData[i].COMPLETE_FLAG) {
                var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                $(currenRow).css("background-color", "rgb(164,198,57)");
            } else if (gridData[i].numOfUploadedFiles > 0)
            {
                var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                $(currenRow).css("background-color", "rgb(255,191,0)");
            }
        }
    }
    function onCloseClientDocumentUpload()
    {
        alert("onCloseClientDocumentUpload");
    }
</script>

Derek
Top achievements
Rank 1
 answered on 22 May 2015
3 answers
121 views

Hello,

 

What I am trying to achieve is add a placeholder in a dropdownlist that will display the binded model's property. When trying to use DisplayTextFor in the OptionLabel, I get "undefined" first option in the DropDownList. Is there a way to achieve this? I don't want to hardcode the OptionLabel.

 

Thanks

Georgi Krustev
Telerik team
 answered on 22 May 2015
1 answer
63 views

When I build a server bound grid with a pager and you click to go to the next page, it returns you to the top of the page (full page refresh). With an ajax grid, it keeps you at the same location on the page that you were on originally. This is not unexpected behavior, but is there a way to get around it?

Thanks!

Laurie

Laurie
Top achievements
Rank 2
 answered on 21 May 2015
7 answers
870 views
Hello,

My goal is to put a form inside a tabstrip content window. When I use the code below:
@(Html.Kendo().TabStrip()
.Name("tabstrip1")
.Items(tabstrip =>
{
tabstrip.Add().Text("Customer Information")
   .Content(@<div>
          @using (Ajax.BeginForm("AddData", "Customer", new AjaxOptions { HttpMethod = "post" }))
          {
          <input type="button" class="k-button" value="Submit" onclick="checkValues()" />
          }
          </div>
  );
 })
)

What happens is that the form generated by the html helper is not inside the tabstrip's div. Only the Submit button is.

But with the code below:
@(Html.Kendo().TabStrip()
.Name("tabstrip2")
.Items(tabstrip =>
{
    tabstrip.Add().Text("Customer Information")
         .Content(@<div>
                <form action="/Customer/AddData" data-ajax="true" data-ajax-method="post" id="form0" method="post" novalidate="novalidate">
                    <input type="button" class="k-button" value="Submit" onclick="checkValues()" />
                </form>
                </div>
                );
          })
    )

I get my desired effect. The form is inside the tabstrip's div along with the button.

I am just wondering if I'm not really gonna be able to use the html helper to create forms inside the tabstrip's content, or I am just missing something for the html helper to work. Your replies are much appreciated. 
Dimo
Telerik team
 answered on 21 May 2015
5 answers
724 views
I am using a solution from another post to create a click event in order to reload a tab each time you click on it.  I am having one issue though.  Each tab in my tabstrip uses LoadContentFrom to load a partial view.  Each of my partial views are Ajax forms (except for one).  When I add the click even script to the tabstrip, the first time I click on a tab it seems like it is loading it and then it never does.  If I click it a second time then it is fine.  Each time after that it is fine, it is just the first time.  The tab that doesn't have a form on it though does load the first time with no problems.  I am guessing it has something to do with the Ajax form which is calling the Get method on the controller and then the click event performing the same action?

If there is something I am not understanding or simply missing I would appreciate the help.

Here is my view with the tabstrip:

@model PASS.ViewModels.Proposals.UpdateViewModel
 
@{
    ViewBag.Title = "My Proposal";
}
 
<h2>My Proposal</h2>
 
@(Html.Kendo().TabStrip()
    .Name("tsProposal")
    .SelectedIndex(0)
    .Items(items =>
    {
        items.Add().Text("General").LoadContentFrom("_General", "Proposals", new { proposalID = Model.ID });
        items.Add().Text("Required Information").LoadContentFrom("_Required", "Proposals", new { proposalID = Model.ID });
        items.Add().Text("Associates").LoadContentFrom("_Experimenters", "Proposals", new { proposalID = Model.ID });
        items.Add().Text("Research").LoadContentFrom("_Questions", "Proposals", new { proposalID = Model.ID });
        items.Add().Text("Attachments").LoadContentFrom("_Attachments", "Proposals", new { proposalID = Model.ID });
        items.Add().Text("Time Request").LoadContentFrom("_TimeRequests", "Proposals", new { proposalID = Model.ID });
        items.Add().Text("Errors").LoadContentFrom("_Errors", "Proposals", new { proposalID = Model.ID });
    })
)
 
<script type="text/javascript">
$(document).ready(function () {
    var errorCount = @Html.Raw(Json.Encode(Model.Error_Count));
    var tabStrip = $("#tsProposal").data("kendoTabStrip");
 
    if (errorCount == 0) {
        $(tabStrip.items()[6]).attr("style", "display:none");
    }
 
    tabStrip.tabGroup.on('click', 'li', function (e) {
        tabStrip.reload($(this));
    });
})
</script>

And here is one of the partial views that loads into a tab and does not load upoin the first click:
@model PASS.ViewModels.Proposals.GeneralViewModel
 
@using (Ajax.BeginForm("_General", "Proposals", new AjaxOptions { UpdateTargetId = "generalReturnMsg", HttpMethod = "Post" }))
{
 
@Html.HiddenFor(model => model.Proposal_ID, Model.Proposal_ID)
     
<div class="editor-container">
    <div class="editor-label">
        @Html.Label("Title:")
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(model => model.Title, new { style = "width: 350px;" })
        @Html.ValidationMessageFor(model => model.Title)
    </div>
    <br class="clear" />
    <br />
    <div class="editor-label">
        @Html.Label("Total hours requested for LIFE of the proposal")
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(model => model.Total_Hours_Requested)
        @Html.ValidationMessageFor(model => model.Total_Hours_Requested)
    </div>   
    <br class="clear" />
    <br />
    <br />
    <p><input type="submit" value="Save" /></p>
     
    <div id="generalReturnMsg"></div>
 
</div>
     
}

Please let me know if you also need to see the controller code for the Get methods.

Thanks,

Steve









Daniel
Telerik team
 answered on 20 May 2015
1 answer
251 views

I can't seem to find any examples of adding a menu item to a splitbutton in a toolbar.  

Here is the code I have for the splitbutton:

        $("#toolbar").kendoToolBar({
            items: [
                {
                    type: "splitButton",
                    text: "Select",
                    id: "selectButton",
                    click: selectButtonClickHandler,
                    menuButtons: [
                        { text: "foo1" },
                        { text: "foo2" }
                    ]
                }

             ]
        });

I'm trying to do something like $("#selectButton").add(new menuButton("foo3"));

Is there a way to do this?  How have I missed it in the documentation?

Iliana Dyankova
Telerik team
 answered on 20 May 2015
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?