Telerik Forums
UI for ASP.NET MVC Forum
2 answers
4.6K+ views

I'm fairly new to MVC (and web development in general) and I keep coming across several 'gotchas' which result in unexpected behaviour. I am using Kendo UI for ASP.NET MVC, however I'm 99% certain that my problem is due to my lack of understanding of either Javascript or MVC rather than anything to do with Kendo.
You should be able to reproduce the problem using the following code:

Models:

public class DemoClass
    {
        public int id { get; set; }
        public string randomData { get; set; }
 
        public List<DemoPartyDetails> partyDetails { get; set; }
 
        public DemoClass()
        {
            partyDetails = new List<DemoPartyDetails>();
        }
    }
public class DemoPartyDetails
    {
        public int id { get; set; }
        public string firstName { get; set; }
        public string surname { get; set; }
 
        public string gender { get; set; }
 
        public DemoPartyDetails()
        {
 
        }
    }

 

Controller:

public class DemoController : Controller
    {
        // GET: Demo
        public ActionResult Index()
        {
            DemoClass demo = new DemoClass();
            return View(demo);
        }
 
        [HttpPost]
        public ActionResult Create(DemoClass model)
        {
            try
            {
                if (model.partyDetails[0].gender != null)
                    Console.WriteLine("Party details populated");
                else
                    Console.WriteLine("Something went wrong...");
 
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
    }

 

View:

@model DemoPortal.Models.DemoClass
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>
<body>
    @using (Html.BeginForm("Create", "Demo", FormMethod.Post))
    {
        <div>
            @Html.EditorFor(model => model.randomData)
        </div>
 
        <div>
            <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-i-add"></span>Add Party</a>
            @(Html.Kendo().ListView(Model.partyDetails)
                    .Name("demoListView")
                    .TagName("div")
                    .ClientTemplateId("demoTemplate")
                    .DataSource(dataSource => dataSource
                        .Model(model => model.Id(x => x.id))
                        )
                    .Editable(editable => editable.TemplateName("DemoPartyDetails"))
            )
        </div>
 
        <input type="submit" value="Submit" />
    }
</body>
</html>
 
 
<script type="text/x-kendo-tmpl" id="demoTemplate">
    <div class="demoParty">
        <h3>#:firstName#</h3>
        <span>#:surname#</span>
 
        <input type="hidden" name="PartyDetails[#:index(data)#].firstName" value="#:firstName#" />
        <input type="hidden" name="PartyDetails[#:index(data)#].surname" value="#:surname#" />
        <input type="hidden" name="PartyDetails[#:index(data)#].gender" value="#:gender#" />
    </div>
</script>
 
 
<script>
$(function() {
        var listView = $("#demoListView").data("kendoListView");
 
        $(".k-add-button").click(function(e) {
            listView.add();
            e.preventDefault();
        });
});
 
function index(dataItem) {
    var data = $("#demoListView").data("kendoListView").dataSource.data();
 
    return data.indexOf(dataItem);
 
}
 
function maleClick(e) {
    document.getElementById("gender").value = "M";
 
    document.getElementById("randomData").value = "random";
 
    var maleButton = document.getElementById("IsMale");
    var femaleButton = document.getElementById("IsFemale");
    femaleButton.classList.remove("k-primary");
    maleButton.classList.add("k-primary");
};
 
function femaleClick(e) {
    document.getElementById("gender").value = "F";
 
    var maleButton = document.getElementById("IsMale");
    var femaleButton = document.getElementById("IsFemale");
    maleButton.classList.remove("k-primary");
    femaleButton.classList.add("k-primary");
};
</script>

 

DemoPartyDetails Editor Template

@model DemoPortal.Models.DemoPartyDetails
 
@using (Html.BeginForm())
{
    <div>
        <div>
            <label>Gender:</label>
            @(Html.Kendo().Button()
                    .Name("IsMale")
                    .Content("Male")
                    .HtmlAttributes(new { type = "button" })
                    .Events(ev => ev.Click("maleClick")))
 
            @(Html.Kendo().Button()
                    .Name("IsFemale")
                    .Content("Female")
                    .HtmlAttributes(new { type = "button", @class = "k-primary" })
                    .Events(ev => ev.Click("femaleClick")))
        </div>
 
        @(Html.HiddenFor(model => model.id))
        @(Html.EditorFor(model => model.gender))
        @(Html.EditorFor(model => model.firstName))
        @(Html.EditorFor(model => model.surname))
 
        <div class="btnArea">
            <a class="k-button k-update-button" href="\\#"><span class="k-icon k-update"></span></a>
            <a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>
        </div>
    </div>
 
}

 

When running this code, I can click the button to add a new party, the editor template appears as expected and I press the 'Male' button, which populates the gender field with "M".

I then fill in the other two fields with generic "Test" and "Person" data before confirming the entry and then pressing submit.
What I find when I place a breakpoint at the controller however is that the model being passed through has the gender set to null. The first name and surname ("Test" and "Person") are fully populated however. The randomData is also fully populated as expected.

Interestingly, if I go back and manually type something like "Male" into the gender field, that is now also populated. It's only when I try to use javascript to set the value that it's null.

The ultimate goal is to have a hidden field populated by javascript when a button is pressed, so if someone could point out my mistake it would be very much appreciated!

Marc
Top achievements
Rank 1
 answered on 01 Nov 2018
1 answer
1.1K+ views

Hi, I am trying Kendo UI for MVc for first time. I am trying to bind a dropdownlist on change event of another dropdownlist.

Here is what I have in view:

<tr>
                <td style="width:20%">Country</td>
                <td style="width:30%">
                    @(Html.Kendo().DropDownListFor(model => model.CommunicationDetailsViewModel[i].CountryId).DataTextField("CountryName").DataValueField("Id").BindTo(Model.CommunicationDetailsViewModel[i].Country).HtmlAttributes(new {  style = "width:280px" })
                                    .Events(e => e.Change("country_Change"))
                                    .Name("ddlCountry"))
                </td>
                <td style="width:20%"></td>
                <td style="width:30%"></td>
            </tr>
            <tr>
                <td style="width:20%">State</td>
                <td>
                    @(Html.Kendo().DropDownListFor(model => model.CommunicationDetailsViewModel[i].StateId).DataTextField("StateName").DataValueField("Id").BindTo(Model.CommunicationDetailsViewModel[i].State).HtmlAttributes(new {  style = "width:280px" })
                                    .Events(e => e.Change("state_Change"))
                                    .Name("ddlState")
                                    .CascadeFrom("ddlCountry"))
                </td>
                <td style="width:20%"></td>
                <td style="width:30%"></td>
            </tr>

And I am trying to bind the ddlState dropdownlist using ajax like below:

function country_Change() {
    $.ajax({ 
        type: 'GET'
        url: '/api/v1/State/GetStatesFromCountry',   
        dataType: 'json',    
        data: {
            countryId : $("#ddlCountry").val()
        },     
        success: function (states) { 
        $.each(states, function (i, state) { 
            $("#ddlState").append('<option value="' + state.id + '">' +   
                 state.stateName + '</option>');                                                                                                 
        }); 
    }, 
    error: function (ex) { 
        alert('Failed to retrieve states.' + ex); 
    
});
}

 For Now I have 3 countries in table. On page load, all countries can be seen in the country dropdown and its related states in state dropdown. But after Change event occurs, the default value from state dropdown remains as it is, whereas I was expecting it to be filled by states from other countries.

What am I doing wrong? 

Veselin Tsvetanov
Telerik team
 answered on 31 Oct 2018
3 answers
63 views

I have a listview that I need to create a filter for when a user clicks on a button.  The filter it needs to add is very complex and I am at a loss as to how to implement it.  The application I am building is taking an existing Access database application and converting it to MVC.  The filter they used in Access is below.  How can I convert this to work in the function at the bottom?  I have several filters like this to figure out so I greatly appreciate any help you can give me. 

"(((UM)='yes') AND ((FINDATE) Is Not Null) AND ((INVMANDATE) Is Null)) OR (((STKCLASS)='yes') AND ((FINDATE) Is Not Null) AND ((INVMANDATE) Is Null)) OR (((COMMCODE)='yes') AND ((FINDATE) Is Not Null) AND ((INVMANDATE) Is Null)) OR (((COMMONINV)='yes') AND ((FINDATE) Is Not Null) AND ((INVMANDATE) Is Null)) OR (((UM)<>'YES') AND ((STKCLASS)<>'YES') AND ((COMMCODE)<>'YES') AND ((COMMONINV)<>'YES') AND ((INVCTLDATE) Is Not Null) AND ((INVMANDATE) Is Null)) OR (((UM)<>'YES') AND ((STKCLASS)<>'YES') AND ((COMMCODE)<>'YES') AND ((COMMONINV)<>'YES') AND ((REQDATE) Is Not Null) AND ((INVMANDATE) Is Null))"

function filterListview() {
  var listView = $("#lvInvMan").data("kendoListView");
  listView.dataSource.filter({});
  var currentFilters = [], filter;
  var myfilter = {
     logic: "and",
     filters: currentFilters
  };
  listView.dataSource.filter(myfilter);
}

Richard
Top achievements
Rank 1
 answered on 30 Oct 2018
3 answers
1.4K+ views

Yo, so im using the trail version of Telerik and doing some R&D to check if the telerik controls would suit our dev environment.

 

I have a mvc grid on a view, the grid has an additional action button column using the ClientTemplate(), in this column i render image button which has javascript function linked to the click event which also passes the Grid Id as a parameter. and depending on an active status bound to the grid this also decides what image buttons are displayed.

@(Html.Kendo().Grid<Presentation.AccountGridViewModel>()
                .Name("Grid")
                .Columns(columns =>
                {
                    columns.Select().Width(31);
                    columns.Bound(o => o.Id).Groupable(false).Visible(false);
                    columns.Bound(o => o.Name);
                    columns.Bound(o => o.LastUpdated);
                    columns.Bound(o => o.Active);
                    columns.Bound(o => o.Id).ClientTemplate("<img class='grid-button gb-update' src='../Images/icons/update.png' onclick='update(#=Id#)' title='Update'/>" +
                                                "#if(Active){#<img class='grid-button gb-delete' src='../Images/icons/delete.png' onclick='deactivate(#=Id#)'  title='Delete'/>#}#")
                                            .Width(100)
                                            .Title("Actions")
                                            .Filterable(false);
 
                })
                .Pageable(pager => pager.AlwaysVisible(true).ButtonCount(5).PageSizes(new List<object> { 5, 10, 20, 100 }))
                .Sortable()
                .Filterable()
                .Scrollable()
                .PersistSelection()
                .Events(ev => ev.Change("onChange"))
                .ClientDetailTemplateId("template")
                .HtmlAttributes(new { style = "height: 500px;margin-top:40px;" })
                .DataSource(d => d
                .Ajax()
                .Model(a => a.Id(p => p.Id))
                .Read(read => read.Action("CustomAjaxBinding_Read", "Setting"))
                .PageSize(20)
                ))

I have also instantiated a very basic window on the page and the rest i control via javascript.

@(Html.Kendo().Window()
                   .Name("window")
                   .Width(650)
                   .Height(500)
                   .Visible(false)
                   .Actions(actions => actions.Maximize().Close())
                   .Draggable())

 

When the grid button is clicked the javascript function i have opens the window with out any issue,sets the title and centers the window. the problem i am having is how do i dynamically render a MVC partial view inside of the window. loading static content is no issue. is there a javascript equivalent to LoadContentFrom() for the MVC control?

The request should pass the Id parameter from the javascript function to a MVC PartialViewResult action and render the partial view within the Telerik window.

function update(Id) {
    $("#window").data("kendoWindow")
        .center()
        .title('Update Account')
        .content("your current ID is : "+ Id)
        // .LoadContentFrom("Test", "Setting")
        .open();
}

 

The end goal here is to display a form within the window that will allow me to update the record and close the window once the save button is clicked and the grid will also be refreshed to display the updated values.

Thanks in advance

 

Ivan Danchev
Telerik team
 answered on 30 Oct 2018
5 answers
846 views

Hi, I have been trying to change the label steps of my category axis but I cannot find a way in the API to do this except for setting the steps to a fixed number .Labels(label => label.Step(12)).

Is there some built in way to do this or should I create a javascript function that returns the steps and then try to access that inside the razor expression? 

Stamo Gochev
Telerik team
 answered on 30 Oct 2018
2 answers
152 views

Hi,

I have a grid where I want a link in some of the cells in one column. The logic for deciding the link is quite complex, so I wanted to have that logic in the read method for the grid in the controller. It was a bad idea for some reasons, but the strange thing is that the update and destroy methods of the grid stopped working. They were not called at all.

I fooled around a bit and found that if you have a property in the view model that is not even shown in the grid and you have a link in that property the update and destroy methods stop working - they are not called.

The project is quite large, so I have attached only the relevant code snippets. You should be able to test just by adding a string property in any view model and set the value to a link like it is done in the example.

My question is: Is this the desired behaviour of the grid or if I have stumbled on a bug.

Best regards,

Henrik

 

Henrik
Top achievements
Rank 1
 answered on 30 Oct 2018
4 answers
218 views
I have a dropdown list within a tab strip which in some way has a transparent background. The actual control is in front of the grid behind because if I click on the dropdown items they react and everything works correct but I am trying to get the dropdown to not be transparent.
Veselin Tsvetanov
Telerik team
 answered on 30 Oct 2018
1 answer
87 views

Hi

I have a RadGrid with AllowPaging = "True" and PageSize="20", On the OnItemDataBound method I make some rows (e.Item) Display = false.

However the paging totals and the items per page are now incorrect. The totals do not take into account the fact that some rows are now invisible and the number of items per page which was 20 now does not have that amount because some are invisible.

My question is how do I achieve the correct total and how do I get 20 items or rows a page

Attila Antal
Telerik team
 answered on 29 Oct 2018
1 answer
1.9K+ views

I want to be able to conditionally disable selection of a row based on another column on that row.  For example, I don't want to allow the user to select a row if a certain column is null.

I know how to conditionally set row and column attributes on data bound so think it's probably here but not sure what's next

function dataBound(e) {
    var rows = e.sender.tbody.children();
 
    for (var j = 0; j < rows.length; j++) {
        var row = $(rows[j]);
        var dataItem = e.sender.dataItem(row);
 
        // Disable the checkbox if the location isn't set
        if (dataItem.get("Location") === "") {
            row.css('background-color', '#FFFFCF');
            // What goes here?
        }
    }
 
    items = null;
}

 

I also tried to do this on the change event, which kind of work, but the selected IDs (selectedKeyNames) were still being set when the select all checkbox was clicked.

function onChange(e) {
 
    var i = e.sender.select();
    var grid = e.sender;
 
    i.each(function (i, e) {
        var dataItem = grid.dataItem(e);
        if (dataItem.get("Location") !== "") {
            $(e).removeClass("k-state-selected");
        }
    });
 
    items = this.selectedKeyNames();
 
}

 

 

Konstantin Dikov
Telerik team
 answered on 29 Oct 2018
1 answer
654 views

Hi, 

My grid has a column called Merchant which is supposed to turn into a dropdown list on edit.

For some reason, The initial  selected value doesn't connect to the column- does not appear as selected. And when I save on update- The value of the merchant doesn't get the changes on server side- it stays with initial value!!!.

This is the grid:

            @(Html.Kendo().Grid<DefaultLimitViewModel>
            ()
            .Name("DefaultLimitsGrid")           
            .Columns(columns =>
            {
                 columns.Bound(o => o.Id).Hidden();
                columns.Bound(o => o.DateLimitId).Hidden();
                columns.Bound(o => o.Merchant.MerchantName).EditorTemplateName("MerchantEditor").Title("Merchant").Width(150);
                columns.Bound(o => o.Rail).EditorTemplateName("RailEditor").Title("Rail").Width(150);
                columns.Bound(o => o.DefaultAmount).Format("{0:c}");
                columns.Command(command => { command.Edit().CancelText(" ").UpdateText(" ").Text(" "); command.Destroy().Text(" "); }).Width(200);


            })
            .ToolBar(toolBar => toolBar.Create())
            .Sortable()
            .Pageable(x => { x.AlwaysVisible(false); })
            .Scrollable()
            .Editable(editable => editable.Mode(GridEditMode.InLine))         
            .HtmlAttributes(new { style = "height:600px;" })
            .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(8)
            .Read(read => read.Action("Get_LimitsDefaultData", "Limits"))
            .Update(update => update.Action("UpdateDefaultLimit", "Limits"))
            .Destroy(Delete => Delete.Action("DeleteDefaultLimit", "Limits"))
            .Create(Create => Create.Action("CreateNewDefaultLimit", "Limits"))
            .Model(
            model =>
            {
                model.Id(item => item.DateLimitId);
             
            })

            )      
            )
       

 

 

This is the MerchantEditor

@(Html.Kendo().DropDownList()
                    .Name("Merchant")
                    .DataValueField("MerchantId")
                    .DataTextField("MerchantName")
             .DataSource(d => d.Read("Merchants_Read", "Limits")))
   

this is the Merchans_Read function:

 public IActionResult Merchants_Read()
        {
           
            using (var db = Db.Open())
            {
                var merchants = db.Select<Merchant>().OrderBy(x => x.Name).Select(mm => new MerchantModel { MerchantId = mm.Id, MerchantName = mm.Name }).ToList();

                return Json(merchants);
            }

        }

 

 

 

Viktor Tachev
Telerik team
 answered on 29 Oct 2018
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
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
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?