Custome Grid Incell editing design

[Avinash]

  @(Html.Kendo().Grid<RVNLMIS.Models.ListMasterBOQResourceCalc>()
   .Name("ResourceTypeGrid")
   .Columns(columns =>
   {

       // Resource Type column
       columns.Bound(c => c.RsrcType)
           .Title("Resource Type")
           .ClientTemplate("#= RsrcType ? RsrcType.ResourceTypeName : '' #")
           .EditorTemplateName("ClientResource")
           .Sortable(false)
           .HtmlAttributes(new { style = "text-align:left" })
           .HeaderHtmlAttributes(new { style = "text-align:left" })
           .Width(120)
           ;

       // Resource Name column
       columns.Bound(c => c.drpResource)
           .Title("Resource")
           .ClientTemplate("#= drpResource ? drpResource.ResourceName : ''#")
           .EditorTemplateName("ClientSubResources")
           .Sortable(false)
           .HtmlAttributes(new { style = "text-align:left" })
           .HeaderHtmlAttributes(new { style = "text-align:left" })
           .Width(120);

       // Quantity column
       columns.Bound(c => c.rsrcQty)
           .Title("Quantity")
           .HtmlAttributes(new { style = "text-align:right" })
           .HeaderHtmlAttributes(new { style = "text-align:right" })
           .Width(70)
           .Format("{0:N2}");

       // Wastage Percentage column
       columns.Bound(c => c.wastagePct)
           .Title("Wastage %")
           .HtmlAttributes(new { style = "text-align:right" })
           .HeaderHtmlAttributes(new { style = "text-align:right" })
           .Width(60);

       // Total Quantity column
       columns.Bound(c => c.TotalQty)
           .Title("Total Qty")
           .HtmlAttributes(new { style = "text-align:right" })
           .HeaderHtmlAttributes(new { style = "text-align:right" })
           .Width(80)
           .Format("{0:N2}");

       // Unit column
       columns.Bound(c => c.Unit)
           .Title("Unit")
           .HtmlAttributes(new { style = "text-align:left" })
           .HeaderHtmlAttributes(new { style = "text-align:left" })
           .Width(60);

       // Base Rate column
       columns.Bound(c => c.BaseRate)
           .Title("Base Rate")
           .HtmlAttributes(new { style = "text-align:right" })
           .HeaderHtmlAttributes(new { style = "text-align:right" })
           .Width(80)
           .Format("{0:N2}");

       // Total Rate column
       columns.Bound(c => c.TotalRate)
           .Title("Resource Amount")
           .HtmlAttributes(new { style = "text-align:right" })
           .HeaderHtmlAttributes(new { style = "text-align:right" })
           .Width(100)
           .Format("{0:N2}");
       columns.Command(command => command.Destroy()).Width(150);
   })
   .ToolBar(t =>
   {
       t.Create().HtmlAttributes(new { style = "float:right; margin: 5px;" });
       t.Save().HtmlAttributes(new { style = "float:right; margin: 5px;" });
   })
   .Editable(editable => editable.Mode(GridEditMode.InCell))
   .Pageable() // Pagination enabled
   .Sortable() // Sorting enabled
   .Scrollable() // Scrollable grid
   .HtmlAttributes(new { style = "height:500px;" })
   .DataSource(dataSource => dataSource
       .Ajax()
       .Batch(true) // Batch editing
       .ServerOperation(false) // Client-side operations
       .Model(model =>
       {
           model.Id(p => p.AutoID); // Set primary key
           model.Field(p => p.AutoID).Editable(false); // Disable editing for AutoID
           model.Field(p => p.RsrcType).DefaultValue(
                       ViewData["defaultResourceType"] as RVNLMIS.Controllers.Sub_BOQController.ResourceTypeModel);
           model.Field(p => p.drpResource).DefaultValue(new RVNLMIS.Controllers.Sub_BOQController.DrpResourceModel
           {
               ResourceName = "Select Resource",
               ResourceID = 0
           });
       })
       .PageSize(20) // Set page size
       .Read(read => read.Action("GetBOQResource_Details", "Sub_BOQ").Data("getBOQId"))
       .Create(create => create.Action("EditingCustom_Create", "Sub_BOQ"))
       .Update(update => update.Action("EditingCustom_Update", "Sub_BOQ"))
       .Destroy(destroy => destroy.Action("EditingCustom_Destroy", "Sub_BOQ"))
   )
)

Above is grid code , the tool bar is not showing at the top of the grid .

It should show like below example.

 

[Eyup]

Hello Avinash,

 

Thank you for writing to us.

The layout of the Grid from the snapshots looks broken. Can you run the page on Chrome browser and open the F12 inspector console to see if there are any interfering javascript errors?

Also, I have created a live example to test this behavior:
https://netcorerepl.telerik.com/QIblGQPx14jzueM231

And the toolbar buttons look correct:

Can you modify the live sample to demonstrate the issue and send the new URL back to me with this button?

 

Regards,
Eyup
Progress Telerik