Questions on UI for ASP.NET MVC Forum

1 answer

105 views

How to add Hyperlink to data lables on Stacked barchart

Is it possible to add Hyperlink which can take to a new View on Stacked Bar Chart.

Please let me know.

Chart

answered on 24 Dec 2014

2 answers

141 views

How to implement checkbox column

Hi, I'm finding conflicting posts on how to add a checkbox column to the grid. I am using the HtmlHelper/server-side wrapper. Any help would be appreciated.

My requirement is to allow for a checkbox column on the grid.
Each checkbox click/unclick must select/unselect the row.
When rows selected by clicking/dragging the checkboxes should be selected.
The checkbox column needs to have a check-all/uncheck-all header checkbox.

Attached is a small screenshot of our grid from Telerik for AJAX.

Grid

answered on 23 Dec 2014

3 answers

127 views

Grid Validation

I have an MVC page that has many controls on it, including a Telerik MVC grid. Most of my editors are using DataAnnotations for validation (Required, Range, etc.). However, I'm trying to come up with a way to validate whether or not at least one item exists within the grid. Is there a way to do this? Nothing is jumping out at me in the documentation. Any help would be welcome!

Grid

answered on 23 Dec 2014

11 answers

438 views

Multiple Grid Export Excel/PDF/CSV

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

285 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

798 views

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

119 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.2K+ views

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

224 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

170 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