Questions on UI for ASP.NET MVC Forum

3 answers

301 views

Changing labels from json data

Hi guys,

I have a pie chart that I'm fetching json data from my controller to populate. The json is pretty basic:

[

{

type: "AddOutageRequest",

count: 155

},

{

type: "AuthorizationRequest",

count: 362

},

{

type: "CurrentOutageRequest",

count: 2118

},

{

type: "PlannedOutageRequest",

count: 97

},

{

type: "RegionRequest",

count: 1212

}

]

This is good and I fetch it with my controller method but the labels on the pie chart/legend/etc. are (of course) the same as the "type" field. I want to present it in a more friendly manner so for example show "PlannedOutageRequest" as "Planned Outages" on the chart.

How would I do this in my chart wrapper (as I can't change the backend) or would I have do some javascript after the chart loads?

Here's my chart markup if that helps:

<div class="chart-wrapper">

@(Html.Kendo().Chart()

.Name("serverRequestsByTypeChart")

.Legend(legend => legend.Position(ChartLegendPosition.Bottom))

.Series(series =>

{

series

.Pie("count", "type")

.Labels(labels => labels

.Template("#= category #: \n #= value#")

.Background("transparent")

.Visible(true)

); ;

})

.DataSource(datasource =>

{

datasource.Read(read => read.Action("RequestTypesByTimePeriod", "Data"));

})

)

</div>

Thanks!

Chart

answered on 07 May 2015

9 answers

1.8K+ views

DateTime Column Filter

In Kendo UI Grid, if you have a dateTime Column then the column filter input has a date picker but no time picker. Due to this if you select option IsEqualTo and give a date then you get zero results as the time is set to 00:00:00 in the filter but the columns have some time value.

eg.

values in my column are
08-10-2012 15:08:00
05-09-2012 15:23:00

and when u use the filter then the value in the filter is
08-10-2012 00:00:00

hence when You give the option of IsEqualTo then you get zero values.

Grid

answered on 07 May 2015

4 answers

814 views

Cascade DropDownList keep selected value after initial loading

Hey...

I´m developing a CRUD application and I have a cascade ddl working fine in my Create view :

@Html.Kendo().DropDownListFor(model => model.CarSelected).BindTo(Model.Cars)

@(Html.Kendo().DropDownListFor(x => x.CarModelSelected).DataTextField("Name").DataValueField("Id")

.Enable(false).AutoBind(false).OptionLabel("Select"))

.CascadeFrom("CarSelected")

.DataSource(source => source.Read(read => read.Action("CarModels", "Car")

.Data("filter")).ServerFiltering(true))

That works great...

But in a Edit view, I have to previous load the car model selected, so I have something like that :

public ActionResult Edit(int id)

{

var car = repository.load(id);

CarVm carVm = car.InjectFrom(car);

...

carVm.CarModelSelected = car.Model.Id;

return View(carVm);

}

It works great and my inital Edit view is loaded fine...
Now when I change the car, it loads all car model (cascade) but the CarModelSelected keep the inital value, and the CarModel DropDown dont reset to OptionLabel "Select" .

So, If open a View with :Car A Model AB, change car to "Select", and after select Car A again, the model AB will be selected automatically

How can I fix that?

Thanks

DropDownList

answered on 07 May 2015

1 answer

332 views

Data Loss from DatePicker In Grid Inline Edit

Seeing an interesting problem when combining DatePicker and Grid functionality in the inline editing.

The date is editable without clicking the edit button. Clicking the edit button returns the date field to a input box and datepicker functionality is lost and when cancelling an edit the date is lost entirely and becomes an empty field.

Downloaded some other code samples out there and seeing some of the same issues. Anyone come upon these?

Cshtml:

<div>

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

.Name("commissionGrid")

.Columns(columns =>

{

columns.Bound(p => p.CommissionId).Hidden();

columns.Bound(p => p.TenantId).Hidden();

columns.Bound(p => p.SimpleName);

columns.Bound(p => p.StartDate).HtmlAttributes(new

{

@class = "templateCell"

}).ClientTemplate(

Html.Kendo().DatePicker()

.Name("FDPicker_#=CommissionId#")

.Format("{0:MM/dd/yyyy}")

.HtmlAttributes(new { data_bind = "value:StartDate" })

.ToClientTemplate().ToString()

).Format("{0:MM/dd/yyyy}");

columns.Bound(p => p.CustomerName);

columns.Bound(p => p.CustomerNumber);

columns.Command(command =>

{

command.Edit();

command.Destroy();

}).Title("Commands");

})

.Events(ev => ev.DataBound("db"))

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

.Pageable()

.Navigatable()

.Sortable()

.DataSource(dataSource => dataSource

.Ajax()

.Batch(false)

.PageSize(10)

.ServerOperation(true)

.Model(model =>

{

model.Id(p => p.CommissionId);

model.Field(p => p.CommissionId).Editable(false);

})

.Update(update => update.Action("EditingInline_Update", "Commissions"))

.Destroy(destroy => destroy.Action("EditingInLine_Destroy", "Commissions"))

)

</div>

JavaScript

function db(e) {

var grid = this;

$(".templateCell").each(function () {

eval($(this).children("script").last().html());

var tr = $(this).closest('tr');

var item = grid.dataItem(tr);

kendo.bind($(this), item);

});

}

Grid

answered on 07 May 2015

1 answer

222 views

DropDownList displays Index instead of display text

My Goal:

On Edit - display display text associated with DropDownList ID selected in lookup table.

Problem:

When creating a record, the DropDownList will lookup the value and display the associated text. Because the field is used to store only the "index" or ID of the associated record, when editing, only the integer index is displayed. I would like the text to be displayed as if it was just selected when the edit window is opened.

I have just begun working with Kendo and just not sure of the syntax.

Thank you!

DropDownList

answered on 07 May 2015

5 answers

226 views

Connection layout problems

Hi

I am trialling your product with a view to purchasing soon, but am having some issues with the default rendering of connections. I am using Layout Type and Down SubType. I've attached two files. One is the vertical layout that I am trying to achieve, but as you can see the connections don't look great. The second is a horizontal layout which seems to render much better, but isn't what I want.

Is there anything I can do to correct this. I tried adding new connectors to the shape, but can't work out what should go in the Position property in MVC.

Thanks

Jared

Diagram

answered on 07 May 2015

2 answers

321 views

Kednod dropdownlist inside kendo treeview next to treeviewItem

Hi,

I have a treeview template for rendering kendo drop down next to kendo treeviewItem. Below is the code. But I am getting javascript error from Kendo.all.min.js file saying "Invalid template". If I use Html.Dropdownlistfor instead kendo it works but with kendo drop down I am getting an error. Can you please help on this?

Below is the javascript error i get

Uncaught Error: Invalid template:'
                    #: item.text #
                    # if (item.text=="Allow Subclient") { #

                         <input Style="width: 100px !important;" id="RecordValue" name="RecordValue" type="text" value="abc12" /><script>
   jQuery(function(){jQuery("#RecordValue").kendoDropDownList({"dataSource":[{"Text":"abc12","Value":"969a5ff4-e0fc-426d-be02-a48b0104e342"},{"Text":"ABC2","Value":"4ff38eb7-813a-493f-b25c-a48b01049ee4"}],"dataTextField":"Text","autoBind":true,"dataValueField":"Value"});});
' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='\n                    '+$kendoHtmlEncode( item.text )+'\n                    '; if (item.text=="Allow Subclient") { ;$kendoOutput+='\n                       \n                         <input Style="width: 100px !important;" id="RecordValue" name="RecordValue" type="text" value="abc12" /><script>\n\tjQuery(function(){jQuery("';RecordValue").kendoDropDownList({"dataSource":[{"Text":"abc12","Value":"969a5ff4-e0fc-426d-be02-a48b0104e342"},{"Text":"ABC2","Value":"4ff38eb7-813a-493f-b25c-a48b01049ee4"}],"dataTextField":"Text","autoBind":true,"dataValueField":"Value"});});
;$kendoOutput+=;}return $kendoOutput;'

TreeView

answered on 07 May 2015

1 answer

96 views

Grid - Templated element not executing "onclick" where command button works fine.

My Goal:

Put text on a command button in a grid row, and pop up a "details" window when clicked.

Problem:

1) I can create a command button that works, but I am unsure the syntax to put my data custom text on the button.

2) I can create a templated button that contains my text, but will not seem to execute my popup!

I believe it's a problem with my syntax as I have just begun using this object. Here is a snippet of what I have:

1) { command: { text: "!", name: "ShowAllDetails", click: showAdminDetails, title: "View Contact Details..." }, title: " ", width: "80px" }

2) { template: '<input type="button" id="ShowAdminDetail" onclick="showAdminDetails(dataItem);" class="k-button k-grid-CustomCommand" title="Show Admin Contact Info..." value="#= getButtonText(data) #" />' }

Thanks in advance, I would like to get them BOTH working the same way so that I can better understand how these items function.

Grid

answered on 07 May 2015

7 answers

322 views

[Solved] Filter pivot data dynamically

Hi,

I have a problem figuring out how to filter data for pivot grid dynamically. E.G. I want to preview data in specific date range but dynamically not by user clicks. Is it possible to done this from javascript by filtering datasource or using configurator. When I choose in pivot configurator date range it query OLAP normally so the question is how to do this dynamically.
In attachment is example of initial and wanted state.

PivotGrid

answered on 07 May 2015

4 answers

260 views

Virtual scrolling looses edits on Checkbox bound column

We are using an editable grid with InCell editing in Batch mode.

We have a bool column with a checkbox using a client template:

columns.Template(c => c.Active)
.ClientTemplate("<input type=\"checkbox\" name=\"chkActive\" id=\"chkActive\" value=\"#= Active #\" #= Active?'checked':'' # />")
.Title("Select")
.HeaderHtmlAttributes(new { style = "text-align:center" })
.Width(40).HtmlAttributes(new { style = "text-align:center" });

It seems that we aren't getting two way biding though. We check some check boxes, then scroll down so a read occurs to get the next page of records, but when we scroll up the check boxes are no longer checked.

Is this not the correct way to bind a checkbox to a bool column in the editable grid?

Grid

answered on 07 May 2015