Razor Grid Questions and Documentation?

[Joshua]

Hello

I am struggling to find any documentation/examples of Razor grid syntax beyond just a basic way to get the page working. For example I have code that makes the basic grid, and it seems like there are a lot of features but I dont know how to use them. My specific questions are:

1. How do I control which fields show as editable when I click to edit? Currently they just all show and that is not what I want. I see I can add .Editable() to the columns but I dont see any documentation as to what value Im supposed to pass into there (besides the method signature) because it doesnt accept true/false?

2. In the fields that show, how do I control which fields are required? They are currently all by default required and that is not what I want.

3. I am looking to make the Boolean values show as Yes/No rather than true false. I see possibly this as a solution but it just tells me #MyBool is not defined.: 

     col.Bound(c => c.isProse).Title("ProSe").Width(55).ClientTemplate("#= MyBool ? 'Yes' : 'No' #"); 

 

Grid Code:

                    <div id="parties-scheduling" style="margin-right:8px;border:none;padding:0;color:black;">
                        <div id="PartiesTopRowInfo">
                            @Html.Kendo().Grid(Model.MiscellaneousInfo.PartyInfoList).Name("PartyGrid").ToolBar(x => 
                              x.Create()).Size(ComponentSize.Small).Editable(GridEditMode.PopUp).Resizable(r => r.Columns(true)).Columns(col =>
                             {
                                 // col.Select().Width(50).HtmlAttributes(new { @class = "checkbox-align" }).HeaderHtmlAttributes(new { @class = "checkbox-align" });
                                 col.Bound(c => c.Name.BuiltName).Title("Name").Width(175);
                                 col.Bound(c => c.PartyRole).Title("Role").Width(150);
                                 col.Bound(c => c.PartyRoleOverride).Title("Role Override").Width(150);
                                 col.Bound(c => c.AppearanceType).Title("Appear Type").Width(100);
                                 col.Bound(c => c.Timely).Width(60);
                                 col.Bound(c => c.ServiceType).Width(150);
                                 col.Bound(c => c.DateServed).Width(100);
                                 col.Bound(c => c.isProse).Title("ProSe").Width(55);
                                 col.Command(c => 
                                 {
                                     c.Edit();
                                     c.Destroy();
                                 }).Width(170);
                             }).Sortable().DataSource(dataSource =>dataSource
                             .Ajax()
                             .Read(r => r.Url("/Appearances/MiscellaneousInformation?handler=Read").Data("forgeryToken"))
                             .Update(r => r.Url("/Appearances/MiscellaneousInformation?handler=Update").Data("forgeryToken"))
                             .Create(r => r.Url("/Appearances/MiscellaneousInformation?handler=Create").Data("forgeryToken"))
                             .Destroy(r => r.Url("/Appearances/MiscellaneousInformation?handler=Destroy").Data("forgeryToken"))
                              .Model(m => m.Id(id => id.PartyAppearanceID)))
                              
                         </div>
                    </div>

 

 

[Alexander]

Hi Joshua,

I'm sorry to hear that you have not managed to stumble upon the needed resources in order to achieve the desired outcome. First of all, we are glad to have you on board - seeing that you are fairly fresh to the Telerik UI for ASP.NET Core suite.

Please allow me to dive straight into your questions:

1)

Generally, you can dictate the behavior of which fields should be prohibited for edition via the DataSource mediator, which not only serves as mediator between the client-side and server-side layer, but also allows you to define the schema to which the component will conform:

Think of it as a form of additional constraints that you would normally apply to a relational database, per se. The following article partially showcases this:

• DataSource Model Definition

For example:

.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Events(events => events.Error("error_handler"))
    .Model(model => {
        model.Id(p => p.ProductID);
        model.Field(field => field.UnitsInStock).Editable(false);
        model.Field(field => field.Discontinued).Editable(false);
    })
)

Which would produce the following result:

Here is a Telerik REPL example that further illustrates the configuration above:

• Telerik REPL for ASP.NET Core Example #1

2)

Normally, you can handle this scenario on the model front. The Telerik UI for ASP.NET Core component is smart enough to pick employed DataAnnotations, or look for fields which are marked as nullable:

Let's take for example the following demo:

• Grid Inline Editing (Demo) - open the "View Source" tab to observe the Grid's configuration.

And notice the model declaration:

public class ProductViewModel
{
    // We removed ID field so WebApi demo works correctly
    [ScaffoldColumn(false)]
    public int ProductID
    {
        get;
        set;
    }

    [Required]
    [Display(Name = "Product name")]
    [Remote("IsProductName_Available", "Validation")]
    public string ProductName
    {
        get;
        set;
    }

    
    public int? CategoryID { get; set; }

    ...
}

Notice that the "CategoryID" field will be explicitly marked as nullable, thus it will be omitted from the validation cycle:

Here is a Telerik REPL example that further illustrates this:

• Telerik REPL for ASP.NET Core Example #2

3)

The Telerik UI for ASP.NET Core allows you manipulate the appearance of the columns through the so-called templates. Their primary aim is to give the user direct control over how, when, and what exactly would be visually incarnated through the columns. 

The following article goes more into detail:

• Template Columns (Documentation)

Taking this into consideration, it is important to mention that the templates lean heavily on the Kendo UI Template. Which propagates the usage of the "#" symbol. This is further outlined in the following documentation:

• Template Hash Syntax (Documentation)

That said, if you wish to add the client template for the "isProse" field, then you should reference in the hash syntax the "isProse" field and not MyBool.

.Columns(columns =>
{
    columns.Bound(p => p.Discontinued)
		   .ClientTemplateHandler("myHandler")
		   .Width(100);
})

<script type="text/javascript">
        function myHandler(data){
            return data.Discontinued ? "Yes": "No";
        }
</script>

This should then produce the following visual outcome:

Here is yet another Telerik REPL example for you to examine further:

• Telerik REPL for ASP.NET Core Example #3

I hope this helps. If you have any feedback regarding our documentation, feel free to share - there is always room for improvement and having a more fresh look onto it is always valuable :)

Kind Regards,
Alexander
Progress Telerik

[Joshua]

Hi Alexander

Thank you for your response and I am making progress now. I do still need assistance with question #1 as Ive described below, but your solution to #3 worked perfectly and that is solved.

#2 is solved as well. With the required field, I noticed that it was working as you were describing with the nullable ints for example, but I was having issues with string being required. Turns out it was my csproj file having <Nullable>enable</Nullable> set which made it so my strings couldnt get passed null unless explicitly denoted with the ?. So that was not related to Telerik at all, just coincidence since its a new project and that was added fairly recently. 

#1 with the editable fields I am still having issues with. The editable false syntax you listed does work as expected for inline editing, however popup it has some issues.

• The field still shows up and you can edit it, but then the save appears to ignore it. How do I just make it show like it does for the inline with the popup?
• Also with the popup - all of my fields are showing on there and I want only a subset of them to show. How do I do this in the .net core syntax? Im looking at this example here Popup Editing in ASP.NET Core Grid Component Demo | Telerik UI for ASP.NET Core. All of the fields show and they are all editable. It be very helpful in an example like this if one of the fields was not editable/not all on the pop-up panel so users could see how that is done.

 

[Alexander]

Hi Joshua,

I am happy that we are making some steady progress here :)

Please allow me to touch on each of the subjects in a more unified manner

Default Popup Editor Mechanism

Generally, the Telerik UI for ASP.NET Core Grid's default PopUp will build its editors around a given class instance, without taking into consideration the applied ".Editable()". To provide more context, by default when the PopUp edit mode is enabled, an EditorForModel will be used. As a consequence, it will generate an Editor for each field respectively.

In order to back this statement up, here is a visual illustration - in order to clear the mud out of the water:

Potential Alternatives

Alternative #1

If you wish to preserve the default popup editor whilst disabling/omitting some of the fields, I would personally recommend proceeding with an approach similar to the one I have discussed in the following forum post:

• Grid Popup Editing

"Although, the aforementioned discussion showcases a scenario in which the fields are completely obscured, an identical approach can be embarked for disabling the editor via a state class."

In order to spare you some time, I have updated the referenced Telerik REPL example from the forum post as follows:

Grid:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModelGridPopUp>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.UnitPrice).Editable(@<text>
            function(dataItem) {
                return false;
            }
        </text>).Width(100);
        ...
    })
    .Events(e=>e.Edit("onEdit"))
    ...
)

JavaScript:

<script type="text/javascript">
        function onEdit(e){ 
          let columns = e.sender.columns; // 1. Gather the Grid's columns.

          columns.forEach(function(column) { // 2. Traverse through each of the columns.
              if(column.editable != null){ // 3. Assert whether there is an edit handler.
                  let isEditable = column.editable(); // 4. Call the edit handler in order to obtain the result.
                  let input = e.container.find(`input[id=${column.field}]`) // 5. Gather the corresponding editor based on the column's field. 
                  
                  if(!isEditable){ // 6. Assert for the result.
                      input.parent(".k-input").addClass("k-disabled"); // 7. Disable the input editor container.
                  }
              }
          })
        }
</script>

This should produce the following result:

Alternative #2:

The second alternative would be to lean toward taking matters into your own hands in the form of a custom popup editor, as demonstrated in the aforementioned forum post.

I hope this clears things out :)