Questions on UI for ASP.NET MVC Forum

1 answer

685 views

How to validate model on the server when Kendo grid is configured for ajax call?

I’m using MVC Kendo grid and few drop down lists as filters and search button. Grid is bound using Ajax. The filters are defined outside of the grid. When user clicks on the search button i am passing the selected filter values to action method as Model, do the search and return the result. This is working fine when user selects the filter.
However, One of the filter is required filter, so I have [Required] attribute on the model’s property. When user don’t select the required filter, it makes the GetData() action method as expected, I see ModelState is NOT valid as expected.
But here im not sure what should I return when Model is not valid,
Questions:
I have validation summary on the layout page, how do I show model error in ValidationSummary without clearing the grid?When action method returns error, I don’t want to clear the existing result in the Grid. The error should display on top of the page.

Note: For brevity purpose my sample below showing only one filter. Also I’m not worrying about client side validation.

Layout Page

<html>

<head>

@Styles.Render("~/Content/css")

@Styles.Render("~/Content/kendo/css")

@Scripts.Render("~/bundles/modernizr")

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/kendo")

@Scripts.Render("~/bundles/bootstrap")

@Scripts.Render("~/bundles/jqueryval")

</head>

<body>

<div class="container body-content">

@Html.ValidationSummary()

@RenderBody()

<footer></footer>

</div>

@RenderSection("scripts", required: false)

</body>

</html>

Index Page

@model MyModel

            @{

                ViewBag.Title = "Index";

                Layout = "~/Views/Shared/_Layout.cshtml";

            }

            <h2>Index</h2>

            <div>

                <br />

                @Html.ListBoxFor(x => x.SelectedIDs, new MultiSelectList(Model.States, "ID", "Name"))

                @Html.ValidationMessageFor(m => m.SelectedIDs)

            </div>

            <input id="btnSearch" type="submit" width="100" value="Search" />

            @(Html.Kendo().Grid<Person>()

               .Name("grid")

               .Columns(col =>

               {

               col.Bound(p => p.ID);

               col.Bound(p => p.Name);

               })

               .DataSource(ds =>

               ds.Ajax()

               .Read(r => r.Action("GetData", "Working"))

               .PageSize(3))

               .Pageable()

               .Sortable()

               .AutoBind(false)

            )

            <script src="~/Scripts/Working.js"></script>

JavaScript

$(function () {

                var myModel = {

                    SelectedIDs: []

                };



                var dataSource = $("#grid").data("kendoGrid").dataSource;

                dataSource.transport.options.read.data = getFilters;

                $("#btnSearch").click(function () {

                    myModel.SelectedIDs = $("#SelectedIDs").val();

                    $("#grid").data("kendoGrid").dataSource.read();

                    $("#grid").data("kendoGrid").refresh();

                })

                function getFilters() {

                    return myModel;

                }

            })

Controller

public class WorkingController : Controller

            {

                public ActionResult Index()

                {

                    var model = new MyModel();

                    return View(model);

                }



                public ActionResult GetData([DataSourceRequest]DataSourceRequest request, MyModel model)

                {

                    if (!ModelState.IsValid)

                    {

                        // What should i return here so that Model error message will appear in ValidationSummary ???

                    }

                    return Json(MockData.GetPersons().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

                }

            }

Model

public class MyModel

    {

        [Required(ErrorMessage = "State is required.")]

        public int[] SelectedIDs { get; set; }

        public IEnumerable<State> States

        {

            get

            {

                return MockData.GetStatesWithAbbr();

            }

        }

        public IEnumerable<Person> Persons { get; set; }

    }

Grid

answered on 23 Jun 2015

1 answer

2.2K+ views

How to implement a header template

I'm looking to make a custom header for my grid. In the end, I want it to have the title, sorting arrows, and a custom filter image button that bypasses the built-in filtering of the grid.
To start off though, how do I get it to display the title?

01.Html.Kendo().Grid<dynamic>()

02. .Name("grid")

03. .Filterable(filter => filter.Enabled(false))

04. .DataSource(ds => ds.Ajax().Read(read => read.Action("action", "controller")))

05. .Columns(columns =>

06. {

07. columns.Bound("field")

08. .Title("title")

09. .Sortable(true)

10. .HeaderTemplate("???");

11. });

Grid

answered on 23 Jun 2015

1 answer

134 views

Selection over a PanelBar

Hi All

I'm trying to start using my license, but I'm doing something wrong for sure.

I copy to my page of a project that is working, the following script from a new project create thru template Telerik \Web\c# ASP.NET MVC Application, from Index.cshtml. (@(Html.Kendo().PanelBar()..."

But I don't have any change, I move the mouse over the bar, and I saw the new bar, but nothing happen when I click over that position.

I suppose is missing some bundles, but I don't know what js is missing.

In the new project everything works well, but not in my.

Any clue what I must do?

Paulo Afonso

PanelBar

answered on 23 Jun 2015

6 answers

844 views

Using a DisplayTemplate

Hi everyone,

I have a grid in batch edit mode. When a cell gets in edit-mode it uses (if specified) its EditorTemplate. My question now is, if I am also able to somehow use a DisplayTemplate for the time the cells are in display-mode?

I have a property with an UIHint on the template I wanna use. The problem is, he only uses the EditorTemplate in edit-mode, but not the DisplayTemplate in display-mode. Is there any possibility of doing this? I know that I can use the .ClientTemplate property on the columns. But I wanna use intellisense, and I need to implement a hole bunch of JavaScript-Methods.

Hope there is a way and someone can show it to me :)

The funny thing is: when the grid is loaded he calls the DisplayTemplate once (actually the grid needs it! Without a DisplayTemplate with the same name as the EditorTemplate nothing works!)

best regards, Mathias

Grid

answered on 23 Jun 2015

1 answer

53 views

MVC Grid not accessible after AJAX HTML response added to DOM

Hi,

I am using the ASP.NET MVC Grid control on a page. The functionality is to fire a AJAX query when a Grid row is selected. The AJAX query calls the MVC Controller and gets a response HTML.

The response HTML is a Tab Strip with 4 tabs , all of them are empty except for one which shows a hierarchy (built using <ul> and <li> tags).

Scenario,

When Grid loads, it gets the data from one of the MVC controllers
When a row is selected, the "onChange" event fires and a AJAX call pulls the HTML response with the Tabstrip
Once the AJAX response comes back, it is added to the DOM using $('#DrillDown').html(data)

Issue

Once the AJAX response is added to the DOM, the GriD is no longer accessible. None of the rows are selectable anymore, the below line returns null

var grid = $('#MasterGrid').data("kendoGrid");

Any help appreciated.

-Harris

Grid

answered on 22 Jun 2015

1 answer

192 views

MultiSelectFor - javascript error when deleting selected item

Hi there,

I am using the MultiSelectFor control bound to a model property in a MVC 5 razor webpage. I am able to select multiple items and create data in our backend system - however, I am running into a few problems when editing this data.

Model property:

[DataType("MultiSelect")]

[Required]

public List<string> Teams { get; set; }

Editor Template:

@model IList<string>

@Html.Kendo().MultiSelectFor(m => m)

.DataTextField("Text")

.DataValueField("Value")

.Filter("contains")

.AutoClose(false)

.Placeholder("Please Select")

.ValuePrimitive(true)

.Deferred()

.BindTo(selectList)

.ToClientTemplate();

The list it is bound to is an IEnumerable<SelectListItem>

When the screen loads, everything appears fine - the multiselect field is bound to the correct items and displays correctly.

However, if I attempt to remove one of the selected items by clicking on the delete option, I receive a javascript error in kendo.all.min.js:

0x800a138f - JavaScript runtime error: Unable to get property 'top' of undefined or null reference

The multiselect then appears to have lost it's list of values, which will only reappear if I start typing.

Any ideas what could be the issue here? If I expand the list first prior to deleting, I receive no issues when removing a selected item.

Thanks,

Paul.

MultiSelect

answered on 19 Jun 2015

1 answer

499 views

Push realtime data to kendo chart with signalr

I am building an application in ASP.NET MVC where I am building different Kendo charts to show realtime data with SignalR. I am trying to let the Hub push data constantly to the chart. But I only manage to let the chart update its data on page load, not realtime.

<script src="@Url.Content("~/Scripts/jquery.signalR-2.2.0.min.js")"></script>

<script src="@Url.Content("~/signalr/hubs")"></script>

<script>

var hub,

hubStart;

$(function () {

var hubUrl = "http://localhost:52373/signalr/hubs";

var connection = $.hubConnection(hubUrl, { useDefaultPath: false });

hub = connection.createHubProxy("serverHub");

$.connection.hub.logging = true;

hubStart = connection.start();

});

</script>

@(Html.Kendo().Chart<Model.ServerState>()

.Name("server1")

.Title(title => title

.Text("Server 1")

.Color("White")

.Font("25px Arial")

)

.Legend(legend => legend

.Color("Gray")

.Position(ChartLegendPosition.Bottom)

.Font("20px Arial")

)

.ChartArea(chartArea => chartArea

.Background("transparent")

)

.SeriesDefaults(seriesDefaults =>

seriesDefaults.Line().Style(ChartLineStyle.Smooth)

)

.Series(series =>

{

series.Line(model => model.Performance.Memory).Name("Memory");

series.Line(model => model.Performance.Processor).Name("Processor");

})

.CategoryAxis(axis => axis

.Title(categoryTitle => categoryTitle

.Text("Time")

.Font("25px Arial"))

.Color("Gray")

.Labels(labels => labels

.Font("20px Arial"))

.MajorGridLines(lines => lines.Visible(false))

)

.ValueAxis(axis => axis

.Numeric().Labels(labels => labels.Format("{0}%"))

.Line(line => line.Visible(false))

.AxisCrossingValue(-10)

.Color("Gray")

.Labels(labels => labels

.Font("20px Arial"))

)

.Tooltip(tooltip => tooltip

.Visible(true)

.Format("{0}%")

)

.DataSource(source => source

.SignalR()

.AutoSync(true)

.Transport(transport => transport

.Promise("hubStart")

.Hub("hub")

.Client(c => c

.Read("read"))

.Server(server => server

.Read("read")

))

.Schema(schema => schema

.Model(model =>

{

model.Id("Id");

model.Field("Id", typeof(int)).Editable(false);

model.Field("Memory", typeof(float));

model.Field("Processor", typeof(float));

}

)

))

)

//Best case:

public ServerStateEvent Read()

{

//Inside thread which pushes an message containing the object to kendo chart

Clients.All.sendMessage(msg);

}

//Current case, this method has to be called by kendo chart to update its data realtime

public ServerStateEvent Read()

{

//this method gets data and returns it to kendo chart

return msg;

}

What I want is the "best case" where the Hub pushes data with the sendMessage function to kendo. This does not seems possible?

The current case works but only one time, the autoSync in kendo does not help.

Chart

answered on 19 Jun 2015

7 answers

697 views

ForeignKey column not showing dropdown when column is edited

I have been pulling my hair out for the past two days on something that should be basic. I have a grid using the ForeignKey to display a foreign key field. When I open the screen all of the items with a existing foreign key assigned get interpreted correctly and show the Name column, not the key. But, when I edit the column it shows the key with no combo. Code snippets are in the attached file.

I am sure it is something simple, but I cannot figure it out.

Any help will be appreciated.

Grid

answered on 19 Jun 2015

1 answer

120 views

foreign key column data viewdata not cleared

I am using a foreign key column in my grid, and populate the data from viewdata as below

columns.ForeignKey(c => c.PersonId, (SelectList)ViewData["PersonSource"]);

I set the ViewData["PersonSource"] at the page load and the values are updated correctly.

But in UI the column populates the values from the cache rather than the ViewData. It works fine if I manually clear the browser cache.

Anyways I can overcome this issue?

Grid

answered on 18 Jun 2015

11 answers

694 views

"Add new" when item not available in list

I came across this thread on the same issue, but without the use of server wrappers, which in my mind sort of complicates what I'm trying to accomplish. It led me to this example at JS Bin, but I can't seem to implement this in my existing code. Do you guys have any suggestions in regards to approaching this particular 'problem'?

Here's what I have today:

<div class="span3">

@(Html.Kendo().MultiSelect()

.Name("tags")

.Placeholder("No tags selected for this unit")

.BindTo(new SelectList(Model.TagsAvailable))

.Events(e => e

.Select("select")

.Change("change"))

.Value(Model.TagsSelected.ToArray())

)

</div>

<script>

function select(e) {

var dataItem = this.dataSource.view()[e.item.index()];

var param = dataItem.Text;

var url = '@Url.Content("~/UnitDetails/TagUnit/" + Model.UnitId)';

$.ajax({

url: url,

data: { selectedItem: param },

type: 'GET',

dataType: 'json',

success: function (data) {

},

error: function () {

}

});

};

function change(e) {

var dataItem = this;

var param = dataItem.element.context.innerText;

var url = '@Url.Content("~/UnitDetails/UnTagUnit/" + Model.UnitId)';

$.ajax({

url: url,

data: { selectedItem: param },

type: 'GET',

dataType: 'json',

success: function (data) {

},

error: function () {

}

});

};

</script>

This is before I start mixing the code from the example I referenced earlier. Chose to remove it, because it just clutters my code anyway, in addition to not working. Hope you guys can help!

MultiSelect

answered on 18 Jun 2015