Questions on UI for ASP.NET MVC Forum

4 answers

624 views

Grid in forms?

Hi,

First, let me just say that I'm not satisfied by this change asp.net Mvc->kendo ui MVC. It's now a mess to find any information about products I've to maintain, and it's a shame to have to navigate between differents forums to post something(And I'm talking about the main website where we have to read the footer to find the correct page fastly). And there is no way to display by default asp.net Mvc code instead of the javascript synthax... And there is missing code for c#(e.g. no c# example for http://demos.kendoui.com/web/grid/events.html , no controller example for http://demos.kendoui.com/web/grid/editing-inline.html
) If your goal was to make my work less productive, you won. Hopes it will not continues this way.

I've an Asp.Net MVC website. I've to create a form on which I can edit an object with a small list of elements.

My model can be simplified like this:

MyModel

public class MyModel{

public String Name{get;set;}

public String Description{get;set;}

public List<Step> Steps{get;set;}

}

public class Step{

public int Id {get;set;}

public String Name {get;set;}

public String Description{get;set;}

}

I would like to be able to add/remove/edit "Steps", and that when I submit my form containaing MyModel fields, I also receive in the POST data the Steps data.

Is it possible with the telerik Grid? I saw demos, but I didn't make them work for my case, only found ajax instant updating or batch editing

Thank you for your help.

Grid

answered on 17 Oct 2012

1 answer

188 views

[Solved] Grid Ajax call on sorting

I have a grid as below

@{

Html.Kendo().Grid<InEnumerable........>()

.Name("IniParamGrid")

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

.Events(events => events.DataBound("Grid_onRowDataBound"))

.Events(events => events.Change("Grid_OnRowSelectUID"))

.AutoBind(false)

.Columns(col =>

{

col.Bound("NP_PARAM_UID").Hidden();

col.Bound("PROCESS_GRP").Title("Process Group").HeaderHtmlAttributes(new { style = "text-align:center;" });

col.Bound("PARAM_NAME").Title("Parameter Name").HeaderHtmlAttributes(new { style = "text-align:center;" });

col.Bound("PARAM_VALUE").Title("Parameter Value").HeaderHtmlAttributes(new { style = "text-align:center;" });

col.Bound("EXTERNAL_ID").Title("Table Name").HeaderHtmlAttributes(new { style = "text-align:center;" });

col.Bound("EXTERNAL_FK").Title("Key Value").HeaderHtmlAttributes(new { style = "text-align:center;" });

col.Bound("DEL_FLG").Hidden();

})

.DataSource(dataBinding =>

{

dataBinding.Ajax().Read(read => read.Action("SrchDataIniParam", "Admin",

new

{

area = "Admin",

strParam1 = ViewBag.Param1

}))

.ServerOperation(false);

})

.Resizable(resizing => resizing.Columns(true))

.Selectable()

.Reorderable(reorder => reorder.Columns(true))

.Pageable()

.Sortable()

.Filterable()

.Render();

}

Now the grid loads empty at starup which is ok. But if the user clicks the grid header then also the underlying controller action gets called which is not desirable. I want the grid to get populated on button click which its doing fine.

Please help me to find where I am going wrong.

Grid

answered on 17 Oct 2012

1 answer

455 views

AutoComplete Data-Bind html attributes

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

579 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

213 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

165 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

136 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

178 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

476 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