Questions on UI for ASP.NET MVC Forum

1 answer

278 views

how to send GridSelectionMode.Multiple to the server

Hi,

I have a page with a grid with .Selectable(s => s.Type(GridSelectionType.Row).Mode(GridSelectionMode.Multiple)) and can select multiple lines. And I have a DropDownList.

What I want is to send an array of selected lines in the grid to the server AND the information of the dropdownlist.

If I want only one of this information I know how to do it but somewhere my ajax call gets corrupted.

If I have the following:

View:
var items= {};
var grid = $('#grid').data('kendoGrid');
var selectedElements = grid.select();
for (var j = 0; j < selectedElements.length; j++) {
var item = grid.dataItem(selectedElements[j]);
items['projectMoveModels[' + j + '].ID'] = item.ID;
items['projectMoveModels[' + j + '].DateString'] = item.Date;
items['projectMoveModels[' + j + '].EmployeeID'] = item.EmployeeID;
items['projectMoveModels[' + j + '].Hours'] = item.Hours;
}
$.ajax({
type: "POST",
data: items,
url: '@Url.Action("Move", "Project")',
}
})

And in the controller

public ActionResult Move(IList<ProjectMoveModel> projectMoveModels)

I do receive all selected lines in projectMoveModels.

But I want more data so I changed it to

var type = 1; //info from the dropdownlist
$.ajax({
type: "POST",
data: { projectMoveModels: items, type: type },

with in the controller

public ActionResult Move(IList<ProjectMoveModel> projectMoveModels, object type)

Now projectMoveModels will became null

How can I fix this error?

Thanks in advance

Maurice

Grid

answered on 06 Sep 2016

2 answers

548 views

Grid inCell edit mode with server side validation.

Hi,

I search how to show server validation error in a Grid like the client validation (see image in attach file for example).

My grid is a InCell edit mode.

This is my grid code :

@(Html.Kendo().Grid<Mentorat.Models.Intervention>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(c => c.Date_Intervention).Title("Date").Format("{0:yyyy/MM/dd HH:mm:ss}").Width(130).ClientGroupFooterTemplate("#= count # intervention(s)").ClientFooterTemplate("#= count # intervention(s)");

//columns.Bound(c => c.Date_Intervention).Width(130).Title("Date").ClientGroupFooterTemplate("#= count # intervention(s)").ClientFooterTemplate("#= count # intervention(s)").HtmlAttributes(new { @class = "templateCell" }).ClientTemplate((

//    @Html.Kendo().DateTimePicker().Name("date_#=No_Intervention#").Format("{0:yyyy/MM/dd HH:mm}").HtmlAttributes(new { data_bind = "value:Date_Intervention" }).ToClientTemplate()).ToHtmlString()

//);

columns.Bound(c => c.Duree_Intervention).Title("Durée (min.)").Width(70).ClientGroupFooterTemplate("Total : #= kendo.format('{0:0.00}', sum/60)# hrs").ClientFooterTemplate("Total : #= kendo.format('{0:0.00}', sum/60)# hrs");

columns.ForeignKey(c => c.No_Mentore_Intervention, (System.Collections.IEnumerable) ViewData["ListeMentor"], "No_Mentore", "NomComplet_Mentore").Title("Mentoré").Width(160).ClientGroupHeaderTemplate("#= getHeaderMentores(value,data)#");

columns.Bound(c => c.Description_Intervention).Title("Description").Width(300);

columns.Command(command => { command.Destroy(); }).Width(65);

})

.ToolBar(toolbar =>

{

toolbar.Create();

toolbar.Custom().Name("RepartirTemps").Text("Répartir").HtmlAttributes(new { id = "RepartirTemps", @class = "k-plus" }).Url("#");

toolbar.Save();

toolbar.Excel();

})

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

.Pageable()

.Filterable(ftb => ftb.Mode(GridFilterMode.Menu))

.Groupable()

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

.Events(events => events.Edit("onEdit"))

.DataSource(dataSource => dataSource

.Ajax()

.Events(e => e.Change("onChange"))

.Events(e => e.Error("onError"))

.Batch(true)

.PageSize(100)

.Model(model => model.Id(p => p.No_Intervention))

.Read(read => read.Action("Interventions_Read", "Interventions"))

.Create(create => create.Action("Interventions_Create", "Interventions"))

.Update(update => update.Action("Interventions_Update", "Interventions"))

.Destroy(destroy => destroy.Action("Interventions_Destroy", "Interventions"))

.ServerOperation(false) //nouveau....

.Aggregates(ag =>

{

ag.Add(p => p.Duree_Intervention).Sum();

ag.Add(p => p.Date_Intervention).Count();

})

)

This is my controller update code :

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Interventions_Update([DataSourceRequest]DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<

Intervention> interventions)

{

var entities = new List<Intervention>();

if (interventions != null && ModelState.IsValid)

{

if (ValiderGrid(interventions))

{

foreach (var intervention in interventions)

{

var entity = new Intervention

{

No_Intervention = intervention.No_Intervention,

Date_Intervention = intervention.Date_Intervention,

No_Mentor_Intervention = (int) Session["intNoMentor"],

No_Mentore_Intervention = intervention.No_Mentore_Intervention,

Duree_Intervention = intervention.Duree_Intervention,

Description_Intervention = intervention.Description_Intervention

};

entities.Add(entity);

db.Interventions.Attach(entity);

db.Entry(entity).State = EntityState.Modified;

}

db.SaveChanges();

}

var resultData = new[] { interventions };

return Json(resultData.AsQueryable().ToDataSourceResult(request, ModelState));

}

private Boolean ValiderGrid(IEnumerable<Intervention> interventions)

{

foreach (var intervention in interventions)

{

if(intervention.Date_Intervention == null)

{

ModelState.AddModelError("Date_Intervention", "Vous devez inscire une date.");

}

return ModelState.IsValid;

}

I add in attach file a capture of my action error return.

i tried lot of solution with the error events. Each solution have a loop with this property "e.errors.length" but .lenth is undefined.

it is posible to show server error in the gird like client side error? Or i can only print a error message in a popup or in a div?

Thank for your help!

Grid

answered on 06 Sep 2016

1 answer

113 views

ScrollView:image cannot be loaded

I try the example in mvc, but it can't useful. I think some .css or .js are less, When I use this ScrollView,http://demos.telerik.com/aspnet-mvc/scrollview/index ,How should I do?

ScrollView (Mobile)

answered on 06 Sep 2016

2 answers

349 views

Splitter not initial/work well in panelbar when using partial view

hello,

I am drawing one page like this: In panelbar, load Splitter widget. When I put Splitter in partial view and use LoadContentFrom to load this partial view. Splitter will not initial/work well.

Here is part code:

1. PanelBar

      @(Html.Kendo().PanelBar()
          .Name("Panelbar1")
          .ExpandMode(PanelBarExpandMode.Multiple)
          .Items(panelbar =>
          {
              panelbar.Add().Text(N5Default.LABEL_MASTER_STRUCTURE).ImageUrl(@Url.Content("~/content/images/controltesting_panel1.png"))
                  .Expanded(false).LoadContentFrom("SplitterPartial", "Admin");
          })
)

2. Splitter

@(Html.Kendo().Splitter()
      .Name("SplitterSample")
      .HtmlAttributes(new { style = "height:700px;top:-9px;" })
      .Orientation(SplitterOrientation.Vertical)
      .Panes(verticalPanes =>
      {
          verticalPanes.Add()
              .HtmlAttributes(new { id = "location-structure-top-pane" })
              .Scrollable(false)
              .Collapsible(true)
              .Content(
                Html.Kendo().Splitter()
                    .Name("LocationStructureHorizontalSplitter")
                    .HtmlAttributes(new { style = "height: 100%;" })
                    .Panes(horizontalPanes =>
                    {
                        horizontalPanes.Add()
                            .HtmlAttributes(new { id = "location-structure-left-pane" })
                            .Size("200px")
                            .Collapsible(true)
                            .Content("");
                        horizontalPanes.Add()
                            .Collapsible(true)
                            .HtmlAttributes(new { id = "location-structure-right-pane" })
                            .Content("");
                    }).ToHtmlString()
              );
          verticalPanes.Add()
              .HtmlAttributes(new { id = "location-structure-bottom-pane" })
              .Size("320px")
              .Collapsible(true)
              .Content("");
      })
   )

Anybody know why it does not work?

After I use Content to load Splitter and not use LoadContentFrom by partial view, it works.

The below code works well:

@(Html.Kendo().PanelBar()
          .Name("Panelbar1")
          .ExpandMode(PanelBarExpandMode.Multiple)
          .Items(panelbar =>
          {
              panelbar.Add().Text(N5Default.LABEL_MASTER_STRUCTURE).ImageUrl(@Url.Content("~/content/images/controltesting_panel1.png"))
                  .Expanded(false).Content(@<div>
                      @RenderSplitter()
                  </div>);
          })
)

@helper RenderSplitter()
{

@(Html.Kendo().Splitter()
.Name("SplitterSample")

.......

}

Anybody can help? Because I am drawing one complex page. I cannot put all widgets in one page. It will be hard to view. So I want to use partial view to load. Thanks in advance.

Mark

Best Wishes

PanelBar

answered on 06 Sep 2016

3 answers

193 views

Does Kendo Validator exist as a replacement or supplement to jQuery Validator?

Does Kendo Validator exist as a replacement or supplement to jQuery Validator?

It feels wrong to have to instantiate a kendo validator whenever a form contains kendo form elements, as well as the default jQuery validator which contains some special rules associated with the form elements that Kendo doesn't provide.

General Discussions

answered on 05 Sep 2016

1 answer

137 views

Grid().DataSource

Hi,

I've over 500+ pages that almost has common DataSource definitions like:

......

.DataSource(dataSource => dataSource
.Ajax()
.PageSize(Constants.UI.GridPageSize)
.Events(events => events.Error(Constants.UI.GridErrorMethod))
.Model(model => model.Id(p => p.ID))
.Create(update => update.Action(Constants.UI.GridMethods.Create))
.Read(read => read.Action(Constants.UI.GridMethods.Read))
.Update(update => update.Action(Constants.UI.GridMethods.Update))
.Destroy(update => update.Action(Constants.UI.GridMethods.Delete))
)

I've made an extension (defined in here: http://www.telerik.com/forums/define-a-custom-html-kendo-extension-helper), but I also want to say .CustomDataSource() and manage in one place. How I can do that?

Thank you.

Grid

answered on 01 Sep 2016

1 answer

79 views

setting the height of a virtual scrollable grid hides the footer

hi,

i have a virtual scrollable grid for which i set the height:

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

.Scrollable(scrollable => scrollable.Virtual(true))
Scrollable(s => s.Height("500px"))

i also need to display custom record count using footerTemplate

columns.Bound(o => o.TradeNumber).Width(130).Groupable(false).Locked(true).FooterTemplate("Total records: " + recordCount);

setting the height above hides the footer. but i need to set the height since its virtual and i need it scrollable.

what can i do?

thanks.

Grid

answered on 01 Sep 2016

3 answers

498 views

ReadOnly lines in Grid

Hi,
I have a Grid with incell edits rows.
I search since the last 2 day to found a solution to have some line with attribute Readonly or disabled if the cell date is <= than a @ViewData[“DisabledDate“]. I don't want user to modify this lines.

I found this way : http://dojo.telerik.com/UQaGo .... but it a inline edit mode. I have to find a solution with InCell mode. I don't want to have to click "update" and "save" on each row.

Thank and sorry for my English.

My grid code :

@(Html.Kendo().Grid<Mentorat.Models.Intervention>()

.Name("grid")

.Columns(columns =>{

columns.Bound(c => c.Date_Intervention).Title("Date").Format("{0:yyyy/MM/dd HH:mm:ss}").Width(130).ClientGroupFooterTemplate("#= count # intervention(s)").ClientFooterTemplate("#= count # intervention(s)");

//columns.Bound(c => c.Date_Intervention).Width(130).Title("Date").ClientGroupFooterTemplate("#= count # intervention(s)").ClientFooterTemplate("#= count # intervention(s)").HtmlAttributes(new { @class = "templateCell" }).ClientTemplate((

//    @Html.Kendo().DateTimePicker().Name("date_#=No_Intervention#").Format("{0:yyyy/MM/dd HH:mm}").HtmlAttributes(new { data_bind = "value:Date_Intervention" }).ToClientTemplate()).ToHtmlString()

//);

columns.Bound(c => c.Duree_Intervention).Title("Durée (min.)").Width(70).ClientGroupFooterTemplate("Total : #= kendo.format('{0:0.00}', sum/60)# hrs").ClientFooterTemplate("Total : #= kendo.format('{0:0.00}', sum/60)# hrs");

columns.ForeignKey(c => c.No_Mentore_Intervention, (System.Collections.IEnumerable) ViewData["ListeMentor"], "No_Mentore", "NomComplet_Mentore").Title("Mentoré").Width(160).ClientGroupHeaderTemplate("#= getHeaderMentores(value,data)#");

columns.Bound(c => c.Description_Intervention).Title("Description").Width(300);

columns.Command(command => { command.Destroy(); }).Width(65);

})

.ToolBar(toolbar =>

{

toolbar.Create();

toolbar.Custom().Name("RepartirTemps").Text("Répartir").HtmlAttributes(new { id = "RepartirTemps", @class = "k-plus" }).Url("#");

toolbar.Save();

toolbar.Excel();

})

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

.Pageable()

.Filterable(ftb => ftb.Mode(GridFilterMode.Menu))

.Groupable()

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

.Events(events => events.Edit("onEdit"))

.DataSource(dataSource => dataSource

.Ajax()

.Events(e => e.Change("onChange"))

.Batch(true)

.PageSize(20)

.Model(model => model.Id(p => p.No_Intervention))

.Read(read => read.Action("Interventions_Read", "Interventions"))

.Create(create => create.Action("Interventions_Create", "Interventions"))

.Update(update => update.Action("Interventions_Update", "Interventions"))

.Destroy(destroy => destroy.Action("Interventions_Destroy", "Interventions"))

.Aggregates(ag =>

{

ag.Add(p => p.Duree_Intervention).Sum();

ag.Add(p => p.Date_Intervention).Count();

})

)

Grid

answered on 01 Sep 2016

1 answer

190 views

Populating Dropdown Lists When Editing

I'm trying to figure out how to populate a dropdown list when editing a ListView item. I'm binding to a ViewModel that contains an IEnumerable<SelectListItem>. On other pages without a ListView, I do something like below, however I'm not sure what action I can use to set up the model so that I have access to it when editing using the ListView. I tried looping through each item in the Read action and setting States there, which is definitely inefficient, but regardless didn't work. Any ideas?

public IActionResult Index()

{

var model = _service.FindById(1));

model.States = (_lookupService.GetStates());

return View(model);

}

<select asp-for="StateId" asp-items="Model.States" class="form-control">

<option value=""></option>

</select>

ListView