Questions on UI for ASP.NET MVC Forum

9 answers

4.2K+ 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

503 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.6K+ 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

71 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

737 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.5K+ 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?

Date/Time Pickers

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

1 answer

193 views

Breadcrumb MVC (real world) examples

Hello,

are there any examples on how to use the Breadcrumb control with MVC Actions, and maybe multiple root items to accomodate an application structure with views and sub-views?

So far we were not able to implement the Breadcrumb into out application, neither by BindToLocation nor by defining items explicitly; the navigation/routing always breaks in some part or another.

Kind regards.

Breadcrumb

answered on 14 Oct 2020

3 answers

9.6K+ views

How to set the Kendo UI Grid Column Width to Auto

Hi,

I would like to set Kendo UI MVC Grid Column width to auto size.

Anybody can please help me in this.

--Satish

Grid

answered on 13 Oct 2020

3 answers

1.7K+ views

Kendo Grid Checkbox/Radio Buttons not maintang selections on Grid Actions

Hi Kendo Team,

We have the following issues with radio button/checkboxes in a Grid:

1) In our grids, we have radio buttons or checkboxes for selection of records. However, on sorting or filtering, the selections are lost. Please advise how to maintain selections.

2) We have a grid which has is a bound column with custom template of a checkbox like so:

columns.Bound(m => m.Indicator)
.Title("Is Indicator")
.Template(@<text></text>)
.ClientTemplate(
"<input name='Indicator-#=(Id)?Id:uid#' id='Indicator-#=(Id)?Id:uid#' type='checkbox' #= Indicator ? checked='checked':'' # class='k-checkbox bind-checkbox' data-column-key='Indicator' />" +
"<label class='k-checkbox-label' for='Indicator-#=(Id)?Id:uid#'></label>" +
"<input name='view-value-#=(Id)?Id:uid#' type='hidden' value='#=Indicator#'>")
.Width(80);

When this grid is in a full page, the filtering/sorting maintains the checkbox selection. However, when this grid is in a kendoWindow popup, the selections are not maintained. Please advise.

Thanks.

Grid

answered on 13 Oct 2020