Questions on UI for ASP.NET MVC Forum

4 answers

116 views

[Solved] Grid Options Template/Control/Widget

Hello,

I apologize for the hash of a question this is. I am looking for a way to save the development team some time in a site heavy with kendo grid use. For example we have a grid defined like this:

01.@(Html.Kendo().Grid(Model)

02. .Name("grid")

03. .Columns(columns =>

04. {

05. columns.Bound(e => e.StyleName).Filterable(ftb => ftb.Multi(true));

06. columns.Bound(e => e.Collection).Filterable(ftb => ftb.Multi(true));

07. columns.Bound(e => e.CommodityDesign).Filterable(ftb => ftb.Multi(true));

08. columns.Bound(e => e.Decoration).Filterable(ftb => ftb.Multi(true));

09. columns.Bound(e => e.StyleId).Filterable(ftb => ftb.Multi(true));

10. })

11. .HtmlAttributes(new { style = "width: 80%;" })

12. .DataSource(data => data.Ajax().Model(mdl => mdl.Id(p => p.StyleId) ))

13. .Scrollable()

14. .Groupable()

15. .Sortable()

16. .Editable()

17. .Filterable()

18. .Selectable()

19. .Pageable(pageable => pageable

20. .Refresh(true)

21. .PageSizes(true)

22. .ButtonCount(5))

23. )

The client has accepted this layout and now states they want every grid this way. We certainly could go through and manually crud every grid to match this pattern. I was just trying to think of a way we could use the above as a "template" leaving us just the relevant deltas to configure. For example this pseudo code below:

1.@(Html.CustomKendoGrid(Model)

2. .DataSource(data => data.Ajax().Model(mdl => mdl.Id(p => p.NewProdId))))

TIA

JB

Grid

answered on 11 Mar 2016

1 answer

421 views

MVC Grid with ClientTemplate not displaying correctly

Having a hard time getting a grid with a ClientTemplate that uses a Dropdown control.

Two problems,

1. The text in the grid does not display a proper value, instead it displays the text used to specify the template. So when you add a row, this is what shows up in the column with the ClientTemplate, "#=StateEditor.Name\\#" instead of an actual state name. (I've attached an image to this post)

2. The dropdown works, I can open it and select an item, but once I leave the column, it reverts back to the text, "#=StateEditor.Name\\#".

As far as I can tell, this is a display issue only because the values selected are valid when I submit the grid data to save.

Here is my setup.

Client Template

@model GCSConnections.Model.SelectListItemDto

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

.DataValueField("Id")

.DataTextField("Name")

.BindTo((System.Collections.IEnumerable)ViewData["StateListDto"])

)

This is the SelectListItemDto

public class SelectListItemDto

{

public int Id { get; set; }

public string Name { get; set; }

}

The Controller Method that invokes the screen is:

public ActionResult ProjectManagement()

{

var states = LookupService.Instance.GetStates();

ViewData["StateListDto"] = states;

ViewData["DefaultState"] = states.First();

SupplierDto model = new SupplierDto();

return View(model);

}

The Grid is defined as:

<div class="form-group">

@(Html.Kendo().Grid(Model.LocationEngagements)

.Name("LocationEngagementsGrid")

.Columns(columns =>

{

columns.Bound(l => l.City);

columns.Bound(l => l.State).ClientTemplate("\\#=StateEditor.Name\\#");

})

.ToolBar(toolBar =>

{

toolBar.Create();

toolBar.Save();

})

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

.Sortable()

.Scrollable()

.Events(events => events.Edit("LocationGridEdit"))

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

.Events(events => events.Error("error_handler"))

.Create("GridLocationsEngagement_Create", "Supplier")

.Update("GridLocationsEngagement_Update", "Supplier")

.Model(model =>

{

model.Id(l => l.Id);

model.Field(l => l.Id).Editable(false);

model.Field(l => l.State).DefaultValue(

ViewData["DefaultState"] as GCSConnections.Model.SelectListItemDto);

})

))

</div>

Something to note is that the grid is contained within a parent model so I have to use the excape characters "\\" so specify the in the ClientTemplate definition. If I don't use those, nothing works.

Any ideas?

Grid

answered on 11 Mar 2016

1 answer

5.3K+ views

[Solved] Treeview dataSource how to refresh?

@(Html.Kendo().TreeView()

.Name("treeview")

.TemplateId("treeview-template")

.HtmlAttributes(new { @class = "demo-section" })

.DataTextField("name")

.DataUrlField("Link")

.DataSource(dataSource => dataSource

.Read(read => read

.Action("GetTreeMenu", "Menu")

)

How can i refresh the datasource?
When i changed the menu'name or del it ,the db has changed ,but not changed the monitor?
i don't know how to refresh th datasource?

TreeView

answered on 11 Mar 2016

12 answers

408 views

Kendo UI MVC Upload in IE & Windows Authentication

Hello, I have a problém with Kendo UI MVC Upload component, which doesn't work correctly in IE10 when using Windows authentication. The result is this: http://screencast.com/t/jw7Ph3MNfm.

The actions are not called for these files, because of 401 error. In Chrome everything works as expected and all actions are correctly called for all files. And when I turn off Windows authentication, everything works ok in IE too.

Is there any solution to this problém? I've found this http://stackoverflow.com/questions/18626258/ie-11-or-10-kendo-ui-file-upload-will-not-upload-unless-i-refresh-the-page-ct, but it doesn't seem to work.

Thank you.

Best regards
Ondra Burisin

Upload

answered on 11 Mar 2016

1 answer

545 views

How to pass parent id to child grid new record editor

I have a TreeView that displays a list of database records. When a user selects a record, I populate a grid with the related record details. The foreign key is sourceid.

I pass the selected record's id like this:

.Read(read => read.Action("AquisitionNotes_Read", "AquisitionNotes").Data("GetCurrentSourceID"))

The GetCurrentSourceID function is simply:

function GetCurrentSourceID() {

return {sourceid: currentSourceID };

}

That works.

But when I want to add a new record, how do I get the currentSourceID value into the Post? If I try the obvious:

.Create(update => update.Action("AquisitionNotes_Create", "AquisitionNotes").Data("GetCurrentSourceID"))

The value from the editor (0 of course) gets precedence and gets passed.

How do I force my actual sourceid to overwrite the editor's value? Or am I solving the problem in the wrong way?

- Brad

Grid

answered on 11 Mar 2016

2 answers

172 views

Possible to flip/reorder panes

In a splitter with two panes vertically oriented, is it possible to flip the pane order on the fly? I want to be able to change the pane order so one is changed from being left to right and vice versa.

Splitter

answered on 10 Mar 2016

1 answer

142 views

ComboBox not aligned on open

Hi,

When I open a ConboBox the dropdown is not aligning correctly (see attached). Below is the html that renders the control.

<div class="k-group">

<div class="col-md-12">@Html.LabelFor(m => m.MobilePhoneNumber)</div>

<div class="col-md-12">

@Html.Kendo().ComboBoxFor(m => m.MobilePhoneCountry).DataTextField("MobilePhoneCountry").DataValueField("MobilePhoneCountryID").BindTo(Model.MobilePhoneCountryList)

</div>

<div class="col-md-12">@Html.TextBoxFor(m => m.MobilePhoneNumber, new { @class = "k-textbox" })</div>

<div class="col-md-12">@Html.ValidationMessageFor(m => m.MobilePhoneNumber)</div>

</div>

Thanks

ComboBox

answered on 10 Mar 2016

3 answers

526 views

Grid inside BeginCollectionItem Helper Extension

Does anyone have any experience using a Telerik Kendo Grid inside of the BeginCollectionItem HTML helper?

I have a view that lists a number of Users. Each time you select a user, that user's details (defined inside an Editor Template which contains the Kendo Grid) are populated into a Kendo Panel Bar. The HTML.BeginCollectionItem extension is being used because you can have "n" number of Users selected at a given time, and I want the user to be able to see multiple Editor Templates at once.

This has worked well for various different controls in the editor template (Kendo Text Boxes, Kendo Combo Boxes, etc.), but the grid is giving us problems. The grid can display the data just fine, but when you click on a cell to edit its values, a generic Javascript error is thrown: "Uncaught SyntaxError: Unexpected identifier". If you dig a little deeper, this is the code block that apparently has the problem (which I believe is kendo code):

(function(d<br>/**/) {<br>return (((d.Users || {})[c57d5c44-c352-4935-8cd7-b3ef45a697f2] || {}).Username)<br>})

I believe the issue revolves around how the BeginCollectionItem extension names the controls inside the Editor Template, but I haven't been able to resolve it. Has anyone seen anything similar?

Grid

answered on 10 Mar 2016

1 answer

177 views

Datepicker start date not same as model date

Hi,

I have this in my view:

@(Html.Kendo().DatePickerFor(model => model.Date).Min(DateTime.Now).Value(@Model.Date).Events(e => e.Change("updateDatePicker")))

Initially, when you look at the datepicker, it shows you the correct date. But when I click it, it opens with today's date selected instead of the date of my model. For example, the date in my model is july 9th 2016 but when I open the datepicker it opens with march 10th 2016 selected.

I have searched a lot but haven't found a solution. Any help is greatly appreciated.

DatePicker

answered on 10 Mar 2016

2 answers

845 views

MVC Grid with Client Side functionality on Model Property

Hello,

I have a model defined as

public class Parent
{
public List<Child> Children { get; set; }
}

public class Child
{
property int Id { get; set;}
property string Name {get; set;}
property int Age {get; set;}
}

My goal is to have a grid on my main page whereas the model is the parent and the grid is used to populate the Children list. I do not want the grid to invoke any server method. It should just populate the Children list. When the parent is saved, I am intending that its Children list will contain the items added within the Parent's POST operation.

I can create the grid, but I can't seem to get it to add items. When I add the toolBar.Create() option, I get the following error;

"The Insert data binding setting is required by the insert command. Please specify the Insert action or url in the DataBinding configuration."

But I don't want any insert action to occur on the server. I just want the grid to populate the Children list on the client.

How can I do this?

Grid

answered on 10 Mar 2016