Questions on UI for ASP.NET MVC Forum

2 answers

98 views

Annotating editable, causing grid to fail

What I am trying to do.. is create this grid of CartLines, display them, and allow editing of ONLY the quantity field.
This grid below displays, and is editable (presumably, I haven't implemented the update action but the UI appears to work).

The moment I added .Editable(false) to any of the model.Fields, I get an error that the object is not referring an object ..

>> Object reference not set to an instance of an object.

and that happens before it even tries to call the read action. And I am quite surprised about the behavior on the first column, the picture column. That field is editable also which surprised me. I mean.. I guess i didn't tell it not to.. But it is clearly associating it with the modeId and I would think the modelid is sacred and shouldn't be changed.

Anyway... what's the best way to accomplish this?
Quantity should be editable
Nothing else should be editable.
(though I may add a delete the entire row option)

@(Html.Kendo().Grid<EveShop.Domain.Entities.CartLine>()

.Name("cartGrid")

.DataSource(

dataSource => dataSource

.Ajax()

.Read(read => read.Action("GetCartList", "Cart").Data("additionalCartListData"))

.Model(model =>

model.Id(p => p.Product.ProductID);

model.Field(p => p.Product.Name);

model.Field(p => p.Quantity);

model.Field(p => p.Product.Price)/*.Editable(false)*/;

})

)

.Columns(columns =>

{

        // this first column is really just a picture column, may be a better way to do this

        // than binding it to Product.ProductID?  to an empty field?  didn't see how to do that.

      c

olumns.Bound(line => line.Product.ProductID).ClientTemplate("<img src='" + Url.Content("~/Images/Types/") + "#:Product.ProductID#_64.png' alt='#: Product.ProductID #' />").Title("Picture");

columns.Bound(line => line.Product.Name);

columns.Bound(line => line.Quantity);

columns.Bound(line => line.Product.Price);

})

.Editable(editable => editable.Mode(GridEditMode.InCell))

)

Grid

answered on 26 Mar 2014

1 answer

103 views

[Solved] Always Display Group Message

I am using the grouping function of the Grid. I would like to display the "Drag a column header and drop it here to group by that column" message always, not just when there is no grouping, because I have one column that is grouped by default when the page loads, and the user still needs to know how it works. Is there a way to have this message displayed always?

Grid

answered on 25 Mar 2014

4 answers

380 views

Sample source code for http://demos.telerik.com/kendo-ui/bootstrap/

I am new to the Kendo UI, and I am trying to use Kendo UI with my ASP.NET MVC 5 project, and would like to incorporate different Bootstrap template into my page layout.

I have seen the demo at the following URL:
http://demos.telerik.com/kendo-ui/bootstrap/

And, I am trying to find the source code for this demo to see if I can use it as a template in my ASP.NET MVC 5 project. Does anyone know where can I find this sample source code?

Thank you very much.

Best Regards,

John Jiang

General Discussions

answered on 25 Mar 2014

5 answers

406 views

Set selected item in ddl using ajax binding with value from model

I have a popup window to be used for editing detailed information of a row in a grid. The popup window's content is from a partial view. In this popup window I have a dropdownlist for states. This custom popup edit window is opened when a custom command button is clicked. I call an action on the controller to pull the data to populate the custom popup, I put that data in a model and I have the custom popup using the model. Everything works fine, except the dropdownlist's selected value is not set. It just shows the first item in the list. I've tried setting the .Value option to the model value - .Value(Model.state) - doesn't work. I've tried using the DataBound event to set the value there to the model.State, but I get errors. If I try to declare the event function in the popup partial view, it doesn't get recognized and I get the not declared error. If I try to declare it in the calling view, it doesn't recognize the model (since it's in the partial view). What am I doing wrong? Any help is very much appreciated!

Here's the code:

Calling view (Index.cshtml) - grid and popup window:

@model IEnumerable<GMCEventRegistrationTools.Models.EventRegistrationModel>

@(Html.Kendo().Grid<GMCEventRegistrationTools.Models.EventRegistrationModel>()

.Name("EventRegistrationGrid")

.AutoBind(false)

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(GridEditMode.InLine))

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(p => p.RegistrationKey))

.Read(read => read.Action("Registrants_Read", "Home").Data("registrantsForEvent"))

.Create(update => update.Action("EditingPopup_Create", "Home"))

.Update(update => update.Action("EditingPopup_Update", "Home"))

.Destroy(update => update.Action("EditingPopup_Destroy", "Home"))

)

.Columns(cols =>

{

cols.Bound(p => p.RegistrationKey).Hidden(true);

cols.Bound(p => p.FirstName);

cols.Bound(p => p.LastName);

cols.Bound(p => p.CompanyName);

cols.Bound(p => p.ProvideAccomodations);

cols.Bound(p => p.RegistrationConfirmed);

cols.Command(command => { command.Edit(); command.Destroy(); });

cols.Command(command => command.Custom("Edit Details").Click("editDetails"));

}

)

.ClientDetailTemplateId("registration-client-template")

)

@(Html.Kendo().Window().Name("EditRegDetails")

.Title("Edit Registration")

.Visible(false)

.Modal(true)

.Draggable(true)

.Width(900)

)

function editDetails(e) {

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

var window = $("#EditRegDetails").data("kendoWindow");

window.refresh({

url: '/Home/GetRegistrationDetails',

data: { id: dataItem.RegistrationKey }

});

window.center();

window.open();

}

Controller/Action:

public ActionResult GetRegistrationDetails(int id)

{

EventRegistrationModel eRegistrationModel = new EventRegistrationModel();

using (var eventTools = new WebDBEntities())

{

WebEventRegistration reg = eventTools.WebEventRegistrations.Where(p => p.RegistrationKey == id).FirstOrDefault();

AdditionalInfo ai = new AdditionalInfo();

var serializer = new JavaScriptSerializer();

if (reg != null && (reg.FirstName != null && reg.FirstName != ""))

{

eRegistrationModel.AddressLine1 = reg.AddressLine1;

eRegistrationModel.AddressLine2 = reg.AddressLine2;

eRegistrationModel.City = reg.City;

eRegistrationModel.CompanyName = reg.CompanyName;

eRegistrationModel.EmailAddress = reg.EmailAddress;

eRegistrationModel.EventDetails = serializer.Deserialize<AdditionalInfo>(reg.EventDetails);

eRegistrationModel.EventName = reg.EventName;

eRegistrationModel.FirstName = reg.FirstName;

eRegistrationModel.JobTitle = reg.JobTitle;

eRegistrationModel.LastName = reg.LastName;

eRegistrationModel.MiddileInitial = reg.MiddileInitial;

eRegistrationModel.PhoneNumber = reg.PhoneNumber;

eRegistrationModel.PostalCode = reg.PostalCode;

eRegistrationModel.ProvideAccomodations = reg.ProvideAccomodations == 0 ? true : false;

eRegistrationModel.ReferrerIpAddress = reg.ReferrerIpAddress;

eRegistrationModel.RegistrationConfirmed = reg.RegistrationConfirmed == 0 ? true : false;

eRegistrationModel.RegistrationDate = reg.RegistrationDate;

eRegistrationModel.State = reg.State;

eRegistrationModel.RegistrationKey = reg.RegistrationKey;

}

else

{

return View("Error");

}

return PartialView("EditRegistrationDetails", eRegistrationModel);

}

Partial view with dropdown:

@model GMCEventRegistrationTools.Models.EventRegistrationModel

@using (Html.BeginForm("SaveRegistrationEdit", "Home", FormMethod.Post, new { id = "editregis-form" }))

{

most fields removed for brevity

<div class="form-group">

@Html.LabelFor(model => model.State)

@(Html.Kendo().DropDownListFor(model => model.State).Name("State")

.HtmlAttributes(new { @class = "form-control textbox-size stateslist"})

.DataTextField("State").DataValueField("StateCode")

.DataSource(source => {

source.Read(read =>

{

read.Action("GetStates", "Home");

});

})

.Value(Model.State)

.Events(events => events.DataBound("setSelectedState"))

)

<p class="error">@Html.ValidationMessageFor(model => model.State)</p>

</div>

Thanks!
Donna

DropDownList

answered on 25 Mar 2014

1 answer

292 views

Custom commands at a group level

Hi,

I've just purchased the ASP.Net MVC Kendo UI Grid and I am looking to do the following:-

I have a dataset which in the redacted code below is grouped by RegionalManager like this:-

.DataSource(dataSource => dataSource
.Ajax()
.Group(grp => grp.Add(m => m.RegionalManager ))
.ServerOperation(false)
.Batch(true) // enable batch updates

What I would like to be able to do is somehow add a command at the group level so I could swap the regional manager for an entire grouping.
At the moment, I am only able to add custom commands at the whole grid or row level.

Any help would be much appreciated.

Grid

answered on 25 Mar 2014

3 answers

115 views

ASP.NET MVC Grid - second page doesn't get properly rendered, instead JSON is displayed

I'm evaluation the Telerik ASP.NET MVC UI components and I'm trying to come to grips with the KendoUI Grid for ASP.NET MVC 3. The initial setup works fine, the first page of data is being displayed just fine....

but when I try to go to the second page, my defined function for the Ajax paging does get called just fine, but instead of the page and the grid with the second set of data, I'm seeing a huge blob of JSON data on my screen......

Must have missed something really basic - but I can't seem to find *WHAT* ! The docs aren't really helping - it seems I'm doing everything as prescribed - but it just doesn't work..... no error message or exception or anything - just throws a blob of JSON at me instead of *rendering* it!

Any ideas? What am I missing?

Grid

answered on 25 Mar 2014

2 answers

75 views

[Solved] Dropdown menus dont work in Firefox 28 if page is scrolled down

I just downloaded the trial last week and looked at this example: http://localhost:50335/razor/web/combobox/index
In Firefox 28.0 when I scroll down a bit and then click on the combo box it opens and closes immediately (it`s impossible to select any items). The drop down menu only stays open when I scroll to the top of the page. The same happens with other controls that use a drop down menu (i.e. DropDownList, DatePicker, ColorPicker) and of course it also happens when I make my own ASP.NET MVC page.

The problem only exists in Firefox. Chrome and IE 11 both work fine.

Is there a fix available for this?

General Discussions

answered on 24 Mar 2014

1 answer

227 views

Copy-paste is not working.

Hello,

First of all thanks for providing this control.

Please copy below number number and paste into below link.

1234567890
http://demos.telerik.com/kendo-ui/web/maskedtextbox/index.html

Thanks,
Jayesh Goyani

MaskedTextBox

answered on 24 Mar 2014

4 answers

249 views

Data Access + WebAPI + MVC 4 Server Wrappers

I'm attempting to create a new Kendo UI for ASP.NET MVC 4 project using the MVC Wrappers, Telerik Data Access for the data access layer, and WebAPI controllers, but not having much luck getting all three to work together. It seems like it should be simple, but I'm not sure what I'm missing.

From the Data Access documentation, I can find examples of using Data Access with MVC or Data Access with WebAPI. From the Kendo side of things, I can find tutorials on WebAPI and MVC Wrappers, the Binding to a Web ApiController sample project, the Facts on Using Kendo UI With ASP.NET WebAPI blog, and even the UI for ASP.NET MVC sample application has a grid using WebAPI. But none of these resources seem to use all three of the pieces I'm trying to fit together. I've tried studying the examples that use two of the three parts and modifying them to work with the third, but nothing seems to work.

Does anyone have a good, simple example of using a Data Access layer, with WebAPI, and MVC server wrappers or any pointers on how to modify the Binding to a Web ApiController project to use a Data Access layer instead?

Thanks!

General Discussions

answered on 24 Mar 2014

1 answer

258 views

Trying to add a tooltip to a grid

I cant seem to figure out how to get the value from a hidden column in a kendo grid so that I can then pass it to a call that will return a partial view. Any help would be greatly appreciated.

Here is the code for my grid.

            @(Html.Kendo().Grid(Model.LEOfficerDutyRoster)
                  .Name("dutyrosterscrollerGrid")
                  .CellAction(cell =>
                  {

                      if (cell.Column.Title.Equals("   "))
                      {
                          switch (cell.DataItem.LEO_Availability)
                          {
                              case 0:
                                  cell.HtmlAttributes["class"] = "dataFreeBtn";
                                  break;
                              case 1:
                                  cell.HtmlAttributes["class"] = "dataAssignedBtn";
                                  break;
                              case 2:
                                  cell.HtmlAttributes["class"] = "dataNondutyBtn";
                                  break;
                          }
                      }
                  }
                  )
                  .Scrollable()
                  .Columns(columns =>
                  {
                      columns.Bound(r => r.LEO_OfficerID).Hidden(true);
                      columns.Bound(r => r.LEO_Availability).Title("   ").Width(25);
                      columns.Bound(r => r.FullName).Title("Officer");
                      columns.Bound(r => r.LEO_CallSign).Title("Call Sign");
                      columns.Bound(r => r.LEO_PostName).Title("Post");
                  }
                  )

                  )

            @(Html.Kendo().Tooltip()
                .For("#dutyrosterscrollerGrid")
                .Position(TooltipPosition.Right)
                .Filter("tr")
                .LoadContentFrom("GetToolTipData", "DailyLog")
                .AutoHide(true)
                .Width(300)
                .Height(450)
                .Events(events => events.RequestStart("requestStart"))
               )


            <script type="text/javascript">
                function requestStart(e) {
                    var id = this.select().closest("tr").find("td:eq(0)").text();
                    alert(id);
                }
            </script>

ToolTip

answered on 24 Mar 2014