Questions on UI for ASP.NET MVC Forum

1 answer

448 views

Id like to extend to the AutoComplete helper to pass in a data-bding html 5 attribute, I have the following:-

@(Html.Kendo().AutoComplete()
          .Name("productAutoComplete")
          .DataTextField("id")
          .DataTextField("name")
          .DataSource(source =>
              {
                  source.Read(read =>
                      {
                          read.Action("ProductSuggestions", "Search")
                            .Data("onAdditionalData").Type(HttpVerbs.Get);
                      }).ServerFiltering(true);
              })
              .Enable(true)
    )

I want to be able to add a new HtmlAttrobute something like this:-

.HtmlAttributes(new[] { "data-bind='executeOnEnter: products'" })

So that I can use a knockoutJS custom binding - can anyone help me with this?

AutoComplete

answered on 16 Oct 2012

10 answers

571 views

Replacement for bindTo method

I'm looking to update an application developed using the MVC extensions, with the KendoUI MVC extensions. The application is centered around the treeview control, and I'm having difficulties working out equivalent functions in the KendoUI treeview.

To load data into the treeview, I'm making an ajax call, and populating an array with Treeview objects. I've changed the controller code to use Kendo TreeViewItems (and changed the value property to Id), and I'm getting data passed to the client.

However, the original code used the bindTo method to bind the data to the treeview, which seems absent in teh KendoUI treeview.

The original code is:-

$.ajax({

type: "POST",

async: true,

contentType: "application/json;charset=utf-8",

url: "@Url.Content("~/Home/GetTreeItems")",

data: '{"PID":"' + pid + '"}',

dataType: "json",

success: function(data){

var treeview = $('#AjaxTreeView').data('tTreeView');

$('#spinner').hide();

PID=data.PID;

pathwayData=data.elementList;

elementCount=data.ElementCount;

treeview.bindTo(data.nodeList);

$('#treeShower').show();

},

error: function(){

alert("An error has occurred");

}

});

I've changed the line which identified the treeview to :-

var treeview = $('#AjaxTreeView').data('kendoTreeView');

but the code fails as there isn't a bindTo method - what can I use instead?

Also, I'm using several of the treeview events, but again, the equivalents for some aren't clear.

In the original code I'm using

OnNodeDrop
OnNodeDragStart
OnNodeDragging
OnSelect
OnNodeDropped

It looks lie the select, and dragstart events will map, and the Drop event is probably the same, but what about the OnNodeDragging and OnNodeDropped events - what are the kendo equivalents?

Thanks

TreeView

answered on 16 Oct 2012

0 answers

207 views

Select All check box in header of Kendo grid

Hi Guys,

I found an example of putting a checkbox in the header row of a grid and when checked, it will check all the checkboxes on every row of the grid. This has one glitch though... if you make the grid scrollable, all bets are off... Does someone have an example where this scenerio works on a scrollable grid?

William Seaward

Grid

asked on 16 Oct 2012

4 answers

154 views

MVC Example

I'm trying to find a simple implementation of Kendo UI that uses Microsoft MVC to fetch any sample data from a back end server, hike it off to Kendo UI (as a datasource), edit the data and return it to the DB for update..

I'd expect to see the Kendo UI implementation of Knockout JS observable (which I think the datasource does) and the ability implement client side validation of the DataAnnotations. for example implement the MVC model data as a Kendo UI Datasource

I'd also expect to see the Controller supplying the contents of the AutoComplete and DropDown widgets since it's not very MVVM-ish to include them as JavaScript variables in the Client side.

Currently I have access to the model using the DropDownFor or AutoCompleteFor but it unclear that they validate. Or if the "For" tools are even necessary if I convert the model to a Kendo UI DataSource

You've got an amazing tool set.. And now we need simple comprehensive examples.

thanks
Pat Tormey NH USA

General Discussions

answered on 16 Oct 2012

0 answers

130 views

Series and Line format

Hi,

I'd like to understand something concerning the line is the series.

Here's my code :

@(Html.Kendo().Chart<Noolibee.Presentation.Web.Administration.Areas.Nodes.Models.EnergyGraphModel>()

.Name("intensityKendoChart")

.ChartArea(chart => chart.Background(""))

.DataSource(dataSource => dataSource.Read(read => read.Action("GetIntensityValues", "Plugins")))

.Series(series =>

{

series

.Line(line => line.Value)

.Name("Ampere")

.Color("blue")

.Tooltip(true)

.Width(2)

.Markers(marker => marker.Type(ChartMarkerShape.Circle).Size(4));

})

)

Between 2 markers, I have a nice blue line.

Then I try to add a value for the XAxis, so I added the line:
.CategoryAxis(axis => axis.Categories(model => model.Date))

Now, the nice blue line has disappeared but the dates are displayed in on the axis ! Why ? How can I have my Xaxis with the dates and a nice blue line between the markers ?

Another little question : how to customize the dates so all dates are not displayed because it's a big mess on the axis :-)

Thanks
Sylvain

Chart

asked on 16 Oct 2012

2 answers

1.2K+ views

[Solved] Empty grid on startup

Hi

I have a kendo ui grid which should be empty at startup. (Actually its a popup containing a kendo grid)

I have tried using the following code

$("#MyGrid").empty();

$("#MyGrid").kendoGrid();

But it make the grid header and footer invisible.

In Telerik I used to do it with grid.dataBind(null) which works perfectly

Please advise.

Grid

answered on 16 Oct 2012

1 answer

160 views

How to adjust the width of the input boxes , that appears when a grid is in inline edit?.

Hi,

I have noticed that the textboxes etc, that comes when you are editing in-line always have the same width.
How can I make them have the width so that they fill xx% of the column width that they are in or a fixed customized width.

Best

Ole

Grid

answered on 16 Oct 2012

10 answers

470 views

Porting from Telerik MVC Grid

I am trying to port a telerik mvc project to use the Kendo controls and am having difficulties on a few issues with the grid. If anyone can help with any of these issues I would appreciate it!

I am using an editor template for editing a certain view model object. The add/edit window that pops up is way too narrow and has a horizontal scroll bar. If I wrap a <div> around my fieldset and put width on it, the width is ignored. Currently the form is not usable because it is so narrow. How can I specify the width of my editor template? The following also has no effect:
- .Editable( editing => editing
  
      .Mode( GridEditMode.PopUp )
  
      .DisplayDeleteConfirmation( true )
  
      .Window( window => window.Width( 500 ) ))
When I click the "Add" button, the title of the window still states "Edit". How do I dynamically change this based on the mode?
I need to have a "Details" button in my master grid which will open a modal popup that displays all the details of the selected row. How is this accomplished with the Kendo grid?
Edit, Add & Delete buttons only have text. In the Telerik version we could specify to display text, text + image or image only. Where has this functionality gone? I need to only display icons on the buttons.
In the editor template, the "Update" button does not fire off the specified controller method. It simply closes the window.
The filter icon does not show up and filtering is not possible

I have looked through the limited documentation and examples and have not been able to answer these questions but if I missed an example I am happy to have that pointed out so I can take a look.

Thanks for your help!

Grid

answered on 16 Oct 2012

2 answers

124 views

Unterminated string error due to foreign key string containing single quote

I'm attempting to use a foreign key column and I sometimes get an unterminated string error while loading the page. I determined that this is due to having a single quote in the data (not uncommon for users to do that).

This is easy to duplicate using the MVC Example project by simply changing an Employee name in the Northwind database to contain a single quote. The Grid Foreign Key demo will show the error. (BTW, Firefox doesn't really indicate the error, it just stops. IE blows up.)

Encoding the string doesn't help. The resulting data simply shows the ' value in the output.

Anyone else have a similar problem?

Grid

answered on 15 Oct 2012

1 answer

135 views

issues with populating a grid only after user input

I have a pretty basic grid that is not populated on load. It requires users to enter search criteria first, which then searches the database and populates the grid. Below is the grid code

Html.Kendo().Grid<ArrayOfSearchResultObjectSearchResultObject>(Model.Results)

.Name("srchGrd")

.Columns(columns =>

{

columns.Bound(o => o.Chemical).ClientTemplate("<a title='#=Chemical#' href=

'" + Url.Action("", "ChemBioSearch", new { area = "Tools" }, Request.Url.Scheme) + "/GetDetail?ChemName=#=Chemical#&DetailID=#=ID#&DetailSource=#=SearchSource#&id=" + Model.ProjectGUID.ToString() + "'

>" +

"#=Chemical# </a>"

).Title("Chemical");

columns.Bound(o => o.CasNumber).Title("CAS #");

columns.Bound(o => o.UnNumber).Title("UN ID #");

columns.Bound(o => o.FriendlySourceName).Title("Data Source");

})

.DataSource(ds =>

{

ds.Ajax().ServerOperation(false).Read(read => read.Action("_GetSearchResults", "ChemBioSearch", new { area = "Tools" }));

}

)

.Scrollable(scrolling => scrolling.Enabled(false))

.Sortable(sorting => sorting.Enabled(true))

.Pageable(paging => paging.Enabled(true))

.Filterable(filtering => filtering.Enabled(true))

.Groupable(grouping => grouping.Enabled(false))

.Render();

which used to work great but broke ever since i upgraded to the Kendo 924 version (and same problem since the 1002 as well) it doesn't work like it used to.

Basically i have 2 controller methods. The first (SearchChemBio) gets called when the user enters the search data and hits enter. data gets sent no problem and send a partialresult (which contains the grid). I have the ajax call in there in order to handle sorting/filtering/paging.

[AcceptVerbs(HttpVerbs.Post | HttpVerbs.Get)]

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]

public ActionResult _GetSearchResults([DataSourceRequest] DataSourceRequest request,ChemBioSearchModel mdl)

{

if ((mdl != null) && (mdl.IsValid))

{

ArrayOfSearchResultObject rslt = SearchGlobal(mdl);

if ((rslt != null) && (rslt.Items.Length > 0))

{

foreach (ArrayOfSearchResultObjectSearchResultObject arr in rslt.Items)

{

mdl.Results.Add(arr);

}

return Json(mdl.Results.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}

return Json(new List<ArrayOfSearchResultObjectSearchResultObject>().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}

[HttpPost]

[ValidateAntiForgeryToken]

public ActionResult SearchChemBio(ChemBioSearchModel mdl)

{

if (mdl != null)

{

if (ModelState.IsValid)

{

ArrayOfSearchResultObject rslt = SearchGlobal(mdl);

if ((rslt != null) && (rslt.Items !=null) && (rslt.Items.Length > 0))

{

foreach (ArrayOfSearchResultObjectSearchResultObject arr in rslt.Items)

{

mdl.Results.Add(arr);

}

return PartialView("SearchResults", mdl);

}

else

{

return View(mdl);

}

throw new ArgumentException("No Model found for Chem Bio Search");

}

unfortunately now, the model in the Ajax call (_GetSearchResults) is always blank now (it didn't used to be before the update). Is there something i'm missing? I feel like i'm doing double work here, but can't figure out how to marry both calls.

Grid

answered on 15 Oct 2012