Telerik Forums
UI for ASP.NET MVC Forum
1 answer
1.8K+ views

Hi Telerik Team,

I am having telerik MVC kendo grid(server side grid), In the grid I have defined databinding event. In databinding I want to call web api and alter grid's underline items based on that, and want grid to take updated items and display in grid. mainly want grid to wait for ajax complete before invoking it's databound event. plz share how to achieve that.

Please find the code snippet below,

 @(Html.Kendo().Grid<Model>()
        .Name("grdResults")
    .Columns(columns =>
    {
        columns.Bound(e => e.Title).Title("Title").Width(300);
        columns.Bound(e => e.resources).Encoded(false).Width(100).Title("Resource").Sortable(false);       
    })
           
                           .Scrollable()
                           .DataSource(dataSource => dataSource
                           .Custom()
                           .Schema(sch =>
                           {
                               sch.Model(m =>
                               {
                                   m.Id("field1");
                                   m.Field(f => f.field1).Editable(false);
                               });
                           })
                           .Type("odata-v4")
                           .Transport(transport =>
                           {
                               transport.Read(read => read.Url(odataurl)
                                   .DataType("json")
                                   );

                           })
                           .PageSize(10)
                           .ServerPaging(true)
                           .ServerSorting(true)
            //.ServerFiltering(true)

    )
            .Sortable()
            .Pageable()           
            .Events(e => e.DataBinding("onDataBinding"))        
)

<script>

function onDataBinding(arg) {

//Making ajax call here and and changing the arg.items value for a particular column,but value is not getting updated in the grid 

Note: I am able to update the grid column value when I make async: false in ajax call

}

</script>

 

Thanks,

Prathibha

 

Alex Hajigeorgieva
Telerik team
 answered on 22 Mar 2017
1 answer
76 views
Hi All,

I am trying to submit one form having a grid in it. only example/demo so far which fits my needs is below:
sample used for posting form with grid
 
On top of that i did some small change and i am getting an issue.
Issue: 
The above given sample works fine and i can see that what ever changes were made to grid at client side, those all get posted to server when save is clicked.
but if i enable popup editing in grid, then none of items of grid data contains information on whether they were newly added or updated, same time deleted items are not coming in grid's destroyed list.

Please find attached sample(with said issue) which is exact same copy as sample with below changes:

1. enabled editing sing popup editor
2. using custom popup editor - named orderdetails

With this when i click on save, senddata js function is called but all array items which are sent to server in save ajax call are empty list. when i debugged i can see they are all empty as i am not getting dirty/isnew() giving true for added/edited rows. also grid.dataSource._destroyed.length is also 0, even after deleting few rows from grid.

Please help me solve this issue in this sample. Thanks.

Other more related query but not an issue:
In sample which i referred, list is maintained in static variable in controller, but i can't use static as that way it will be same list for all my users,
so wanted to know is there any built in support in grid where in i can just have read of datasource defined to read from db(controller action) on first load,
and then further add/update/delete happens at client side only and still it shall allow me to have popup editing enabled?
Note: I don't want to use session as unsaved data might be huge.

I am asking this as i understand if i remove update action from data source, then i can't enable editing, else grid throws error saying update is must to enable editing.
Konstantin Dikov
Telerik team
 answered on 22 Mar 2017
10 answers
2.8K+ views

I am using an External ClientTemplate to display some information.  I have created a link out of one of my data values and upon click, I would like to show additional information.  I have this working using the Custom Command action, but the button takes up too much real-estate, hence the new link.  What I cannot figure out is how to perform the same javascript call to accomplish what is working from the Custom Command.

My javascript that works for the Custom Command.

var detailsTemplate = kendo.template($("#statusTemplate").html());
 
function showStatusDetails(e) {
    e.preventDefault();
 
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var wnd = $("#Details").data("kendoWindow");
 
    wnd.content(detailsTemplate(dataItem));
    wnd.center().open();
}

 

My External ClientTemplate.  Looking for what to replace the ????? with.

<script type="text/x-kendo-template" id="statusRowTemplate">
    <div id="statusContainer">
        <a href="\\#" onclick='showStatusDetails(??????)'><h4 style="height:10px;">#= Description # (#= Code #) </h4></a>
        <div class="dataRow">
            <div class="dataRowField">
                Status Date/Time:
            </div>
            <div class="dataRowValue">
                #= FormattedStatusDateTime #
            </div>
        </div>
        <div class="dataRow">
            <div class="dataRowField">
                Entered By:
            </div>
            <div class="dataRowValue">
                #= EnteredByName #
            </div>
        </div>
    </div>
</script>

 

My grid and window markup

@(Html.Kendo().Grid<Status>()
        .Name("StatusGrid")
        .Columns(columns =>
        {
            columns.Bound(s => s.Code).Title("Status Information").ClientTemplate("#=statusRowTemplate(data)#").HtmlAttributes("style='padding:0px'");
            columns.Command(command =>
            {
                command.Custom("View").Click("showStatusDetails");
                command.Destroy().Text("Delete");
            }).Width(175);
        })
        .DataSource(ds =>
            ds.Ajax()
            .Model(model => model.Id(s => s.StatusID))
            .ServerOperation(false)
            .Read(r => r.Action("ReadStatuses", "ActionPages"))
            .Destroy(destroy => destroy.Action("DeleteStatus", "ActionPages", new { StatusID = "#= Id #" }))
        )
        .Events(e => e.DataBound("dataBound"))
)
 
@(Html.Kendo().Window().Name("Details")
    .Title("Status Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(500)
)
 
}
Gregory
Top achievements
Rank 1
 answered on 21 Mar 2017
5 answers
280 views

Hello,

I have tried out the Gantt control and moving over to the Scheduler control - I find that the presentation is almost the way I want. However, I want to force events to stick on one row. I display scheduled tasks for multiple employees and want to have both transparency and force tasks / events on a single row and not the way it is displayed in the attached image. Here, overlapping tasks/events will be shown on multiple rows. The grouping works nice, I want to utilize vertical space better by forcing multiple tasks /events into a single row to avoid lenghty scrolling. 

Is this possible with Scheduler control? I used Kendo UI for MVC. 

Veselin Tsvetanov
Telerik team
 answered on 21 Mar 2017
1 answer
231 views

Hi, I have created a project using the MVC5 Grid and Menu template.  When I run the project without any mods, there is a scroll bar on the grid control as expected but also a scroll bar on the browser window.  In order to see the copyright info I have to scroll the browser window.  I assume this is by design?  How do i get the content to fit the browser window without the need for 2 scroll bars?

Also when browsing in IE 11 the page is unresponsive for about 20 seconds but in Chrome and Edge it loads and is responsive instantly.  

Tsvetina
Telerik team
 answered on 21 Mar 2017
1 answer
183 views

I have used UI for ASP.NET MVC in my application and while calling StyleSheetRegistrar, I got error like "System.InvalidOperationException: You cannot call render more than once.". Now on Searching on web i found few solutions and i tried them all but i could not resolve that issue.I have not used ScriptManager in my application. Also i checked and could not find StyleSheetRegistrar().Render() method called twice in my master page. 

Could anybody please help me with this issue?

Note: we have called RenderPartial() method which brings few views during the flow in page but no view or ascx controls contain StyleSheetRegistrar().Render() method called in it.

Konstantin Dikov
Telerik team
 answered on 21 Mar 2017
4 answers
131 views

I am currently evaluating Telerik at the moment and we are currently trying to get our application to use the Grid widget to display a list of "Terms". The grid works semi-nicely when we parse a Model to the partial view and then use the Model with the grid. Model is below;

 

    public class Term
    {
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public int TermID { get; set; }
        [Required]
        public string TermName { get; set; }
        public string TermDescription { get; set; }
        public bool Preferred { get; set; }
    }

 

The problem is that there can be an unlimited amount of "Terms" so we have tried to use remote binding. However, when we use remote binding, the Grid widget doesn't show up at all. The method in the controller gets the data, and the browser seems to retrieve the json (according to Fiddler).

Controller Method

        public ActionResult _TermTable([DataSourceRequest]DataSourceRequest request)
        {
            using (IVContext db = new IVContext())
            {
                return Json(db.Terms.ToDataSourceResult(request),JsonRequestBehavior.AllowGet);
            }
        }

Partial View

@(Html.Kendo().Grid<DemoSpace.Models.Term>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.TermID);
        columns.Bound(p => p.TermName);
        columns.Bound(p => p.TermDescription);
        columns.Bound(p => p.Preferred);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .ServerOperation(true)
        .Read(read => read.Action("_TermTable", "Admin"))
     )
)

I know that I am going to be missing something obvious, but I just can't see it.

 

Any and all help is appreciated.

 

Johannes
Top achievements
Rank 1
Veteran
 answered on 21 Mar 2017
1 answer
505 views

I have a form with a Kendo UI MultiSelect component for ASP.NET MVC / Razor:

@(Html.Kendo().MultiSelectFor(m => m.Ids) .Filter(FilterType.Contains) .AutoBind(true) .MinLength(3) .Delay(500) .DataTextField("Value") .DataValueField("Key") .Placeholder("Please fill") .DataSource( ds => ds.Read( r => r.Action("FillMultiSelect", "ReportsController", new { companyId = IdentityManager.CompanyID, search = string.Empty }) ).ServerFiltering(true) ) )

JavaScript for filtering:

var $ids = $("#Ids").data("kendoMultiSelect"); $ids.dataSource.transport.options.read.data = basicFilter($ids); var basicFilter = function ($element) { return { companyId: self.form.getModel().CompanyId, search: $element.input.val() } }

When I type the search text at the "Ids" MultiSelect, the parameter passed to the ASP.NET MVC Action is the value of the placeholder of the element (see attached images).

What's wrong with my code?

I have posted the same question Stack Overflow: http://stackoverflow.com/questions/42844737/kendo-multi-select-component-passing-placeholder-as-value

 

Ianko
Telerik team
 answered on 20 Mar 2017
7 answers
1.0K+ views

Dear all,

I had followed this useful link Remote Validation to apply the remote validation on MetaData class as follows;

Metadata

public class CoinMetadata
{
    [Required(ErrorMessageResourceType = typeof(Errors), ErrorMessageResourceName = "NameReq")]
    [Display(Name = "CoinName", ResourceType = typeof(ScreenRes))]
    [Remote("IsValidName", "Coin", ErrorMessageResourceType = typeof(Errors), ErrorMessageResourceName = "NameDuplicate")]
    // AdditionalFields="coin_id", ErrorMessageResourceType = typeof(Errors), ErrorMessageResourceName = "NameDuplicate")
    public string name { get; set; }
}

 

The Controller:

public JsonResult IsValidName(string name)
{
    bool found = db.IGL_coin.Any(name => name.name == name);
    if (!found)
    {
        return Json(true, JsonRequestBehavior.AllowGet);
    }
    return Json(false, JsonRequestBehavior.AllowGet);
}

The error message from resource file doesn't show up, instead It shows false.

How can I make it works?

Stefan
Telerik team
 answered on 20 Mar 2017
1 answer
86 views

Hi, the date filtering does not appear to be working.  I am in the UK and i have formatted the datepicker to be dd/MM/yyyy but when the data is being filtered it is not working correctly.  Is there a quick fix for this.  Also if you type into the datepicker and press enter should the grid data update?  

 

Thanks Graham

Tsvetina
Telerik team
 answered on 20 Mar 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?