Questions on UI for ASP.NET MVC Forum

6 answers

2.3K+ views

How to set the 'Select()' (checkbox) column of the MVC Grid?

Hi,

Please can anyone show me how I can set the value of a Select() column in the MVC grid?

I have a class which contains a boolean field that I would like to use to tick / untick the checkbox that the Select() column renders, but I can find no information on how to do it!

Any help greatly appreciated - please let me know if you require more info.

Thanks..Ed

Grid

answered on 18 Oct 2020

4 answers

302 views

ToDataSourceResultAsync extension methods should support cancellation token

I've recently started using ToDataSourceResultAsync extension methods, but noticed it is not allowed to pass cancellation token.

Cancellation token is widely supported in entity framework. And it has big benefits for long running queries to allow cancel them.

ToDataSourceResultAsync methods should support passing cancellation token as a parameter.

General Discussions

answered on 16 Oct 2020

3 answers

290 views

Version issue with Kendo Tree View

Hi Team,

i am using kendo treeview for one of my requirement. It was working fine with kendo.mvc dll version 2015, but when we upgraded kendo.mvc version to 2018.3.911.545 ,it is not working properly and items inside tree view getting disabled.

Please let me know how to resolve this issue. Thanks

@helper RenderGroupTreeView()
{
@(Html.Kendo().Window().Name("windowGroupTree").Title("Sector").Draggable().
Actions(actions => actions
.Minimize()
.Maximize()
.Close()
).Visible(false)
.Resizable()
.Scrollable(true)
.Height(300)
.Content(@<text>
@(Html.Kendo().TreeView()
.Name("GroupTree")
.BindToTaxonomyData("Group")
.Events(events => events.Select("onGroupSelection").DataBound("onGroupSelection"))
)
<br />
<span id="SGlabel" style="font-style:italic;" class="k-label-bottom">Selected: </span>
<span id="SelectedGroup" style="font-weight:bold;font-style:italic;" class="k-label-bottom">@Html.DisplayFor(x => x.Group.Description)</span><br /><br />
<span id="btnGroup" style="align-items:center" class="k-button">OK</span>
</text>)
)

Grid

answered on 16 Oct 2020

9 answers

4.4K+ views

How can I refresh my grids after update

I using this post to do my update : Save all changes with one request

It worked great but at on exception... how can I refresh my grid on postback ?

I using on my controller this signature :

[HttpPost]

public ActionResult Save(

[DataSourceRequest] DataSourceRequest request,

int idClient,

[Bind(Prefix = "updated")] IEnumerable<MyViewModel> updatedModels,

[Bind(Prefix = "new")] IEnumerable<MyViewModel> newModels,

[Bind(Prefix = "deleted")] IEnumerable<MyViewModel> deletedModels)

{

var entities = new List<EntityModel>();

//Doing update and manage ModelState for errors

var result = entities.ToDataSourceResult(request, ModelState, MyViewModel.FromEntite);

return Json(result);

}

I want for each row:

Keep dirty mode on errors ones
Update Id for created ones
Remove dirty status css on the success ones

I keep the javascript post and return same as the code in example help.

Thank you very much!

Grid

answered on 16 Oct 2020

1 answer

525 views

display notification after submit a delete action

Hello,

i want to display notification after delete an element from grid view and after that i should to redirect to another action (display list updated).

i used notification template of telerik ui by default that i developed in partial view because i want to use it in other pages.

my problem is how to display notification after click delete action and redirect to the list update and the notification still showing.
if you have an idea or another preposition to resolve this?

Thanks !

Notification

answered on 16 Oct 2020

7 answers

1.8K+ views

Issue with PersistSelection, when programatically selecting rows

Hello,

I am encountering a problem with the grid control and PersistSelection. After a user selects rows across the pages of the grid, there's a javascript function (ProcessGrid()) that builds an array of the selected rows and passes it as a parameter to an AJAX call on a controller method for processing. This process works correctly when a user manually selects the rows through clicking on the control. However, if I set the selected rows programatically by handling the DataBound event in Javascript, only the rows selected on the current page are picked up when I call ProcessGrid(). Note that after DataBound is handled, the correct rows are selected across every page.

Am I making a mistake somewhere when setting the selected rows in the DataBound event handler?

Sample grid:

@(Html.Kendo().Grid<SampleApp.Models.CompanyViewModel>()

.Name("grdCompanies")

.Columns(col=> {

col.Select().Width(50);

col.Bound(b=>b.CompanyName);

col.Bound(b=>b.CompanyType);

})

.ToolBar(tb => {

tb.Search();

})

.Search(search=> { search.Field(p=>p.CompanyName); })

.Pageable()

.Sortable()

.PersistSelection()

.Events(e=>e.DataBound("onDataBound_grdCompanies"))

.DataSource(ds => ds

.Ajax()

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

.Read(read=>read.Action("Company_Read","Sample"))))

DataBound event handler:

// set select flag on companies in progress

function onDataBound_grdCompanies(e) {

var m_grid = this;

var m_dataSource = m_grid.dataSource;

// loop through each record

$.each(m_grid.items(), function (index, item) {

var m_uid = $(item).data("uid");

var m_dataItem = m_dataSource.getByUid(m_uid);

if (m_dataItem.IsSelectedCompany == true) {

m_grid.select($(item));

}

});

}

ProcessGrid()

function ProcessGrid() {

var m_ViewModelID = '@Model.ViewModelID';

var m_url = '@Url.Action("Company_Save", "Sample")';

var m_grid = $("#grdCompanies").data("kendoGrid");

var m_SelectedCompanies = [];

m_grid.select().each(function () {

m_SelectedCompanies.push(m_grid.dataItem(this));

});

$.ajax({

type: 'POST',

url: m_url,

cache: false,

data: JSON.stringify({

pViewModelID: m_ViewModelID,

pCompanies: m_SelectedCompanies,

}),

dataType: "json",

contentType: 'application/json;',

success: function (result) {

if (result.indexOf("ERROR:") !== -1) {

// some code

}

});

}

Grid

answered on 15 Oct 2020

1 answer

80 views

When My grid loads, when I go to add a new record, the new line shows as a small space. How to fix that?

I'd rather show with pictures, then explain. When i add a new row of data, my line to add that new row is small and scrunched like so. Then, when I add data or put anything in it, it expands. How do I get it to expand on hitting the create button, before I add any data in the columns? This way, I'm not squelching my eyes trying to click on it to expand.

Grid

answered on 15 Oct 2020

9 answers

789 views

Load Treelist on Treeview Expand event

Hi All,

I am having a requirement to load a treelist when i click on any of the node in treeview (i.e. to bind treelist on treeview expand event).

I tried various method but nothing worked for me (even i try to bind dummy data)

My code is as below

<div class="control-container">

    @(Html.Kendo().TreeView()

                    .Name("treeview-kendo")

                    .TemplateId("treeview")

                    .DataSource(dataSource => dataSource

                        .Model(m => m

                        .Id("parentId")

                        .HasChildren("HasChildren"))

                        .Read(read => read

                        .Action("BindingTreeView", "BrowseProgram")))

                    .DataTextField("ShortName")

                    .Deferred()

                    .Events(events => events.Expand(

                        @<text>

   function (e) {

    var data = this.dataItem(e.node);

    if (data.id != null) {

        $.ajax({

            url: "/BrowseProgram/GetContractData",

            type: "POST",

            dataType: "json",

            data: {

                'levelId': data.id

            },

            success: function (response) {

                if (response != null) {

                    var dataSourcer = new kendo.data.TreeListDataSource({

                        data: response

                    });

                    $("#treelist").kendoTreeList({

                        dataSource: dataSourcer

                    });

                }

                else {

                    alert("Something went wrong");

                }

            },

            error: function () {

                alert("Some error occurred!!");

            }

        });

    }

}





                        </text>

                ))

              )

</div>

Controller Code

public JsonResult GetContractData(int? levelId, [DataSourceRequest] DataSourceRequest request)

{

if (levelId != null)

{

IEnumerable<ContractListViewModel> objContractListViewModel = null;

long contactId = 331489;

string userType = "Secured";

objContractListViewModel = ApiHelper.GetRequest<IEnumerable

<ContractListViewModel>>(string.Format(Constants.ApiUrls.TreeViewGetLevelContractsWithCacheLevelContractInfo, levelId, contactId, userType));

var result = objContractListViewModel.AsQueryable().ToTreeDataSourceResult(request, f => f.ContractId, f => f.ParentContractId, f => f);

return Json(result, JsonRequestBehavior.AllowGet);

}

else

return null;

}

public JsonResult BindingTreeView(int? parentId)

{

IEnumerable<TreeViewModel> objTreeView = null;

long contactId = 331489;

string userType = "Secured";

if (parentId != null)

{

objTreeView = ApiHelper.GetRequest<IEnumerable<TreeViewModel>>(string.Format(Constants.ApiUrls.TreeViewGetChildLevelsFiltered, parentId, contactId, userType));

}

else

{

objTreeView = ApiHelper.GetRequest<IEnumerable<TreeViewModel>>(string.Format(Constants.ApiUrls.GetTreeViewRootLevelsAndContracts, contactId, userType));

}

var result = objTreeView.Select(p => new

{

parentId = p.LevelId,

p.ShortName,

p.HasChildren,

p.WrapUpIndicator

});

return Json(result, JsonRequestBehavior.AllowGet);

}

Kendo Treelist

@(Html.Kendo().TreeList<Aon.Ars.Retail.AonWrap.Web.Models.ContractListViewModel>

()

.Name("treelist")

.Columns(columns =>

{

columns.Add().Field(e => e.ContractNumber).Title(@AonWrapStringResources.Generic_Contract_Number);

columns.Add().Field(e => e.ContractorName).Title(@AonWrapStringResources.Generic_Contractor);

columns.Add().Field(e => e.ContractType).Title(@AonWrapStringResources.BrowseProgram_TypeStatus).TemplateId(Constants.ContractTypeTemplate).Width(100);

columns.Add().Field(e => e.VerifiedInsuranceCostStatus).Title(@AonWrapStringResources.BrowseProgram_VerifiedInsCost).TemplateId(Constants.VerifiedTemplate).Width(100);

columns.Add().Field(e => e.EnrollmentStatus).Title(@AonWrapStringResources.Generic_Label_Enroll).TemplateId(Constants.EnrollmentTemplate).Width(90);

columns.Add().Field(e => e.PayrollStatus).Title(@AonWrapStringResources.Generic_Label_Payroll).TemplateId(Constants.PayrollTemplate).Width(90);

columns.Add().Field(e => e.COIStatus).Title(@AonWrapStringResources.BrowseProgram_ReqCOIs).TemplateId(Constants.COIStatusTemplate).Width(90);

columns.Add().Field(e => e.WorkCompleteStatus).Title(@AonWrapStringResources.Generic_Label_Work_Complete).TemplateId(Constants.WorkTemplate).Width(105);

})

.Sortable()

.Height(540)

.Deferred()

)

TreeList

answered on 15 Oct 2020

3 answers

2.6K+ views

Adding a place holder to date field

Hi there guys, as the title states, i am try to add a placeholder to a date field.

<div class="form-group">

@(Html.Kendo().DatePicker()

.Name("DateReceived")

.Format("dd-MMM-yy")

.DateInput()

.HtmlAttributes(new { style = "width: 90%", title = "DateReceived", placeholder="Enter A Date"})

)

</div>

but regardless of what i do, it doesn't show the placeholder value. What can i do to remedy this?

DatePicker

answered on 15 Oct 2020

3 answers

1.2K+ views

How can I can the value and data of the chosen combobox and display the information on a textbox?

@(Html.Kendo().ComboBox()
.Name("TransferItemId")
.DataTextField("Location.Code")
.DataValueField("Id")

.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetInventoryPallets", "Item" });

})
.ServerFiltering(true);
})

)

ComboBox

answered on 14 Oct 2020