1. Home
  2. Forum
  3. ASP.NET MVC
  4. Splitter throws nullreferenceexception or an item with the same id already added

Splitter throws nullreferenceexception or an item with the same id already added

Hi, I am using .NET MVC controls. I try to implement a Splitter.

So in IndexPageModel:
 public class IndexPageModel
    {
        public Splitter MainSplitter  { get; set; }

in constructor:
public IndexPageModel()
        {
            SplitterProperties sp = new SplitterProperties();
            sp.Height = "800px";
            sp.Width = "600px";
            sp.Orientation = Orientation.Horizontal;
            sp.AnimationSpeed = 2;
            sp.EnableAnimation = true;
            sp.IsResponsive = true;

            List<PaneProperties> panesList = new List<PaneProperties>();

            MvcTemplate<PaneProperties> contentTemplate = new MvcTemplate<PaneProperties>();

            PaneProperties pane1 = new PaneProperties();
            pane1.PaneSize = "200px";
            pane1.ContentTemplate = contentTemplate;
            pane1.Collapsible = false;
            pane1.Resizable = true;
            panesList.Add(pane1);

            PaneProperties pane2 = new PaneProperties();
            pane2.PaneSize = "200px";
            pane2.ContentTemplate = contentTemplate;
            pane2.Collapsible = false;
            pane2.Resizable = true;
            panesList.Add(pane2);

            sp.PaneProperties = panesList;
            sp.Items = panesList;
            MainSplitter = new Splitter{ ID = "mainSplitter", SplitterModel = sp};

In HTML:
<div>
    @Model.MainSplitter 
</div>

I think my problem is in the colored lines. If I add the panes to PaneProperties OR Items, I get a nullreference. If I add them to both, I get an Item with same ID already added.

Also, how do I define contentTemplate from C#?

I would appreciate any and all C# examples rather than HTML/Razor/Javascript. I try to keep the latter at the minimum.

Thanks!



9 Replies
SS Selvamani Sankarappan Syncfusion Team May 11, 2018 10:35 AM UTC

Hi Gyorgy, 
 
Thanks for contacting Syncfusion support. 
 
We have checked your code example. You can give the splitter properties and splitter pane properties by using splitter object.  Please refer to the following code example: 
 
[cs] 
 
  SplitterProperties splitterObj = new SplitterProperties(); 
 
            splitterObj.PaneProperties.Add(new PaneProperties() { Collapsible = true, Expandable = true, ContentTemplate = new Syncfusion.JavaScript.MvcTemplate<PaneProperties> { RazorViewTemplate = (data) => { return "Pane 1"; } } }); 
            splitterObj.PaneProperties.Add(new PaneProperties() { Collapsible = true, Expandable = true, ContentTemplate = new Syncfusion.JavaScript.MvcTemplate<PaneProperties> { RazorViewTemplate = (data) => { return "Pane 2"; } } }); 
 
            splitterObj.Orientation = Syncfusion.JavaScript.Orientation.Vertical; 
            splitterObj.Height = "300px"; 
            splitterObj.Width = "500px"; 
           splitter = new Splitter { ID = "split", SplitterModel = splitterObj }; 
 
            ViewData["SplitterModel"] = splitterObj;            //Passing Splitter properties using the ViewData 
 
[cshtml] 
@{ 
        Html.EJ().Splitter("Splitter", (Syncfusion.JavaScript.Models.SplitterProperties)ViewData["SplitterModel"]).Render(); 
    } 
 
Please refer to the following sample: 
 
Please let us know if you need any further assistance. 
Regards, 
 
Selvamani S. 


GG Gyorgy Gorog May 13, 2018 03:35 PM UTC

Selvamani,thanks for the update. 

1. I still get the nullreference error in View.

2. RazorViewTemplate = (data) => {return "Pane 1"; 
how do I add a grid or something? return myGrid?  

SS Selvamani Sankarappan Syncfusion Team May 14, 2018 12:39 PM UTC

Hi Gyorgy, 
 
Thanks for the update. 
 
Query: I still get the nullreference error in View. 
 
We were unable to reproduce the reported error. We suspect that the error caused due to the values not getting in view page from accessing the controller or model values. Are you able to reproduce the reported error from previously shared demo sample? If yes means, could you please modify the sample based on your requirement to reproduce the error and provide an appropriate solution at the earliest. 
 
Query: 2. RazorViewTemplate = (data) => {return "Pane 1"; how do I add a grid or something? return myGrid?   
 
As per current behavior, did not passing the other component as directly through RazorViewTemplate. It accepts only the string values. So, we suggest you render the grid or other components in partial view page and convert the partial page data to string. Please refer to the following code example: 
 
  using (StringWriter sw = new StringWriter()) 
            { 
                var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName); 
                var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, new TempDataDictionary(), sw); 
                viewResult.View.Render(viewContext, sw); 
                stringvalue = sw.ToString(); 
            }   
SplitterProperties splitterObj = new SplitterProperties(); 
 
            splitterObj.PaneProperties.Add(new PaneProperties() { Collapsible = true, Expandable = true, ContentTemplate = new Syncfusion.JavaScript.MvcTemplate<PaneProperties> { RazorViewTemplate = (data) => { return stringvalue;} } }); 
            splitterObj.PaneProperties.Add(new PaneProperties() { Collapsible = true, Expandable = true, ContentTemplate = new Syncfusion.JavaScript.MvcTemplate<PaneProperties> { RazorViewTemplate = (data) => { return "Pane 2"; } } }); 
 
 
Please refer to the following sample: 
 
Please let us know if you need any further assistance. 
 
Regards, 
 
Selvamani S. 


GG Gyorgy Gorog May 14, 2018 01:05 PM UTC

Selvamani, thanks for help. 
1. No, the sample renders nicely. I am a bit lost about this null stuff. 
2. This partialView string takes me more time to absorb. I actually hoped to bypass PartielView, hoping that tha panes could be refreshed separately.

As a BTW question, I know this does not relate to Synfusion controls but you are much more knowledgable in web controls than I am. Using IIS Express, the image nodes are not rendered as Chrome is not allowed to reach the local image files. I tried its starting parameter, also allowed iis to scan the local directories, also IE and Firefox to no success. Do you have a quick solution? 


 
Thanks! This is the best support I've seen so far. I will try not to overuse you.

SS Selvamani Sankarappan Syncfusion Team May 15, 2018 11:28 AM UTC

Hi Gyorgy,   
   
Thanks for the update.   
   
We have checked your query and we request you to change the authentication permission to access the local files. Please refer to the following reference link:   
   
Please let us know if you need any further assistance.   
   
Regards,   
   
Selvamani S.   


GG Gyorgy Gorog June 14, 2018 05:26 AM UTC

Hi, the original question has lead me to a more general one. 

I try to keep the Razor side as simple as I can, so I render the controls like @Model.MyDiagram, or @Model.MyTabs etc. after having defined everything in Model.
Another advantage is that I can pass a data object with my model, like Model.Doc, that has e.g. Model.Doc.Title and Model.Doc.Date etc. and than again I just say <div>@Model.Doc.Title</div> and that's all.

Now I see that some controls, in my case so far Splitter and Tab, cannot be referenced this way as I get a nullReference error. So I had to implement Tab by DataView["MyTab"]. This is discouraged by the company style sheet and I can insert the Doc data only one-by-one like DataView["DocTitle"] = Doc.Title which is much uglier than Model.Doc.Title, and

Html.EJ().Tab("mainTab", (Syncfusion.JavaScript.Models.TabProperties)ViewData["MainTab"]).Render();
is much uglier (for me) than the simplest 

@Model.MainTab 
 
Do you know which controls can be referred to as @Model.MyControl and which cannot? Is there any rational reason behind these differences? Can I implement a uniform interface w/os ViewData? 

Thanks.

AP Arun Palaniyandi Syncfusion Team June 20, 2018 01:12 PM UTC

Hi Gyorgy,  

Thank you for your update.  
 
 
Query1:” I try to keep the Razor side as simple as I can, so I render the controls like @Model.MyDiagram, or @Model.MyTabs etc. after having defined everything in Model. 
Another advantage is that I can pass a data object with my model, like Model.Doc, that has e.g. Model.Doc.Title and Model.Doc.Date etc. and than again I just say <div>@Model.Doc.Title</div> and that's all.” 
 
Still you will not be able to render the tab or splitter control, because of “Object null reference” exception. But controls like Tab,splitter are have content template which requires ViewContent to render the control. So, it cannot be rendered entirely using model. You need to render the control in the view and pass properties alone from the model.  
 
Query2:”Now I see that some controls, in my case so far Splitter and Tab, cannot be referenced this way as I get a nullReference error. So I had to implement Tab by DataView["MyTab"]. This is discouraged by the company style sheet and I can insert the Doc data only one-by-one like DataView["DocTitle"] = Doc.Title which is much uglier than Model.Doc.Title, and 
Html.EJ().Tab("mainTab", (Syncfusion.JavaScript.Models.TabProperties)ViewData["MainTab"]).Render(); 
is much uglier (for me) than the simplest  @Model.MainTab ” 
 
 
Actually, this is not feasible for the content template controls like Tab and splitter. As this will causes the “Object null reference” exception you have to render as we told earlier like below. 
 
 
@Html.EJ().Tab("Tab", Model.tab)  
 
 
 
 
Query3:”Do you know which controls can be referred to as @Model.MyControl and which cannot? Is there any rational reason behind these differences? Can I implement a uniform interface w/os ViewData?” 
 
Yes, you can render our simple direct controls like buttons, calendars, charts, pickers entirely from model but the content template, items, layouts controls like Tab, splitter, navigation Drawer, Dialog cannot be created in model. You have to create it in view and only pass the properties from model. 
 
 
Please let us know if you have any queries further. 

Regards,  
Arun P. 
 
 


GG Gyorgy Gorog June 21, 2018 07:38 AM UTC

Thanks, this is fair as it comes. Sorry to flood the threads with the same question but this was very important for me.  

ES Ezhil S Syncfusion Team June 22, 2018 04:34 AM UTC

Hi Gyorgy, 
  
Thanks for the update. 
  
Let us know if you need further assistance. 
  
Regards, 
Ezhil S 


Loader.
Up arrow icon