Questions on UI for ASP.NET MVC Forum

11 answers

484 views

I have a very unique problem here. There are times when I have multiple UI MVC Grids on a page. And the new export to excel works great for it. But what I need to be able to do is export 1 or more grids on the page to a single PDF and in the Excel export each grid to a tab in the excel document. Is there a way to do this?

Grid

answered on 23 Dec 2014

5 answers

301 views

DropDownList in Grid EditorTemplate with ajax datasource data method not working in firefox

I have a dropdownlist in a grid EditorTemplate:

@(Html.Kendo().DropDownList()

.Name("EnvironmentID")

.DataValueField("EnvironmentID")

.DataTextField("Name")

.DataSource(d =>

{

d.Read(r => r.Action("GetEnvironmentsJsonResult", "Home").Data("getCustomerID()")).ServerFiltering(true);

}

)

.OptionLabel("Environment")

)

getCustomerID is:

function getCustomerID() {

var row = $(event.currentTarget).closest("tr");

var grid = $(event.currentTarget).closest("[data-role=grid]").data("kendoGrid");

var dataItem = grid.dataItem(row);

return { customerID: dataItem.CustomerID };

}

this works in chrome, because the event is there, but not in firefox. I've tried passing this and event to the method, but that doesn't seem to work because this isn't a click and an event doesn't exist? How do get the customerID from the row the ddl is in?

DropDownList

answered on 22 Dec 2014

1 answer

822 views

[Solved] Hide filter icon for column and set filter type

Hi, for a filterable grid column, I would like to set the filter type to "contains" and hide the filter icon. Is this possible? Below is column I am working with.

This was easily achievable in Telerik AJAX grid but I have trouble navigating documentation for Kendo. It took me a while to dig through forum posts to find how to set the filter control width.

columns.Bound(m => m.PatientName).Title("Patient Name").Width(170).Filterable(f => f.Cell(c => c.InputWidth(130)));

Grid

answered on 19 Dec 2014

3 answers

129 views

Hover event and dataitem access

I have a couple of challenges regarding the Diagram, which I need to address.

1: I need to be able to add a class to any shape that I add to the Diagram. How do I do this?

2: Once the classes are added, I need to add a delegated hover event to the shapes (which should be easy enough with jquery). My challenge in this case is that I need to be able to access the dataItem of the shape which I have added the event to.

Can anyone help me with this?

Diagram

answered on 19 Dec 2014

4 answers

1.3K+ views

[Solved] GridEditMode.InCell - Destroy Button Not Working

Hi,
I'm trying to use InCell editing with Ajax enabled and a Delete/Destroy button.

@(Html.Kendo().Grid<BreezeU.DAL.UserFile>()

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.Id).Title("Id").Visible(false);

columns.Bound(p => p.Title).Title("Name");

columns.Bound(p => p.LastUpdatedOn).Title("ModifiedDate").Format("{0:MM/dd/yyyy}").Width(140);

columns.Command(commands =>

{

commands.Destroy(); // The "destroy" command removes data items

}).Width(120);

})

.Events(ev => ev.Save(@"function(e){setTimeout(function(){$('#Grid').data('kendoGrid').dataSource.sync()})}"))

.Editable(editable => editable.Mode(GridEditMode.InCell)) // Use inline editing mode

.Filterable()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(p => p.Id); // Specify the property which is the unique identifier of the model

model.Field(p => p.Id).Editable(false); // Make the Id property not editable

model.Field(p => p.LastUpdatedOn).Editable(false); // Make the date property not editable

})

.PageSize(20)

.ServerOperation(false)

.Read(read => read.Action("read", "files").Data("getAntiForgery")) // Set the action method which will return the data in JSON format

.Update(update => update.Action("update", "files").Data("getAntiForgery"))  // Action invoked when the user saves an updated data item

.Destroy(destroy => destroy.Action("delete", "files").Data("getAntiForgery")) // Action invoked when the user removes a data item

)

.Pageable() // Enable paging

.Sortable() // Enable sorting

)

Everything in the above code works great except when I click the Delete button. Nothing happens and no call is sent to the sever.
However, if I simply change it to GridEditMode.InLine then the Delete button works.

Also, I noticed that when using InCell editing, if I include a Save button in the toolbar, the Destroy operation can be triggered by clicking Save. But this is not the behavior I would like.

Is there anyway to have the Delete button call the destroy method when InCell editing is enabled?

Thanks

Grid

answered on 19 Dec 2014

1 answer

244 views

Scheduler stay empty

Hi,

In my app, I have a scheduler that I try to fill using the DataSource.Read but it stay empty.
I verified the data arrives to the client but it seems not to be understand by the control.
Here's a bit of code:

@(Html.Kendo().Scheduler<xxx.Website.Models.Lesson>()

.Name("scheduler")

.Date(new DateTime(2014, 12, 12))

.StartTime(new DateTime(2014, 12, 8, 9, 00, 00))

.EndTime(new DateTime(2014, 12, 5, 14, 00, 0))

.Height(700)

.AllDaySlot(false)

.Views(views =>

{

views.WeekView();

})

.Resources(resource =>

{

resource.Add(m => m.LessonType).Title("Lesson Type").DataTextField("Text").DataValueField("Value").DataColorField("Color").BindTo(new[]{

new { Text = "Group1", Value=1, Color="#DC8166"},

new { Text = "Group2", Value=2, Color="#889DAE"},

new { Text = "Group3", Value=3, Color="#91DE80"},

new { Text = "Group4", Value=4, Color="#FFD24D"}

});

})

.Timezone("UTC")

.Editable(false)

.DataSource(d => d

.Model(m =>

{

m.Id(f => f.Id);

m.Field(f => f.Title).DefaultValue("No title");

})

.Read(read => read.Action("Read_Scheduler", "Administration").Data("getDates"))

)

I already use a scheduler on another page but using the BindTo method which work just fine.
Here I need to call server to update the scheduler when the user change displayed the week.

What do I miss ?

Regards,

David

Scheduler

answered on 19 Dec 2014

1 answer

189 views

Open Window and preload data

Hi,
I am upgrading from Telerik extensions. The code used to open a window and set the datasource for the grid on that page was:

function openTrainWind(trainID) {

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

window.ajaxRequest("/Trains/_Trains/", { _trainID: trainID });

window.center().open();

}

The code has been upgraded to work with Kendo but produces the error "Uncaught TypeError: undefined is not a function"
How would this code need to change to work with Kendo.

Thanks

Window

answered on 18 Dec 2014

3 answers

126 views

update batch grid with a file upload

Hello,

I have been trying to get the batch grid to work with a file upload. The aim is to update the grid with the information in the text file. Would this be a common scenario which has been tried before?

For temporary solution, I processed the uploaded file and save it in the server and render the partial view which contain
@html.Kendo().Grid()

Then, during loading of the partial view, the Read( read.Action ("Test","TestController")) is invoked and load the data from the text file.

Is there a way to set the dirty flag manually after the initial load of the grid so that I can click the save button?

Thank you,

-sk

Grid

answered on 18 Dec 2014

2 answers

724 views

[Solved] Kendo().DropDownListFor not updating, while Html.DropDownListFor does

I have a situation, in which the Kendo().DropDownListFor isn't working as expected; I'm using a dropdown in a KendoGrid edit popup. The user is allowed to choose a user friendly value for a foreign key.

This is working:

@Html.DropDownListFor(m => m, new SelectList(ViewBag.Partners, "Id", "FriendlyName"), "Select Partner")

But this is not:

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

.BindTo(new SelectList(ViewBag.Partners, "Id", "FriendlyName"))

.OptionLabel("Select Partner"))

In both cases, the dropdown is displayed correctly, and the initial value is correctly selected.
However, when saving, the Id field is cleared. When I look at the generated HTML markup, this is a part of it:

<ul unselectable="on" class="k-list k-reset" tabindex="-1" role="listbox" aria-hidden="true" id="PartnerId_listbox" aria-live="off" style="overflow: auto; height: auto;"><li tabindex="-1" role="option" unselectable="on" class="k-item">Select Partner</li><li tabindex="-1" role="option" unselectable="on" class="k-item">Indicia Test SFTP</li><li tabindex="-1" role="option" unselectable="on" class="k-item">Indicia Test Mail</li><li tabindex="-1" role="option" unselectable="on" class="k-item">Indicia Test FS</li><li tabindex="-1" role="option" unselectable="on" class="k-item k-state-selected k-state-focused" id="PartnerId_option_selected" aria-selected="true">Test Jesse</li></ul>

As you can see, no Id's are in the markup, which I find suspicious.

Here is how the ViewBag.Partners value is populated (in the controller):

/// <summary>

/// Populates the partners.

/// </summary>

protected void PopulatePartners()

{

ViewBag.Partners = Database.Partners.Select(pg => new { pg.Id, pg.FriendlyName }).ToArray();

}

What is going on here? Why is the normal Html.DropDownListFor working, while Kendo's version isn't?

DropDownList

answered on 18 Dec 2014

13 answers

277 views

Retaining order of elements after POST

Hi I have a list of items in a multiselect and I want them to be received in the order that the user has specified when being sent to the controller

Right now they seem to be sorted by whatever the datasource is sorted by.

Any tips?

MultiSelect

answered on 18 Dec 2014